/* ==========================================================================
   clean. clear. visuals. — stylesheet
   v2 — overgang van het eerste, donkere verkenningsontwerp naar het
   merksysteem uit "Clean and Clear Visuals Design System def.pdf" (merkboek
   2.0, richting C: de punt en het ritme). Licht papier als basis (bewuste
   merkkeuze, geen prefers-color-scheme-omschakeling), amber uitsluitend als
   punt/label/knop, alles rechthoekig behalve het profielteken "c.". Eén
   inkt-vlak als afsluiting onderaan, precies zoals het merkboek §08
   voorschrijft voor een video-afsluiting.
   ========================================================================== */

@font-face {
  font-family: "Archivo Variable";
  src: url("../fonts/Archivo-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next Variable";
  src: url("../fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/AtkinsonHyperlegibleMono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ── merkkleuren, exact uit het merkboek §04 ── */
  --inkt: #141414;
  --inkt-80: #2b2a28;
  --grafiet: #4a4844;
  --kiezel: #8a867e;
  --mist: #b8b3a8;
  --steen: #d9d4c8;
  --papier: #eeebe3;
  --wit: #faf8f3;
  --punt: #e3a21a;
  --punt-licht: #f2b632;
  --punt-tekst: #7a4f00;

  /* ── rollen ── */
  --bg: var(--papier);
  --bg-alt: var(--wit);
  --bg-tint: var(--steen);
  --ink: var(--inkt);
  --ink-soft: var(--grafiet);
  --ink-faint: var(--kiezel);
  --line: rgba(20, 20, 20, 0.14);
  --line-strong: rgba(20, 20, 20, 0.26);
  --op-tekst-op-punt: var(--inkt);

  --font-display: "Archivo Variable", Impact, "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --tel: 600ms; /* de "tel" uit het merkboek: het basisritme van de montage */

  --header-h: 72px;
  --wrap: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);

  --raakvlak-min: 44px;
}

/* ── basis ─────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variation-settings: "wght" 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 3px;
}
.knop:focus-visible,
.knop-punt:focus-visible {
  outline-color: var(--inkt);
}

::selection { background: var(--punt); color: var(--inkt); }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 60;
  padding: 0.6rem 1rem;
  background: var(--inkt);
  color: var(--wit);
  text-decoration: none;
  transition: top 160ms var(--ease-out);
}
.skip-link:focus { top: 0.75rem; }

#top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }

/* ── het teken: "c." (merkboek §03) — de enige cirkel in het systeem ───── */

.c-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--inkt);
  position: relative;
}
.c-mark::before {
  content: "c";
  color: var(--papier);
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 72;
  font-size: 1.05rem;
  line-height: 1;
  transform: translateY(-0.02em);
}
.c-mark::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: 20%;
  width: 0.25rem;
  height: 0.25rem;
  background: var(--punt);
}

/* ── het woordmerk: "clean. clear. visuals." (merkboek §02) ─────────────── */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 72;
  letter-spacing: -0.025em;
  color: var(--inkt);
  line-height: 1;
  white-space: nowrap;
}
.wordmark span { position: relative; }
.wordmark span::after {
  content: ".";
  color: var(--punt);
}
.wordmark--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  white-space: normal;
}
.wordmark--stack span { display: block; }
.wordmark--on-inkt { color: var(--papier); }

/* ── typografie ──────────────────────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 62;
  letter-spacing: -0.025em;
  line-height: 0.98;
  font-size: clamp(2.5rem, 2rem + 3.2vw, 4.5rem);
  text-wrap: balance;
}
.display .punt { color: var(--punt); }

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 72;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  text-wrap: balance;
}
h2 .punt, .h2 .punt { color: var(--punt); }

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" 84;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: 1.375rem;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42ch;
  text-wrap: pretty;
}

.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section-head { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head p { margin-top: 1.1rem; color: var(--ink-soft); max-width: 50ch; text-wrap: pretty; }

/* ── knoppen — rechthoekig, amber alleen op de hoofdknop ─────────────── */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 1px solid var(--inkt);
  border-radius: 0;
  font: inherit;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.knop:active { transform: scale(0.97); }

