@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;450;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('styles-blog.css');

/* ============================================================
   AXYNT — ontwerpsysteem

   Warm en open: cream doek, bijna-zwarte tekst, goud voor
   handelingen, en platte illustraties met zwarte contour.

   Typografie: Outfit (geometrisch, vet, strak gespatieerd) voor
   koppen, IBM Plex Sans voor lopende tekst, IBM Plex Mono voor
   labels. Bewust niet Inter: dat lettertype is inmiddels zelf een
   signaal van een AI-gegenereerde site.
   Zie skills/skill-anti-ai-slop.md.
   ============================================================ */
:root {
  --cream: #faf7f0;
  --sand: #f5ebd8;
  --sand-soft: #f8eede;
  --mist: #e6f0ef;
  --white: #fffdf8;
  --ink: #14110f;
  --ink-soft: #56504a;
  --ink-faint: #857e76;
  --line: #e2d9c8;
  --line-soft: #ede5d6;
  --teal: #15706b;
  --teal-deep: #0e4f4b;
  --gold: #f2b33d;
  --gold-deep: #d99a22;
  --clay: #c4603f;
  --sky: #a9cfd4;

  --display: 'Outfit', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --r-pill: 999px;
  --r-panel: 20px;
  --r-inset: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { width: min(1200px, calc(100% - 64px)); margin: 0 auto; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: var(--r-pill); }
.skip-link:focus { left: 8px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.035em;
  margin-top: 0;
}
p { margin-top: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 247, 240, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav { height: 82px; display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand img { width: 52px; height: 38px; object-fit: contain; }
.brand-word { font-family: var(--display); font-size: 27px; font-weight: 700; letter-spacing: -.05em; color: var(--ink); }
nav { display: flex; gap: 30px; align-items: center; font-size: 15px; font-weight: 500; }
nav > a:not(.nav-cta) { color: var(--ink); transition: color .18s; }
nav > a:not(.nav-cta):hover, nav > a[aria-current="page"] { color: var(--teal); }
.nav-cta {
  background: var(--gold);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 11px 24px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .01em;
  transition: background .18s, transform .18s;
}
.nav-cta:hover { background: var(--gold-deep); transform: translateY(-1px); }
.menu-toggle { display: none; }

/* ---------- Knoppen ---------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 15px 34px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: background .18s, transform .18s, color .18s;
}
.button-primary { background: var(--gold); color: var(--ink); }
.button-primary:hover { background: var(--gold-deep); transform: translateY(-2px); }
.button-ghost { background: transparent; color: var(--ink); }
.button-ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.text-link {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  border-bottom: 2px solid var(--gold);
  padding: 3px 0;
  transition: border-color .2s, color .2s;
}
.text-link:hover { border-color: var(--ink); color: var(--teal); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 44px 0 66px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; }

h1 {
  /* Twee vaste delen ("Praktische AI" / "voor ondernemers") die elk niet
     afbreken. In de tekstkolom valt de kop daarmee altijd in twee regels,
     nooit met een los woord onderaan. */
  max-width: 16ch;
  margin-bottom: 18px;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
}
h1 em { font-style: normal; color: var(--clay); }

/* De kop bestaat uit twee zinnen van elk twee vaste delen. Elke zin is een
   blok, elk deel breekt niet af. Daarmee valt de kop altijd in vier regels,
   ongeacht de vensterbreedte; eerder kon "voor ondernemers" nog splitsen en
   werden het er vijf. */
.h1-regel { display: block; }
.h1-regel + .h1-regel { margin-top: .1em; }
.h1-deel { white-space: nowrap; display: inline-block; }

/* De alinea loopt van gedempt naar vol: de laatste zin is de belofte en
   krijgt daarom de volle inktkleur, met het accent op "meer omzet". */
.intro { max-width: 46ch; color: var(--ink-soft); font-size: 19px; line-height: 1.6; margin-bottom: 0; }
.intro strong { color: var(--ink); font-weight: 600; }
.intro em { font-style: normal; font-weight: 600; color: var(--clay); }
.hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.hero-figure { margin: 0; }
.hero-figure img { width: 100%; height: auto; }

/* Vertrouwensbalk */
.trust { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--sand); }
.trust-inner { display: flex; align-items: center; gap: 40px; padding: 20px 0; flex-wrap: wrap; }
.trust-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0; flex: 0 0 auto; }
.trust-items { display: flex; gap: 30px; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.trust-items li { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink); }
.trust-items li span { color: var(--ink-faint); font-weight: 400; font-family: var(--sans); font-size: 15px; }

