@charset "UTF-8";

/* ------------------------------------------------------------ lettertypes */
/* Zelf gehost in plaats van via Google Fonts: zo gaat er geen IP-adres van
   een bezoeker naar Google, en klopt de zin in de disclaimer dat er geen
   gegevens bij derden terechtkomen. Alleen het Latijnse schrift; dat dekt
   Nederlands en Engels volledig, inclusief trema's en krulaanhalingstekens.
   Licenties: Archivo en IBM Plex Mono onder de SIL Open Font License,
   Ubuntu onder de Ubuntu Font Licence; beide staan zelf hosten toe. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ubuntu-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ubuntu-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ubuntu-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Rake assessment development — zie design.md
   VARIANCE 8 / MOTION 7 / DENSITY 3 */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink:         oklch(18% 0.004 250);
  --slate:       oklch(48% 0.008 245);
  --slate-soft:  oklch(51% 0.008 245);
  --paper:       oklch(99.2% 0.002 250);
  --surface:     oklch(96.3% 0.003 245);
  --line:        oklch(89% 0.004 245);
  --signal:      oklch(49.7% 0.188 27.5);
  --signal-deep: oklch(42% 0.150 26);
  --night:       oklch(14% 0.004 250);
  --night-line:  oklch(26% 0.004 250);

  --display: "Archivo", system-ui, sans-serif;
  --body:    "Ubuntu", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 60px);
  --section: clamp(64px, 10vw, 150px);
  --nav-h: 76px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  font-stretch: 106%;
}

p { margin: 0 0 1.1em; max-width: 62ch; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-deep); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }

/* Eén hoekradius-systeem voor de hele pagina: alles scherp. */

/* ------------------------------------------------- het motief: lichtbundel */
/* Een haarlijn die grijs is, met één kort rood segment: het belichte stuk.
   Drie taken, niet meer: .beam (hero), .beam-eyebrow (label) en dezelfde
   lijn als aanwijzer onder nav- en dienstenlinks. Zie design.md §3. */
.beam {
  position: relative;
  height: 1px;
  background: var(--line);
  transform-origin: left;
}
.beam::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 64px;
  background: var(--signal);
}

/* Maximaal één label per drie secties; zie design.md §6. */
.beam-eyebrow {
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 22px;
}

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
}
.brand { display: inline-flex; align-items: center; }
.brand img { width: 146px; height: auto; }

.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-list a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: var(--signal); }

.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--slate-soft);
  padding-left: clamp(14px, 1.8vw, 24px);
  border-left: 1px solid var(--line);
}
.lang a { color: var(--slate-soft); text-decoration: none; }
.lang a:hover { color: var(--ink); }
.lang [aria-current] { color: var(--ink); font-weight: 500; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1px;
  margin: 4px auto;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */
/* De foto ligt als horizon onderin het eerste scherm: de vuurtoren staat
   waar hij hoort te staan, en het beeld wordt nergens opgeblazen. */
/* Geen vastgezette schermhoogte. Die dwong de hero tot het volle venster en
   alle overtollige ruimte viel als één gat boven de tekst: op een hoog venster
   was dat 640 px wit. De inhoud bepaalt nu de hoogte (553 tot 785 px), en op
   een gewoon desktopvenster landt de horizon vanzelf vlak bij de vouw. */
.hero { padding-top: clamp(28px, 3.6vw, 52px); }
.hero-inner {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(30px, 4vw, 56px);
}

.hero h1 {
  /* Zelfde maat als de kop op de binnenpagina's (klant, 16 oktober 2026). */
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: -0.02em;
  max-width: 26ch;
  margin-bottom: 30px;
}
.hero h1 .w { display: inline-block; }

.hero-lead {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 44ch;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--signal);
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .12s var(--ease);
}
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: var(--signal-deep); border-color: var(--signal-deep); color: #fff; }
.btn-ghost { background: none; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform .22s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.hero-horizon { margin: 0; width: 100%; overflow: hidden; }
/* De foto's zijn 1400 x 196. Met een vaste hoogte werd de bovenkant afgesneden
   zodra het venster breder was dan die hoogte toeliet (de lantaarn van
   vuurtoren 3 viel er half af). Nu volgt de hoogte de verhouding van de foto;
   alleen op smalle schermen geldt een minimum, en dan valt er links en rechts
   iets weg, gecentreerd op de vuurtoren via --fx. */
.hero-horizon img,
.band img {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 196;
  min-height: 120px;
  object-fit: cover;
  object-position: var(--fx, 50%) center;
}

/* --------------------------------------------------------- beeldmerk-vlak */
/* Eén uitspraak over de volle breedte. De zin is de compositie. */
.statement { padding-block: var(--section); }
.statement blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.14;
  letter-spacing: -0.024em;
  color: var(--ink);
  max-width: 28ch;
}
/* Home: twee kolommen op één raster. Links de inleiding, rechts de uitspraak met
   de toelichting eronder; beide beginnen op dezelfde haarlijn. Eerdere versies
   zetten drie blokken op drie verschillende plekken, of alles links met de
   rechterhelft leeg. */