.knop-punt { background: var(--punt); border-color: var(--punt); color: var(--op-tekst-op-punt); }
.knop-inkt { background: var(--inkt); border-color: var(--inkt); color: var(--papier); }
.knop-lijn { background: transparent; color: var(--inkt); }
.knop-klein { min-height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; }

@media (hover: hover) and (pointer: fine) {
  .knop-punt:hover { background: var(--punt-licht); border-color: var(--punt-licht); }
  .knop-inkt:hover { background: var(--inkt-80); border-color: var(--inkt-80); }
  .knop-lijn:hover { background: var(--inkt); color: var(--papier); }
}

.knop[disabled] { opacity: 0.55; cursor: progress; transform: none; }

.tekstlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .tekstlink:hover { color: var(--punt-tekst); text-decoration-color: var(--punt-tekst); }
}

/* ── header ──────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.header-inner { height: 100%; display: flex; align-items: center; gap: 2rem; }
.header-inner .wordmark { font-size: 1.0625rem; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 0.25rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--inkt); }
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: 1rem; }

.menu-toggle {
  display: none;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--inkt);
  background: transparent;
  color: var(--inkt);
  font: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
}
.menu-toggle:active { transform: scale(0.97); }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .header-actions { margin-left: auto; }
  .header-actions .knop-punt.btn-sm-hide { display: none; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 35;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    width: 100%;
    min-height: 3.25rem;
    padding: 0;
    font-size: 1.125rem;
    color: var(--inkt);
    border-bottom: 1px solid var(--line);
  }
  .nav-cta { display: block; padding-top: 1.25rem; }
  .nav-cta a { justify-content: center; min-height: 3.25rem; border: 1px solid var(--inkt); background: var(--punt); border-color: var(--punt); color: var(--inkt); font-weight: 700; }
}
@media (min-width: 901px) { .nav-cta { display: none; } }

/* ── secties ─────────────────────────────────────────────────────────── */

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--tint { background: var(--bg-tint); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem) var(--section-y); }

/* ── hero ────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 5rem); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.hero-copy .lead { margin-top: 1.5rem; max-width: 38ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 2.25rem; }

.hero-collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 0.85rem);
  aspect-ratio: 6 / 5.4;
}
.hero-collage .foto:nth-child(1) { grid-row: 1 / span 2; }
.hero-collage .foto:nth-child(2) { align-self: start; aspect-ratio: 4/3; }
.hero-collage .foto:nth-child(3) { align-self: end; aspect-ratio: 4/3.6; }

/* ── beeldvlakken (foto's): rechthoekig, warm licht bij ontbrekend beeld ─
   Elk plaatsvervangend vlak draagt een kleine BEELD VOLGT-markering, zodat
   niemand een gradient voor echt werk aanziet. Zodra een echte foto in
   assets/ staat: de background-image regel hieronder vervangen (zie
   assets/LEESMIJ.txt) en de .ph-tag mag weg. ── */

.foto {
  position: relative;
  overflow: hidden;
  background-color: var(--steen);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ph, var(--ph-1));
}
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.foto--1 { --ph: var(--ph-1); }
.foto--2 { --ph: var(--ph-2); }
.foto--3 { --ph: var(--ph-3); }
.foto--4 { --ph: var(--ph-4); }
.foto--5 { --ph: var(--ph-5); }
.foto--6 { --ph: var(--ph-6); }