/* ============================================================
   Sectiekoppen
   ============================================================ */
.section-heading { margin-bottom: 44px; max-width: 740px; }
.section-heading h2 {
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
  margin: 0 0 16px;
}
.section-sub { color: var(--ink-soft); font-size: 18.5px; line-height: 1.6; margin: 0; max-width: 60ch; }

/* ============================================================
   TWEE SPOREN
   ============================================================ */
.tracks { padding: 88px 0 92px; }
.track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.track {
  border: 2px solid var(--ink);
  border-radius: var(--r-panel);
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.track-illu { border-bottom: 2px solid var(--ink); }
.track-illu img { width: 100%; height: auto; display: block; }
.track-body { padding: 30px 32px; display: flex; flex-direction: column; flex: 1; }
.track-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.track-a .track-tag { background: var(--gold); }
.track-b .track-tag { background: var(--sky); }
.track-c .track-tag { background: var(--clay); }
.track h3 { font-size: 30px; font-weight: 700; margin: 0 0 6px; }
.track-for { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); margin: 0 0 16px; }
.track-body > p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; margin: 0 0 20px; }
.track-list { list-style: none; padding: 0; margin: 0 0 24px; }
.track-list li { padding: 9px 0 9px 26px; border-top: 1px solid var(--line-soft); font-size: 15.5px; position: relative; }
.track-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--gold);
}
.track-b .track-list li::before { background: var(--sky); }
.track-c .track-list li::before { background: var(--clay); }
.track-c { grid-column: 1 / -1; }
.track-c .track-illu img { max-height: 340px; width: 100%; object-fit: cover; }
.track-foot { margin: auto 0 0; padding-top: 18px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.track-price { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }
.track-price b { font-size: 20px; font-weight: 800; }

/* ============================================================
   TWEE RENDEMENTEN
   ============================================================ */
.returns { background: var(--sand); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 84px 0 88px; }
.returns-grid { display: grid; grid-template-columns: 1fr 1.18fr; gap: 28px; align-items: stretch; }
.return-card { border: 2px solid var(--ink); border-radius: var(--r-panel); padding: 32px; display: flex; flex-direction: column; background: var(--white); }
.return-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
.return-card h3 { font-size: 28px; font-weight: 700; margin: 0 0 12px; }
.return-card > p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.58; margin-bottom: 20px; }
.return-list { list-style: none; padding: 0; margin: 0 0 22px; }
.return-list li { padding: 9px 0 9px 26px; border-top: 1px solid var(--line-soft); font-size: 15.5px; position: relative; }
.return-list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sky); }
.return-foot { margin: auto 0 0; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); padding-top: 16px; border-top: 1px solid var(--line); }
.return-offensive { background: var(--gold); }
.return-offensive .return-list li::before { background: var(--white); }
.return-offensive .return-list li { border-top-color: rgba(20, 17, 15, .16); }
.return-offensive .return-foot { border-top-color: rgba(20, 17, 15, .22); color: #6b5622; }
.return-offensive .return-label { color: #6b5622; }
.return-offensive > p { color: #4a3c17; }

/* ============================================================
   MECHANISME-DIAGRAM
   ============================================================ */
.diagram { padding: 84px 0; }
.diagram-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 60px; align-items: center; }
.diagram figure { margin: 0; }
/* Zonder height:auto neemt de browser het height-attribuut letterlijk en
   krijgt de SVG een te hoog kader met witruimte erboven en eronder. */
.diagram figure img { width: 100%; height: auto; border: 2px solid var(--ink); border-radius: var(--r-panel); }

/* ============================================================
   STE
   ============================================================ */
.ste { background: var(--mist); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 84px 0; }
.ste-layers { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.ste-layers li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 24px;
  align-items: start;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r-panel);
  padding: 24px 28px;
}
.ste-index {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--gold);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}
.ste-layers h3 { font-size: 23px; font-weight: 700; margin: 0 0 3px; }
.ste-who { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin: 0 0 10px; }
.ste-layers p:last-child { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; margin: 0; max-width: 66ch; }

/* ============================================================
   MAANDRITME
   ============================================================ */
.rhythm { padding: 84px 0; }
.rhythm-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rhythm-week { border: 2px solid var(--ink); border-radius: var(--r-panel); padding: 24px 22px 26px; background: var(--white); }
.rhythm-week:nth-child(2) { background: var(--sand-soft); }
.rhythm-week:nth-child(3) { background: var(--mist); }
.rhythm-week:nth-child(4) { background: var(--sand); }
.rhythm-num { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
.rhythm-week h3 { font-size: 20px; font-weight: 700; margin: 0 0 9px; line-height: 1.15; }
.rhythm-week p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; }