.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.statement-intro,
.statement-main {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 36px);
}
/* het rode begin alleen boven de uitspraak: daar valt het licht */
.statement-main::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 64px; height: 1px;
  background: var(--signal);
}
.statement-intro p {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink);
}
.statement-grid blockquote {
  font-size: clamp(19px, 1.85vw, 25px);
  max-width: 24ch;
}
.statement-grid .after { margin-top: clamp(20px, 2.4vw, 32px); max-width: 52ch; }
.statement .after { margin-top: clamp(24px, 3vw, 40px); max-width: 58ch; }
.statement .after p { font-size: 18px; }

/* -------------------------------------------------------------- diensten */
/* Plakkende linkerkolom: de twee diensten zijn varianten van één aanbod,
   dus de kop blijft staan terwijl ze langskomen. */
.section { padding-block: var(--section); }
.section-surface { background: var(--surface); border-block: 1px solid var(--line); }

.split-sticky {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 104px);
  align-items: start;
}
.split-sticky .aside { position: sticky; top: calc(var(--nav-h) + 40px); }
.split-sticky h2 {
  font-size: clamp(21px, 2vw, 27px);
  max-width: 16ch;
  margin-bottom: 22px;
}

.service {
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(32px, 4vw, 56px);
  position: relative;
}
.service::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 64px; height: 1px;
  background: var(--signal);
}
.service:last-child { margin-bottom: 0; }
.service h3 { font-size: clamp(18px, 1.5vw, 21px); margin-bottom: 16px; }
.service > p { color: var(--slate); max-width: 56ch; }

.service-links {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}
.service-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s var(--ease);
}
/* De breedte staat vast en het streepje groeit via scaleX; met een echte
   width-transitie verschoof de tekst van de link bij hover. */
.service-links a::before {
  content: "";
  width: 20px; height: 1px; flex: none;
  background: var(--line);
  transform: translateY(-4px) scaleX(0.7);
  transform-origin: left center;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.service-links a:hover { color: var(--signal); }
.service-links a:hover::before { background: var(--signal); transform: translateY(-4px) scaleX(1); }

/* -------------------------------------------------------------- beeldband */
.band { width: 100%; margin: 0; overflow: hidden; background: var(--surface); }
.band img { min-height: 140px; }

/* ------------------------------------------------------- binnenpagina-kop */
.page-head { padding-block: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 52px); }
.page-head h1 {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: -0.028em;
  max-width: 20ch;
  margin-bottom: 26px;
}
.page-head .beam { margin-bottom: clamp(26px, 3.6vw, 44px); }
.page-head .lede { margin-top: 0; }

/* ----------------------------------------------------------- lopende tekst */
.prose > p { max-width: 62ch; }
.prose > p + p { margin-top: 0; }