:root {
  --ph-1: linear-gradient(158deg, #e7dfcd 0%, #c9beac 46%, #8a867e 100%);
  --ph-2: linear-gradient(200deg, #ece4d4 0%, #d9d0bd 50%, #a89d89 100%);
  --ph-3: linear-gradient(120deg, #d9d4c8 0%, #b8b3a8 55%, #6f6b62 100%);
  --ph-4: linear-gradient(170deg, #efe7d8 0%, #d3c8b3 55%, #978972 100%);
  --ph-5: linear-gradient(210deg, #e2d9c6 0%, #c4b79f 50%, #7c7364 100%);
  --ph-6: linear-gradient(140deg, #eae1d0 0%, #cfc3ac 55%, #857c6c 100%);
}

.ph-tag {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  background: rgba(238, 235, 227, 0.82);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: opacity 200ms ease;
}

/* ── tags: werk / proces / mensen (merkboek §07) ────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag--werk { background: var(--inkt); color: var(--papier); }
.tag--proces { background: var(--punt); color: var(--inkt); }
.tag--mensen { background: transparent; border: 1px solid var(--papier); color: var(--papier); }
.tag--mensen.tag--op-licht { border-color: var(--inkt); color: var(--inkt); }

/* ── diensten ────────────────────────────────────────────────────────── */

.diensten-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.dienst--hoofd { grid-column: 1 / span 7; }
.dienst--zij { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }

.dienst { display: flex; flex-direction: column; }
.dienst .foto { margin-bottom: 1.5rem; }
.dienst--hoofd .foto { aspect-ratio: 16 / 11; }
.dienst--zij .foto { aspect-ratio: 16 / 10; }
.dienst p { margin-top: 0.6rem; color: var(--ink-soft); max-width: 48ch; text-wrap: pretty; }

.dienst-lijst { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.dienst-lijst li {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line-strong);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* ── ons werk (portfolio-galerij) ────────────────────────────────────── */

.galerij {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 1rem);
  /* een expliciete verhouding geeft de rijen een echte hoogte: zonder dit
     heeft 1fr niets om van te verdelen (de container zelf heeft geen
     vaste hoogte), en vallen de vlakken samen tot 0px (zie ook de vaste
     hoogte/aspect-ratio-notitie bij .galerij-item .foto hieronder). */
  aspect-ratio: 12 / 5;
}
.galerij-item { position: relative; }
.galerij-item:nth-child(1) { grid-column: 1 / span 3; grid-row: 1 / span 2; }
.galerij-item:nth-child(2) { grid-column: 4 / span 3; grid-row: 1 / span 1; }
.galerij-item:nth-child(3) { grid-column: 4 / span 2; grid-row: 2 / span 1; }
.galerij-item:nth-child(4) { grid-column: 6 / span 1; grid-row: 2 / span 1; }
.galerij-item:nth-child(5) { grid-column: 1 / span 2; grid-row: 3 / span 1; }
.galerij-item:nth-child(6) { grid-column: 3 / span 4; grid-row: 3 / span 1; }
/* width + height 100% (niet aspect-ratio): de vlakken moeten hun toegewezen
   grid-cel precies vullen. Aspect-ratio en een gedwongen procentuele hoogte
   spreken elkaar tegen (de browser berekent dan de breedte uit de hoogte in
   plaats van andersom), wat op desktop tot horizontale overflow leidde. */
.galerij-item .foto { width: 100%; height: 100%; }

.galerij-item .foto img,
.galerij-item .foto::before { transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .galerij-item:hover .foto::before { transform: scale(1.045); }
}

.galerij-titel {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  color: var(--wit);
  background: linear-gradient(to top, rgba(20, 20, 20, 0.72) 0%, rgba(20, 20, 20, 0) 65%);
  transform: translateY(0.4rem);
  opacity: 0;
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .galerij-item:hover .galerij-titel,
  .galerij-item:focus-within .galerij-titel { transform: translateY(0); opacity: 1; }
  /* zonder dit botst "Beeld volgt" met de titel zodra die intoont: allebei
     linksonder in dezelfde hoek. */
  .galerij-item:hover .ph-tag,
  .galerij-item:focus-within .ph-tag { opacity: 0; }
}
@media not all and (hover: hover) {
  /* geen aparte hover-staat op een touchscherm: de titel staat hier altijd
     aan, dus "Beeld volgt" moet hier ook altijd wijken. */
  .galerij-titel { opacity: 1; transform: none; background: linear-gradient(to top, rgba(20,20,20,0.6), rgba(20,20,20,0) 75%); }
  .galerij-item .ph-tag { display: none; }
}
.galerij-titel .tag { flex-shrink: 0; }
.galerij-titel-tekst { font-weight: 700; font-size: 0.9375rem; }

.galerij-note { margin-top: 1.5rem; color: var(--ink-faint); font-size: 0.9375rem; }

/* ── werkwijze ───────────────────────────────────────────────────────── */

.stappen {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.stap { padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.stap-nummer { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--punt-tekst); }
.stap h3 { margin-top: 0.6rem; font-size: 1.1875rem; }
.stap p { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.9375rem; text-wrap: pretty; }

/* ── de mensen ───────────────────────────────────────────────────────── */

.mensen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.mens { display: flex; flex-direction: column; align-items: flex-start; }

/* .avatar: cirkel is hier gerechtvaardigd, dit IS het profielteken van een
   echt persoon (dezelfde uitzondering als "c."). De amber stip herhaalt dat
   motief bewust, in plaats van een generieke rand of schaduw. */
.avatar {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: 1.25rem;
}
.avatar-plek {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--steen);
}
.avatar::after {
  content: "";
  position: absolute;
  right: -0.15rem;
  bottom: -0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--punt);
  border: 2px solid var(--bg-tint);
  border-radius: 2px;
}

/* geen display:flex hier: dat zette een ongewenste gap tussen de naam en
   zijn punt (::after op .punt), terwijl de punt de naam juist strak moet
   volgen, net als bij elke andere kop in het systeem. */
.mens-rol { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--punt-tekst); margin-top: 0.4rem; }
.mens p { margin-top: 0.9rem; color: var(--ink-soft); max-width: 42ch; text-wrap: pretty; }

/* ── prijzen ─────────────────────────────────────────────────────────── */

/* align-items: start (niet stretch): anders rekt het maandpakket-kaartje
   zich uit tot de gecombineerde hoogte van de twee kleinere kaarten
   ernaast, met een lege vlakte voor de knop tot gevolg. Elke kaart krijgt
   nu gewoon zijn eigen, natuurlijke hoogte. */
.packages { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
.package-stack { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

.package {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line-strong);
  background: var(--wit);
}
/* Geen amber randstreep hier: dat is precies de generieke "kaart-accent"-tel
   die overal opduikt, en amber hoort bij dit merk alleen bij de punt, een
   label of één knop. De donkerdere rand is al genoeg om dit kaartje als het
   aanbevolen pakket te laten opvallen. */
.package--featured { border-color: var(--inkt); background: var(--wit); }
.package-sub { margin-top: 0.5rem; color: var(--ink-soft); font-size: 1rem; }

.prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem; margin-top: 1.75rem; }
.prijs-vanaf, .prijs-eenheid { color: var(--ink-soft); font-size: 1rem; }
.prijs-bedrag {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 62;
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prijs-bedrag--tekst { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }

.package-tekst { margin-top: 1rem; color: var(--ink-soft); font-size: 1rem; text-wrap: pretty; }
.package .tekstlink { margin-top: auto; padding-top: 0.75rem; }
.package-tekst + .tekstlink { margin-top: 0.75rem; }

.inbegrepen { margin: 2rem 0 2.5rem; width: 100%; display: grid; gap: 1.1rem; }
.inbegrepen li { position: relative; padding-left: 1.5rem; font-size: 1rem; line-height: 1.5; }
.inbegrepen li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.8rem; height: 2px; background: var(--punt); }
.package--featured .knop { margin-top: auto; }

/* ── vragen ──────────────────────────────────────────────────────────── */

.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq-head { position: sticky; top: calc(var(--header-h) + 2rem); }
.faq-head h2 { max-width: 12ch; }
.faq-head p { margin-top: 1.25rem; color: var(--ink-soft); max-width: 30ch; }

.faq details { border-bottom: 1px solid var(--line-strong); }
.faq details:first-child { border-top: 1px solid var(--line-strong); }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4.25rem;
  padding: 1rem 3rem 1rem 0;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 0.9rem;
  height: 2px;
  background: var(--ink);
  transition: transform 260ms var(--ease-out);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 3rem 1.5rem 0; color: var(--ink-soft); max-width: 58ch; text-wrap: pretty; animation: faq-open 320ms var(--ease-out); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── contact ─────────────────────────────────────────────────────────── */

.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.5rem, 4vw, 4rem);
  border: 1px solid var(--line-strong);
  background: var(--wit);
}
.contact-copy h2 { max-width: 12ch; }
.contact-copy > p { margin-top: 1.25rem; color: var(--ink-soft); max-width: 36ch; text-wrap: pretty; }

.direct { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.direct-titel { color: var(--ink-soft); font-size: 0.9375rem; }
.direct ul { margin-top: 0.5rem; }
.direct a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.3em;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .direct a:hover { color: var(--punt-tekst); text-decoration-color: var(--punt-tekst); }
}

.form { display: grid; gap: 1.25rem; align-content: start; }
.veld { display: grid; gap: 0.5rem; }
.veld label { font-size: 0.9375rem; font-weight: 700; }
.veld input, .veld select, .veld textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.veld textarea { resize: vertical; min-height: 7.5rem; }
.veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 1.45rem, calc(100% - 0.9rem) 1.45rem; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--inkt); box-shadow: inset 0 0 0 1px var(--inkt); }
.veld [aria-invalid="true"] { border-color: var(--punt-tekst); }
.veld-hulp { color: var(--ink-faint); font-size: 0.875rem; }
.veld-fout { color: var(--punt-tekst); font-size: 0.875rem; font-weight: 700; }