/* ============================================================
   TARIEVEN
   ============================================================ */
.prices { background: var(--sand); border-top: 2px solid var(--ink); padding: 86px 0; }
.price-block { background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-panel); padding: 32px 34px; }
.price-block + .price-block { margin-top: 24px; }
.price-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); flex-wrap: wrap; }
.price-block-head h3 { font-size: 28px; font-weight: 700; margin: 0; }
.price-block-head p { margin: 0; color: var(--ink-faint); font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }
.price-rows { list-style: none; padding: 0; margin: 0; }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.price-row:first-child { border-top: 0; padding-top: 4px; }
.price-row-name { margin: 0; font-family: var(--display); font-weight: 600; font-size: 18px; }
.price-row-desc { margin: 5px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; max-width: 62ch; }
.price-amount { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }
.price-amount span { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); font-weight: 400; margin-top: 3px; letter-spacing: .04em; }
.prices-note { margin: 26px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 82ch; }
/* Een link in lopende tekst is geen .text-link: die is inline-flex en breekt de
   regel. In een alinea volstaat een gouden onderlijn. */
.prices-note a, .cv-note a { color: var(--ink); border-bottom: 2px solid var(--gold); transition: color .2s, border-color .2s; }
.prices-note a:hover, .cv-note a:hover { color: var(--teal); border-color: var(--ink); }

/* ============================================================
   VERWIJZING NAAR WERK
   ============================================================ */
.work-teaser { padding: 84px 0; }
.work-teaser-inner {
  border: 2px solid var(--ink);
  border-radius: var(--r-panel);
  background: var(--mist);
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1.1fr auto;
  gap: 40px;
  align-items: center;
}
.work-teaser h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.04em; line-height: 1.06; margin: 0 0 12px; }
.work-teaser-inner p { color: var(--ink-soft); font-size: 17.5px; line-height: 1.55; margin: 0; max-width: 56ch; }

/* Uitgelichte toepassingen. Bewust geen kaartengrid met icoontjes maar een
   tabelvorm: drie kolommen die je van links naar rechts leest, wat het doet,
   hoe groot het is en wat het oplevert. */
.build-block { margin-top: 26px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-panel); padding: 28px 34px 32px; }
.build-head, .build-row { display: grid; grid-template-columns: 1fr 230px 260px; gap: 28px; }
.build-head { padding-bottom: 13px; border-bottom: 2px solid var(--ink); }
.build-head p { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.build-rows { list-style: none; padding: 0; margin: 0; }
.build-row { padding: 18px 0; border-top: 1px solid var(--line-soft); align-items: start; }
.build-row:first-child { border-top: 0; }
.build-name { margin: 0 0 5px; font-family: var(--display); font-weight: 600; font-size: 18px; }
.build-what { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; max-width: 58ch; }
.build-stat { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.build-gain { color: var(--ink); font-weight: 500; }
/* Op desktop staan de kolomnamen boven de tabel; gestapeld op mobiel is die
   kop weg en heeft elke waarde zijn eigen label nodig. */
.build-lab { display: none; }

/* Hetzelfde witte paneel wordt op de dienstpagina's gebruikt voor een losse
   opsomming ("wat je krijgt", "wanneer dit niet past"). Zo'n paneel staat tussen
   twee gekleurde banden in en heeft dus eigen ruimte nodig: zonder .panel-sectie
   raakt de rand van het paneel de zwarte lijn van de band eronder. */
.panel-sectie { padding: 46px 0 60px; }
.panel-sectie .build-block { margin-top: 0; }
.panel-heading { font-size: 25px; font-weight: 700; letter-spacing: -.035em; margin: 0 0 14px; }
.build-block-warn { background: var(--sand-soft); }
.build-block-warn .cv-list li::before { background: var(--clay); }

/* ============================================================
   DIAGRAM IN EEN GEKLEURDE BAAN
   Op /ai-inventarisatie/ staat een zelfgemaakt diagram in de
   mist-gekleurde .ste-baan. Het kader met padding houdt het beeld
   los van de zwarte lijnen van de baan, en height:auto voorkomt
   dat de browser het height-attribuut letterlijk neemt (zie de
   valkuilen in CLAUDE.md §2c).
   ============================================================ */
.diagram-wrap { margin: 8px 0 0; padding: 30px 30px 26px; border: 2px solid var(--ink); border-radius: var(--r-panel); background: var(--white); }
.diagram-wrap img { width: 100%; height: auto; display: block; }
.diagram-caption { font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 78ch; margin: 22px 0 0; }

/* ============================================================
   TEAM

   Geen kaarten met een fotolijst: de uitgeknipte portretten staan
   op een schijf en steken er bovenuit, en de zwarte lijn eronder is
   dezelfde lijn waar de naam op staat. Zo staan we in de pagina in
   plaats van erin geplakt.
   ============================================================ */
.team { background: var(--sand); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 84px 0; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.person { display: flex; flex-direction: column; }
.person + .person { border-left: 2px solid var(--ink); padding-left: 48px; }
.person-head { display: flex; align-items: flex-end; gap: 22px; border-bottom: 2px solid var(--ink); margin-bottom: 22px; }
.person-portret {
  position: relative;
  flex: 0 0 auto;
  width: 158px;
  height: 152px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.person-portret::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--mist);
  border: 2px solid var(--ink);
}
/* Het portret is even breed als zijn container, dus links en rechts wordt er
   niets afgesneden; de schouders lopen buiten de schijf en de onderkant van
   de foto valt samen met de zwarte lijn eronder. */
.person-portret img { position: relative; width: 158px; height: auto; }
.person-head h3 { font-size: 27px; font-weight: 700; margin: 0 0 3px; line-height: 1.1; }
.person-role { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); margin: 0 0 14px; }
.person-bio { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; margin: 0 0 20px; }
.person-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 24px; }
.person-facts li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--white);
}
/* Op de homepage staat alleen een teaser: portret, naam en twee regels. De
   volledige tekst met kerngegevens en cv-links staat op /team/. */