/* Een onderwerp onder een haarlijn met rood begin: hetzelfde motief als
   .service, maar zonder de kolomindeling eromheen. */
.topic {
  border-top: 1px solid var(--line);
  padding-top: clamp(22px, 2.8vw, 36px);
  margin-top: clamp(32px, 4vw, 56px);
  position: relative;
}
.topic::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 64px; height: 1px;
  background: var(--signal);
}
.topic h2 { font-size: clamp(17px, 1.4vw, 20px); margin-bottom: 16px; }
.topic h3 { font-size: clamp(17px, 1.3vw, 18px); margin-bottom: 12px; }

.topic-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(14px, 4vw, 72px);
  align-items: start;
}
.topic-split h2 { margin-bottom: 0; }
.topic-split > div > p { max-width: 58ch; }

.legal-updated {
  margin-top: clamp(36px, 4vw, 56px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate-soft);
}
.topic a { color: var(--signal); }

/* --------------------------------------------------------------- opsomming */
.bullets { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.bullets li {
  position: relative;
  padding-left: 32px;
  max-width: 62ch;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 18px; height: 1px;
  background: var(--signal);
}

/* ------------------------------------------------------- binnenpagina-hero */
/* Dezelfde opbouw als de home: haarlijn, kop, inleiding en de eigen vuurtoren
   van de pagina als horizon direct eronder. Iets kleinere kop. */
.hero--page h1 {
  font-size: clamp(24px, 2.6vw, 36px);
  max-width: 26ch;
  margin-bottom: 24px;
}
.hero--page .hero-lead { max-width: 50ch; }
.topic-first { margin-top: 0; }

/* ------------------------------------------------------------------ kaarten */
/* Voor losse, gelijkwaardige onderdelen: de twee soorten assessment en de vijf
   assessmentonderdelen. Rood streepje linksboven, het motief. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Vijf onderdelen in drie kolommen laat een gat; het gesprek is volgens de
   tekst de basis van ieder assessment en mag daarom twee kolommen breed. */
.cards .wide { grid-column: span 2; }
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 40px);
}
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 64px; height: 2px;
  background: var(--signal);
}
.card h3 {
  font-size: clamp(17px, 1.4vw, 19px);
  margin-bottom: 14px;
  /* vangnet voor lange samenstellingen; de bekende staan al met een zacht
     afbreekstreepje in de tekst */
  overflow-wrap: break-word;
}
.cards--3 .card h3 { font-size: clamp(17px, 1.3vw, 18px); }
.card p { max-width: 58ch; }
.card .wide p, .card.wide p { max-width: 62ch; }