.form-note { color: var(--ink-faint); font-size: 0.875rem; }
.form-note a { color: var(--ink-soft); text-underline-offset: 0.25em; }
.form-status { padding: 1rem 1.25rem; border: 1px solid var(--line-strong); font-size: 0.9375rem; }
.form-status.is-error { border-color: var(--punt-tekst); color: var(--punt-tekst); }

/* ── afsluiting: het enige inkt-vlak, precies zoals merkboek §08 ─────── */

.afsluiting {
  background: var(--inkt);
  color: var(--papier);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}
.afsluiting-kop { max-width: 26rem; }
.afsluiting-kop .lead { color: rgba(250, 248, 243, 0.68); margin-top: 1.25rem; }
.afsluiting .knop-punt { margin-top: 2rem; }

.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(250, 248, 243, 0.18); }
.footer-text { margin-top: 0.9rem; color: rgba(250, 248, 243, 0.6); font-size: 0.9375rem; max-width: 30ch; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: rgba(250, 248, 243, 0.72); font-size: 0.9375rem; text-decoration: none; transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .footer-nav a:hover { color: var(--papier); } }
.legal-row { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(250, 248, 243, 0.18); }
.legal { color: rgba(250, 248, 243, 0.46); font-size: 0.8125rem; }

/* ── privacypagina ───────────────────────────────────────────────────── */