.team-grid-kort .person-bio { margin-bottom: 0; }
.team-actie { margin-top: 36px; padding-top: 30px; border-top: 2px solid var(--ink); }
.person-links { margin: auto 0 0; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.person-linkedin {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.person-linkedin:hover { color: var(--teal); border-color: var(--teal); }

/* ============================================================
   CV-PAGINA (/team/<naam>/)
   ============================================================ */
/* Geen padding onderaan: het portret is onderin bijgesneden en moet precies
   op de zwarte lijn staan. De tekstkolom houdt zijn eigen ruimte. */
.cv-head { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: end; border-bottom: 2px solid var(--ink); margin-bottom: 40px; }
.cv-head > div:last-child { padding-bottom: 26px; }
.cv-head .person-portret { width: 210px; height: 202px; }
.cv-head .person-portret::before { width: 170px; height: 170px; }
.cv-head .person-portret img { width: 210px; }
.cv-head h1 { max-width: none; font-size: clamp(34px, 5vw, 54px); margin-bottom: 8px; }
.cv-lead { color: var(--ink-soft); font-size: 18.5px; line-height: 1.58; margin: 14px 0 0; max-width: 60ch; }
.cv-meta { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin-top: 20px; }

.cv-section { margin-bottom: 52px; }
.cv-section > h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.04em; margin: 0 0 22px; }
.cv-entry { display: grid; grid-template-columns: 190px 1fr; gap: 28px; padding: 22px 0; border-top: 1px solid var(--line); }
.cv-entry:first-of-type { border-top: 2px solid var(--ink); }
.cv-period { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-faint); margin: 0; }
.cv-entry h3 { font-size: 21px; font-weight: 700; margin: 0 0 3px; line-height: 1.2; }
.cv-org { font-family: var(--mono); font-size: 12.5px; color: var(--teal); margin: 0 0 10px; }
.cv-entry > div > p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin: 0 0 12px; max-width: 68ch; }
.cv-list { list-style: none; padding: 0; margin: 0; }
.cv-list li { position: relative; padding: 6px 0 6px 24px; font-size: 15.5px; line-height: 1.55; max-width: 68ch; }
.cv-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--gold); }
.cv-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.cv-tags li {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  padding: 6px 13px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--white);
}
.cv-note { color: var(--ink-faint); font-size: 14.5px; line-height: 1.6; max-width: 70ch; margin: 0; }
.build-block .cv-note { margin-top: 18px; }

/* ============================================================
   SLOT
   ============================================================ */