/* ------------------------------------------------------------- coachvragen */
/* De vragen zelf zijn de inhoud: groot gezet, elk in een eigen vak. */
.questions {
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.questions li {
  position: relative;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(26px, 3.2vw, 44px);
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 108%;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.questions li::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 36px; height: 2px;
  background: var(--signal);
}

/* ---------------------------------------------------------- opdrachtgevers */
/* Dertien logo's in een raster van drie. Grijs en iets terug, in eigen kleur
   bij hover of focus: zo vechten oranje, roze en geel niet met het ene rode
   accent van de site. Wit aangeleverde logo's (Beacon, JCDecaux, de tekst van
   Heilig) zijn vooraf naar inkt omgekleurd, anders bleven ze bij hover wit op wit. */
.client-grid {
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
/* Randen op de items zelf: dertien vult geen raster van drie, en met randen op
   de container blijven er twee lege grijze vakjes achter. */
.client-grid li {
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.client-grid a {
  display: grid;
  place-items: center;
  min-height: clamp(96px, 9vw, 128px);
  padding: 20px clamp(16px, 2vw, 28px);
  transition: background-color .25s var(--ease);
}
.client-grid img {
  /* hoogte per logo via --h, zodat brede en hoge logo's even zwaar wegen */
  height: var(--h, 40px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* Eén tint voor alle logo's. Gewone grijswaarden lieten lichte kleuren (het
     roze en oranje van Vonk, het geel van Heilig, het rode wapen van Utrecht)
     bijna wegvallen terwijl donkere logo's zwaar bleven; als silhouet wegen ze
     allemaal even zwaar. */
  filter: brightness(0);
  opacity: .6;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.client-grid img.keep-detail { filter: grayscale(1) contrast(1.15); opacity: .8; }
.client-grid a:hover,
.client-grid a:focus-visible { background: var(--surface); }
.client-grid a:hover img,
.client-grid a:focus-visible img { filter: none; opacity: 1; }
.section-surface .client-grid li { background: var(--surface); }
.section-surface .client-grid a:hover,
.section-surface .client-grid a:focus-visible { background: var(--paper); }

.lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--ink);
  max-width: 44ch;
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.018em;
}
.section > .wrap > h2 { font-size: clamp(21px, 2vw, 27px); max-width: 22ch; }

/* ---------------------------------------------------------------- portret */
.person {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.person figure { margin: 0; }
/* Het origineel is 302 x 314 px; verder oprekken maakt het gezicht zichtbaar
   zacht, dus nooit breder dan 300px. */
.person img {
  width: 100%;
  max-width: 300px;
  filter: grayscale(1) contrast(1.05);
  background: var(--surface);
}
.person figcaption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--slate-soft);
  margin-top: 14px;
}
.person h2 { font-size: clamp(21px, 2vw, 27px); max-width: 17ch; margin-bottom: 24px; }

/* ------------------------------------------------------- contactpagina */
.address {
  font-style: normal;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 106%;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 22px;
}
.contact-lines { margin: 0; display: grid; gap: 14px; }
.contact-lines > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; align-items: baseline; }
.contact-lines dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft);
}
.contact-lines dd { margin: 0; font-size: 18px; }
.contact-lines a { color: var(--ink); text-decoration-color: var(--line); }
.contact-lines a:hover { color: var(--signal); text-decoration-color: var(--signal); }

/* ------------------------------------------------- Over Michiel: twee kolommen */
/* Vier korte alinea's in twee tekstkolommen, zodat de rechterhelft niet leeg blijft. */
.prose--cols { columns: 2; column-gap: clamp(32px, 5vw, 80px); }
.prose--cols p { max-width: none; break-inside: avoid; }
.person .person-title { font-family: var(--body); font-size: 15px; letter-spacing: 0; line-height: 1.45; color: var(--slate); }
.person .person-title strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 106%;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 2px;
}

/* ----------------------------------------------------------------- footer */
/* Drie kolommen naar het voorbeeld van deboersearch.nl/over: het NIP-logo, een
   lijst contactgegevens met icoontjes, en sociale media met de naam. Daaronder een
   smalle balk. Het Rake-logo staat al in de header. */
.site-footer {
  background: var(--night);
  border-top: 1px solid var(--night-line);
  color: oklch(78% 0.004 250);
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-block: clamp(48px, 6vw, 80px);
}
.footer-brand .footer-nip img { width: 128px; height: auto; }