.prose { max-width: 44rem; padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-y); }
.prose h1 { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wght" 800, "wdth" 62; font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem); letter-spacing: -0.025em; line-height: 1.02; }
.prose h2 { font-size: 1.375rem; margin-top: 3rem; }
.prose p, .prose li { margin-top: 1rem; color: var(--ink-soft); text-wrap: pretty; }
.prose ul { margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc; }
.prose li { margin-top: 0.4rem; }
.prose a { color: var(--ink); text-underline-offset: 0.25em; }
.prose .note { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--line-strong); background: var(--bg-tint); color: var(--ink); font-size: 0.9375rem; }

/* ── beweging ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  [data-hero] { animation: rise 760ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  .hero-collage .foto { animation: foto-in 900ms var(--ease-out) both; }
  .hero-collage .foto:nth-child(1) { animation-delay: 160ms; }
  .hero-collage .foto:nth-child(2) { animation-delay: 260ms; }
  .hero-collage .foto:nth-child(3) { animation-delay: 340ms; }
  @keyframes foto-in { from { clip-path: inset(100% 0 0 0); opacity: 0.5; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 640ms var(--ease-out) var(--d, 0ms), transform 640ms var(--ease-out) var(--d, 0ms);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── responsief ──────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .packages { grid-template-columns: minmax(0, 1fr); }
  .contact-panel { grid-template-columns: minmax(0, 1fr); }
  .contact-copy h2, .contact-copy > p { max-width: none; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero-collage { max-width: 30rem; aspect-ratio: 6/5; }
  .diensten-grid { grid-template-columns: minmax(0, 1fr); }
  .dienst--hoofd, .dienst--zij { grid-column: auto; }
  .dienst--zij { flex-direction: column; }
  .galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; aspect-ratio: auto; }
  .galerij-item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .galerij-item .foto { aspect-ratio: 4/5 !important; }
  .mensen-grid { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .faq-head { position: static; }
  .faq-head h2 { max-width: none; }
  .footer-inner { flex-direction: column; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .stappen { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .knop { flex: 1 1 100%; }
  .prijs-bedrag { font-size: 2.25rem; }
  .faq summary { font-size: 1rem; }
  .faq details p { padding-right: 0; }
}