.closing { padding: 84px 0 92px; }
.closing-inner {
  border: 2px solid var(--ink);
  border-radius: var(--r-panel);
  background: var(--gold);
  padding: 52px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
}
.closing-content h2 { max-width: 20ch; font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; margin-bottom: 10px; }
.closing-content > p:last-child { color: #4a3c17; margin-bottom: 0; max-width: 50ch; font-size: 17.5px; }
.closing .button { flex: 0 0 auto; background: var(--ink); color: var(--cream); }
.closing .button:hover { background: #000; }

footer { border-top: 2px solid var(--ink); background: var(--cream); }
.footer-inner { min-height: 108px; display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 25px; color: var(--ink-faint); font-size: 13px; }
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-brand img { width: 38px; height: 28px; object-fit: contain; }
.footer-brand .brand-word { font-size: 20px; }
.footer-inner p { margin: 0; }

/* Privacy page */
.privacy-body { max-width: 680px; padding: 0 0 48px; }
.privacy-body h2 { font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.02em; margin: 36px 0 12px; }
.privacy-body h2:first-child { margin-top: 0; }
.privacy-body p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
.privacy-updated { font-size: 14px; color: var(--ink-faint); margin-top: 32px; }
.footer-inner a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-inner a:hover { color: var(--ink); }

.reveal, .reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .track-grid, .returns-grid { grid-template-columns: 1fr; }
  .diagram-grid { grid-template-columns: 1fr; gap: 32px; }
  .rhythm-track { grid-template-columns: 1fr 1fr; }
  .work-teaser-inner { grid-template-columns: 1fr; gap: 26px; }
  .build-head { display: none; }
  .build-row { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .build-lab { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
  .team-grid { grid-template-columns: 1fr; gap: 40px; }
  .person + .person { border-left: 0; padding-left: 0; border-top: 2px solid var(--ink); padding-top: 40px; }
  .cv-entry { grid-template-columns: 160px 1fr; gap: 22px; }

  /* Het menu klapt hier al in, niet pas op 760px: met zes items past de balk
     op laptopbreedte niet meer naast het logo en de knop. `top: 100%` in
     plaats van een vaste hoogte, want de kop is boven 760px hoger. */
  .menu-toggle { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink); font: 600 14px var(--display); padding: 10px 0; }
  .menu-toggle span, .menu-toggle::before { content: ''; display: block; width: 16px; height: 2px; background: var(--ink); }
  nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 20px; background: var(--cream); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); flex-direction: column; align-items: stretch; gap: 16px; }
  nav.is-open { display: flex; }
  .nav-cta { text-align: center; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .nav-cta { transition: none; }
  .button:hover, .nav-cta:hover { transform: none; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 36px, 620px); }
  .nav { height: 68px; }
  .brand img { width: 42px; height: 31px; }
  .brand-word { font-size: 23px; }
  /* De uitklapregels zelf staan in de 1080px-query hierboven. */

  .hero { padding: 30px 0 52px; }
  h1 { font-size: clamp(30px, 7.8vw, 42px); max-width: none; margin-bottom: 14px; }
  .intro { font-size: 17.5px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .button { width: 100%; justify-content: center; }

  .trust-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .trust-items { gap: 14px; flex-direction: column; }

  .tracks, .returns, .diagram, .ste, .rhythm, .prices, .work-teaser, .team, .closing { padding: 56px 0; }

  .person-head { gap: 16px; }
  .person-portret { width: 132px; height: 128px; }
  .person-portret::before { width: 108px; height: 108px; }
  .person-portret img { width: 132px; }
  .person-head h3 { font-size: 22px; }
  .person-role { font-size: 11.5px; }
  .cv-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  /* Gestapeld staat het portret niet meer op de lijn onder de kop, dus krijgt
     het er zelf een: anders lijkt de foto willekeurig afgesneden. */
  .cv-head .person-portret { width: 168px; height: 162px; border-bottom: 2px solid var(--ink); }
  .cv-head .person-portret::before { width: 136px; height: 136px; }
  .cv-head .person-portret img { width: 168px; }
  .cv-entry { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .cv-section { margin-bottom: 40px; }
  .track-body, .return-card, .price-block { padding: 24px 22px; }
  .section-heading { margin-bottom: 32px; }

  .ste-layers li { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  .rhythm-track { grid-template-columns: 1fr; }

  .price-row { grid-template-columns: 1fr; gap: 8px; }
  .price-amount { text-align: left; }
  .price-amount span { display: inline; margin-left: 8px; }

  .work-teaser-inner, .closing-inner { padding: 30px 24px; }
  .closing .button { width: 100%; justify-content: center; }
  .footer-inner { min-height: 140px; padding: 26px 0; grid-template-columns: 1fr; gap: 12px; }
}