.footer-list,
.footer-social { list-style: none; margin: 0; padding: 0; }
.footer-list { display: grid; gap: 12px; }
.footer-list a,
.footer-list span,
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: oklch(84% 0.004 250);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer-list a:hover,
.footer-list a:focus-visible,
.footer-social a:hover,
.footer-social a:focus-visible { color: #fff; }
.site-footer .ico {
  width: 18px; height: 18px; flex: none;
  color: oklch(64% 0.004 250);
  transition: color .2s var(--ease);
}
.footer-list a:hover .ico,
.footer-list a:focus-visible .ico,
.footer-social a:hover .ico,
.footer-social a:focus-visible .ico { color: var(--signal); }

.footer-social { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 22px; }
.footer-social .ico { width: 22px; height: 22px; }
.footer-name {
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: -0.01em;
  margin: 0;
}
.footer-nip { display: inline-block; opacity: .88; transition: opacity .2s var(--ease); }
.footer-nip:hover,
.footer-nip:focus-visible { opacity: 1; }

.footer-bottom {
  border-top: 1px solid var(--night-line);
  padding-block: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: oklch(66% 0.004 250);
}

/* ----------------------------------------------------------------- motion */
/* Elke beweging heeft één reden. Laadmoment: de zin komt op leesvolgorde
   binnen (hiërarchie) en het licht strijkt over de horizon (het motief).
   Bij scrollen komt elke sectie één keer binnen (volgorde).
   opacity: 0 komt uitsluitend van .js, die in de <head> wordt gezet, dus
   zonder JS of onder reduced-motion staat er nooit iets onzichtbaar. */
.js .reveal > * { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.js .reveal.is-in > *:nth-child(2) { transition-delay: .07s; }
.js .reveal.is-in > *:nth-child(3) { transition-delay: .14s; }
.js .reveal.is-in > *:nth-child(4) { transition-delay: .21s; }

.js .reveal-self { opacity: 0; transform: translateY(16px); }
.js .reveal-self.is-in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}

.js .hero h1 .w { opacity: 0; transform: translateY(0.4em); }
.js .hero.is-in h1 .w {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms + 120ms);
}
.js .hero .beam { transform: scaleX(0); }
.js .hero.is-in .beam { transform: scaleX(1); transition: transform 1s var(--ease-out); }

/* Het licht strijkt over de horizon. Eén keer, bij binnenkomst. */
.js .hero-horizon img { clip-path: inset(0 100% 0 0); }
.js .hero.is-in .hero-horizon img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.25s var(--ease-out) .35s;
}

.js .hero .hero-lead,
.js .hero .actions,
.js .hero .beam-eyebrow { opacity: 0; transform: translateY(14px); }
.js .hero.is-in .beam-eyebrow {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out) .1s, transform .6s var(--ease-out) .1s;
}
.js .hero.is-in .hero-lead {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out) .42s, transform .7s var(--ease-out) .42s;
}
.js .hero.is-in .actions {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out) .52s, transform .7s var(--ease-out) .52s;
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal > *, .js .reveal-self, .js .hero h1 .w, .js .hero .beam,
  .js .hero .hero-lead, .js .hero .actions, .js .hero .beam-eyebrow {
    opacity: 1; transform: none; transition: none;
  }
  .js .hero-horizon img { clip-path: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .split-sticky,
  .person { grid-template-columns: minmax(0, 1fr); }
  .split-sticky .aside { position: static; }
  .topic-split { grid-template-columns: minmax(0, 1fr); }
  .statement-grid { grid-template-columns: minmax(0, 1fr); }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person img { max-width: 320px; }
}

@media (max-width: 860px) {
  .prose--cols { columns: 1; }
  .cards,
  .cards--3,
  .questions { grid-template-columns: minmax(0, 1fr); }
  .cards .wide { grid-column: auto; }
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-block: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-list a { display: block; padding: 14px 0; font-size: 15px; }
  .nav-list a::after { display: none; }
  .lang { border-left: 0; padding-left: 0; padding-top: 16px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Nederlandse samenstellingen zoals 'ontwikkelbehoeften' passen op een smal
   scherm niet op een regel. Afbreking staat daarom alleen daar aan, niet op
   maten waar de kop gewoon past. */
@media (max-width: 430px) {
  h1, h2, h3 {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  /* De woorden van de paginakop staan voor de inloopanimatie elk in een eigen
     inline-block, en daarbinnen breekt de browser niet af. Op smalle schermen
     worden het gewone woorden; de animatie houdt dan alleen het invagen. */
  .hero h1 .w { display: inline; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .service-links,
  .client-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-lines > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
}