/* ===========================================================================
   STYLES.CSS: portfolio Manou. Look en keuzes staan in DESIGN.md (eerst lezen).
   Signatuur: modern studio, grotesk op wit, warm bijna-zwart, een enkel ember
   accent, mono-details voor de ICT-achtergrond, warme hairlines als diepte.
   Opbouw:
     1. Fonts (lokaal)          7. Hero en werk-voorproef
     2. Design tokens           8. Over mij
     3. Reset en basis          9. Register (wat ik doe)
     4. Hulpklassen            10. Stappen (werkwijze)
     5. Container en secties   11. Aanbod
     6. Header en navigatie    12. Werk, contact, footer, reveal, responsive
   =========================================================================== */

/* 1. FONTS: lokaal gehost, geen externe requests (AVG) */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin.woff2") format("woff2");
  font-weight: 400 800; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

/* 2. DESIGN TOKENS (DESIGN.md sectie 2 en 3) */
:root {
  --kleur-licht:        #ffffff;
  --kleur-grijs-licht:  #f3f2ef;
  --kleur-secundair:    #1b1a17;
  --kleur-tekst:        #35322e;
  --kleur-tekst-zacht:  #6e6a64;
  --kleur-primair:      #c24a26;
  --kleur-primair-don:  #9e3a1b;
  --kleur-primair-licht:#e2794a;   /* lichtere ember voor labels op donkere panelen (AA) */
  --kleur-op-ember:     #ffffff;   /* tekst op ember-vlakken (wit haalt AA, gebroken-wit net niet) */
  --kleur-accent-tint:  #f1e3dc;   /* zachte ember-waas: aanbevolen aanbod-optie en diensten-icoonchips */
  --kleur-fout:         #b3401f;   /* foutstatus in het formulier; blijft in de ember-familie */
  --kleur-grijs:        #e4e0da;
  --kleur-donker:       #201e1a;
  --kleur-tekst-op-don: #f1eee9;
  --kleur-mono-op-don:  #b9b2a6;

  --font-koppen: "Schibsted Grotesk", system-ui, sans-serif;
  --font-tekst:  "Libre Franklin", system-ui, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --radius:       12px;
  --radius-knop:  10px;
  --radius-veld:  8px;
  --container:    1120px;
  --sectie-pad:   100px;

  --transitie: 0.2s ease;
}

/* 3. RESET EN BASIS */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

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

h1, h2, h3 {
  font-family: var(--font-koppen);
  color: var(--kleur-secundair);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--kleur-primair); text-decoration: none; }
a:hover { color: var(--kleur-primair-don); }

img, svg { display: block; max-width: 100%; }

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

/* 4. HULPKLASSEN */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--kleur-secundair); color: var(--kleur-tekst-op-don);
  padding: 10px 16px; border-radius: 0 0 var(--radius-veld) 0;
}
.skip-link:focus { left: 0; color: var(--kleur-tekst-op-don); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

::selection { background: var(--kleur-accent-tint); color: var(--kleur-secundair); }

/* 5. CONTAINER EN SECTIES */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Sectiepaddings en achtergronden zijn bewust niet uniform (DESIGN.md sectie 5). */
.section { padding: var(--sectie-pad) 0; }
.section--grijs, .diensten { background: var(--kleur-grijs-licht); }

.section__head { max-width: 720px; margin: 0 0 48px; }
.section__titel {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -0.01em;
}
.section__intro {
  color: var(--kleur-tekst-zacht);
  font-size: 1.08rem;
  margin-top: 0.6em;
}

/* 6. HEADER EN NAVIGATIE */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: color-mix(in srgb, var(--kleur-licht) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transitie), background var(--transitie);
}
.site-header.is-scrolled {
  background: var(--kleur-licht);
  border-bottom-color: var(--kleur-grijs);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}

/* Scroll-voortgang: 2px ember-lijn die meegroeit met de scrollpositie (JS zet de breedte). */
.scroll-voortgang {
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--kleur-primair);
}

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--kleur-secundair); }
.logo:hover { color: var(--kleur-secundair); }
.logo__mark {
  display: inline-flex; width: 42px; height: 31px;
  transition: transform var(--transitie);
}
.logo:hover .logo__mark { transform: scale(1.08); }
.logo__mark svg { width: 100%; height: 100%; }
/* Beeldmerk: de NA-ligatuur van Manou. Het zwart volgt de tekstkleur;
   de ember-delen (de stam die de N afmaakt, de balk die de A afmaakt)
   krijgen op donker de lichtere ember voor contrast. */
.logo__ember { stroke: var(--kleur-primair); }
.logo--op-donker .logo__ember { stroke: #e2794a; }

/* Laad-animatie in de header: het logo maakt zichzelf af. Eerst staan de
   zwarte letters er, dan schuift de stam van boven in en de dwarsbalk van
   links. Eenmalig; buiten de viewBox is alles vanzelf onzichtbaar. */
@keyframes logo-stam-in {
  from { transform: translateY(-1112px); }
  to   { transform: translateY(0); }
}
@keyframes logo-balk-in {
  from { transform: translateX(-1300px); }
  to   { transform: translateX(0); }
}
.site-header .logo__ember line:first-child {
  animation: logo-stam-in 0.45s cubic-bezier(0.25, 0.9, 0.3, 1) 0.2s backwards;
}
.site-header .logo__ember line:last-child {
  animation: logo-balk-in 0.4s cubic-bezier(0.25, 0.9, 0.3, 1) 0.6s backwards;
}
.logo__text {
  font-family: var(--font-koppen);
  font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em;
}
.logo--op-donker { color: var(--kleur-tekst-op-don); }
.logo--op-donker:hover { color: var(--kleur-tekst-op-don); }

.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--kleur-tekst);
  padding: 8px 12px;
  border-radius: var(--radius-veld);
}
.nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 1.5px; background: var(--kleur-primair);
  transform: scaleX(0); transform-origin: left; transition: transform var(--transitie);
}
.nav__link:hover { color: var(--kleur-secundair); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link--cta {
  background: var(--kleur-primair); color: var(--kleur-op-ember);
  margin-left: 8px;
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover { background: var(--kleur-primair-don); color: var(--kleur-op-ember); }

.hamburger {
  display: none;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px;
}
.hamburger__bar {
  display: block; height: 2px; width: 100%;
  background: var(--kleur-secundair); border-radius: 2px;
  transition: transform var(--transitie), opacity var(--transitie);
}
.hamburger.is-open .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger__bar:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-koppen);
  font-weight: 600; font-size: 0.98rem;
  padding: 13px 22px; border-radius: var(--radius-knop);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--transitie), color var(--transitie), border-color var(--transitie), transform var(--transitie);
}
.btn--primair { background: var(--kleur-primair); color: var(--kleur-op-ember); }
.btn--primair:hover { background: var(--kleur-primair-don); color: var(--kleur-op-ember); transform: translateY(-1px); }
.btn--secundair { background: transparent; color: var(--kleur-secundair); border-color: var(--kleur-secundair); }
.btn--secundair:hover { background: var(--kleur-secundair); color: var(--kleur-tekst-op-don); transform: translateY(-1px); }
.btn--breed { width: 100%; }

/* 7. HERO EN WERK-VOORPROEF */
.hero { padding: 152px 0 var(--sectie-pad); }
.hero__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--kleur-tekst-zacht);
  margin: 0 0 18px;
}

/* Typ-effect: blok-caret in ember achter de getypte tekst. Vast tijdens het
   typen, daarna drie keer knipperen en weg. Alleen JS zet deze klassen. */
.hero__eyebrow.is-typend::after,
.hero__eyebrow.typ-klaar::after {
  content: ""; display: inline-block;
  width: 0.55em; height: 1.05em; margin-left: 3px;
  background: var(--kleur-primair);
  vertical-align: text-bottom;
}
.hero__eyebrow.typ-klaar::after { animation: caretUit 1.6s steps(1, end) forwards; }
@keyframes caretUit {
  0% { opacity: 1; } 17% { opacity: 0; } 33% { opacity: 1; }
  50% { opacity: 0; } 66% { opacity: 1; } 83% { opacity: 0; } 100% { opacity: 0; }
}

/* Hero-entrance: kop, subtitel en knoppen faden kort na elkaar in (JS stagger). */
.js .intro { opacity: 0; transform: translateY(12px); transition: opacity 0.55s ease, transform 0.55s ease; }
.js .intro.is-in { opacity: 1; transform: none; }
.hero__title {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  letter-spacing: -0.015em; line-height: 1.1;
  margin-bottom: 0.5em;
}
.hero__subtitle {
  font-size: 1.18rem; color: var(--kleur-tekst-zacht);
  max-width: 40ch; margin-bottom: 2em;
}
.hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.hero__link {
  font-size: 0.98rem; color: var(--kleur-primair-don);
  text-decoration: underline;
  text-decoration-color: var(--kleur-primair);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  padding: 13px 0;
}
.hero__link:hover { color: var(--kleur-secundair); }
.hero__noot { font-size: 0.92rem; color: var(--kleur-tekst-zacht); margin: 16px 0 0; }

/* Werk-voorproef: twee kleine, overlappende beelden van echt eigen werk.
   Menselijk bewijs boven de vouw in plaats van een kaartpatroon. */
.hero__voorproef { display: block; }
.hero__voorproef img {
  display: block; height: auto;
  border: 1px solid var(--kleur-grijs);
  border-radius: 8px;
  transition: border-color var(--transitie);
}
.hero__voorproef img:first-child {
  width: 88%; margin-left: auto;
  /* het lichte beeld mag niet wegvallen tegen wit: iets donkerder haarlijn */
  border-color: color-mix(in srgb, var(--kleur-grijs) 55%, var(--kleur-tekst-zacht));
}
.hero__voorproef img + img {
  width: 80%; margin-top: -20%;
  transform: rotate(-2deg);
  box-shadow: 0 0 0 6px var(--kleur-licht); /* vlakke witte rand, geen blur */
}
.hero__voorproef:hover img { border-color: var(--kleur-primair); }
.hero__voorproef-label {
  display: block; margin-top: 12px; text-align: right;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600;
  color: var(--kleur-tekst-zacht);
  transition: color var(--transitie);
}
.hero__voorproef:hover .hero__voorproef-label { color: var(--kleur-primair-don); }

/* 8. OVER MIJ (compactere sectie, leeskolom plus statement; de statement-kolom
   is de gereserveerde plek voor de foto van Manou, zie DESIGN.md) */
.over { padding: 84px 0; }
.over__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px; align-items: center;
}
.over__tekst { font-size: 1.08rem; max-width: 56ch; }
.over__tekst .section__titel { margin-bottom: 0.8em; }
.over__noot {
  margin-top: 1.4em; padding-top: 1.2em;
  border-top: 1px solid var(--kleur-grijs);
  color: var(--kleur-tekst-zacht); font-size: 0.98rem;
}
.over__statement { border-left: 3px solid var(--kleur-primair); padding-left: 28px; }
.over__statement p {
  font-family: var(--font-koppen); font-weight: 600;
  font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.22;
  color: var(--kleur-secundair); margin: 0;
}

/* 9. REGISTER (WAT IK DOE): een uitgelicht item, daarna drie ongelijke kolommen */
.register__uitgelicht { max-width: 62ch; padding-bottom: 40px; }
.register__uitgelicht .register__titel { font-size: 1.55rem; }
.register__uitgelicht p { font-size: 1.06rem; }
.register__rest {
  display: grid; grid-template-columns: 1.1fr 0.85fr 1.25fr;
  gap: 44px; align-items: start;
  padding-top: 40px; border-top: 1px solid var(--kleur-grijs);
}
.register__titel { font-size: 1.15rem; margin-bottom: 0.4em; }
.register__item p, .register__uitgelicht p { color: var(--kleur-tekst-zacht); margin: 0; }

/* 10. STAPPEN (WERKWIJZE): verticale lijst met gewone cijfers en een dun verbindingslijntje */
.stappen {
  list-style: none; margin: 0; padding: 0;
  max-width: 700px; counter-reset: stap;
}
.stap { counter-increment: stap; position: relative; padding: 0 0 30px 58px; }
.stap:last-child { padding-bottom: 0; }
.stap::before {
  content: counter(stap);
  position: absolute; left: 0; top: -2px;
  font-family: var(--font-koppen); font-weight: 700; font-size: 1.35rem;
  color: var(--kleur-primair);
}
.stap::after {
  content: ""; position: absolute; left: 8px; top: 38px; bottom: 10px;
  width: 1px; background: var(--kleur-grijs);
}
.stap:last-child::after { display: none; }
.stap__titel { font-size: 1.15rem; margin-bottom: 0.35em; }
.stap p { color: var(--kleur-tekst-zacht); margin: 0; max-width: 58ch; }

/* 11. AANBOD: verhaal plus een klein servicepaneel (bewust geen twee vergelijkingskaarten) */
.aanbod__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: start; }
.aanbod__verhaal { font-size: 1.06rem; max-width: 58ch; }
.aanbod__lijst { list-style: none; margin: 0.2em 0 0; padding: 0; }
.aanbod__lijst li { position: relative; padding: 7px 0 7px 26px; color: var(--kleur-tekst); }
.aanbod__lijst li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 8px; height: 8px; background: var(--kleur-primair); /* caret-motief */
}
.aanbod__service {
  background: var(--kleur-accent-tint);
  border-radius: var(--radius); padding: 30px;
}
.aanbod__service h3 { font-size: 1.25rem; margin-bottom: 0.5em; }
.aanbod__service p { color: var(--kleur-tekst); font-size: 1rem; }
.aanbod__service-noot {
  font-size: 0.92rem; color: var(--kleur-primair-don);
  margin-top: 1em; padding-top: 1em;
  border-top: 1px solid color-mix(in srgb, var(--kleur-primair) 22%, transparent);
}

/* 12A. WERK: donker statement-blok met de galerij van demo-ontwerpen.
   Twee genres (uitgelichte cases met lang bijschrift, compacte kaarten met
   mono-regel) en ongelijke maten: bewust geen uniform raster (DESIGN.md 4). */
.werk { background: var(--kleur-donker); padding: 116px 0; }
.werk .section__titel { color: var(--kleur-tekst-op-don); }
.werk .section__intro { color: var(--kleur-mono-op-don); }

.galerij { margin-bottom: 48px; }
.galerij__top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.case { margin: 0; }
.galerij__top .case:nth-child(2) { margin-top: 36px; } /* bewuste asymmetrie */
.case__link { display: block; color: inherit; }
.case img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(241, 238, 233, 0.16);
  /* alt-tekst en laadvlak blijven leesbaar op de donkere sectie */
  color: var(--kleur-tekst-op-don);
  background: rgba(241, 238, 233, 0.06);
  transition: border-color var(--transitie);
}
.case__link:hover img { border-color: var(--kleur-primair-licht); }
.case__hint {
  display: block; margin-top: 10px; text-align: right;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  color: var(--kleur-mono-op-don);
  transition: color var(--transitie);
}
.case__link:hover .case__hint { color: var(--kleur-primair-licht); }
.case figcaption {
  margin-top: 14px; font-size: 1rem;
  color: var(--kleur-mono-op-don); max-width: 52ch;
}
.case figcaption strong { color: var(--kleur-tekst-op-don); }

.galerij__meer {
  display: grid;
  grid-template-columns: 0.95fr 1.2fr 0.85fr 1fr; /* ongelijke breedtes */
  gap: 28px; margin-top: 56px;
  padding-top: 40px; border-top: 1px solid rgba(241, 238, 233, 0.14);
}
.galerij__meer .case:nth-child(2) { margin-top: 26px; }
.galerij__meer .case:nth-child(4) { margin-top: 12px; }
.case__mono { font-family: var(--font-mono); font-size: 0.8rem; }

.werk__onder { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.werk__onder p { margin: 0; color: var(--kleur-mono-op-don); max-width: 44ch; }

/* 12A1b. DEMO-VENSTER: popup die een galerij-ontwerp live laadt in een iframe.
   Dialog-gedrag (focus, Escape, scroll-lock) zit in script.js onderdeel 8. */
.demo {
  position: fixed; inset: 0; z-index: 150; /* boven de header (100) */
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--kleur-donker) 82%, transparent);
}
.demo[hidden] { display: none; }
.demo:not([hidden]) { animation: demoIn 0.2s ease; }
.demo.is-sluitend { animation: demoUit 0.2s ease forwards; }
@keyframes demoIn { from { opacity: 0; } }
@keyframes demoUit { to { opacity: 0; } }

.demo__venster {
  display: flex; flex-direction: column;
  width: min(1240px, 100%);
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  background: var(--kleur-donker);
  border: 1px solid rgba(241, 238, 233, 0.16);
  border-radius: var(--radius);
  overflow: hidden;
}
.demo__balk {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--kleur-tekst-op-don);
}
.demo__titel {
  flex: 1; min-width: 0; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.demo__apparaten { display: flex; gap: 6px; }
.demo__apparaat {
  font: inherit; cursor: pointer;
  color: var(--kleur-tekst-op-don);
  background: transparent;
  border: 1px solid rgba(241, 238, 233, 0.3);
  border-radius: var(--radius-veld);
  padding: 5px 12px;
  transition: background var(--transitie), border-color var(--transitie), color var(--transitie);
}
.demo__apparaat:hover { border-color: var(--kleur-primair-licht); }
.demo__apparaat[aria-pressed="true"] {
  background: var(--kleur-primair); border-color: var(--kleur-primair);
  color: var(--kleur-op-ember);
}
.demo__nieuwtab {
  color: var(--kleur-mono-op-don);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 5px 0;
}
.demo__nieuwtab:hover { color: var(--kleur-primair-licht); }
.demo__sluit {
  width: 44px; height: 44px; margin-right: -8px; flex-shrink: 0;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--kleur-tekst-op-don);
  background: none; border: 0; border-radius: var(--radius-veld);
  transition: color var(--transitie);
}
.demo__sluit:hover { color: var(--kleur-primair-licht); }

.demo__scherm {
  position: relative; flex: 1;
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--kleur-grijs-licht);
}
.demo__iframe {
  display: block; width: 100%; height: 100%;
  border: 0; background: var(--kleur-licht);
}
.demo.is-telefoon .demo__iframe { width: 390px; max-width: 100%; margin: 0 auto; }

.demo__laden {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; gap: 10px;
  text-align: center; padding: 24px;
  font-family: var(--font-mono); font-size: 0.9rem;
  color: var(--kleur-tekst-zacht);
  background: var(--kleur-grijs-licht);
}
.demo.is-geladen .demo__laden { display: none; }
.demo__laden p { margin: 0; }
.demo__caret {
  display: inline-block; width: 0.55em; height: 1.05em; margin-left: 4px;
  background: var(--kleur-primair);
  vertical-align: text-bottom;
  animation: demoCaret 1s steps(1, end) infinite; /* knippert alleen tijdens het laden */
}
@keyframes demoCaret { 50% { opacity: 0; } }
.demo__laadhint { color: var(--kleur-tekst); max-width: 34ch; }

/* 12A2. VRAGEN: open vraag-antwoordblokken, asymmetrisch verdeeld over twee kolommen */
.vragen__grid { columns: 2; column-gap: 64px; max-width: 1020px; }
.vraag { break-inside: avoid; margin-bottom: 38px; }
.vraag h3 { font-size: 1.12rem; margin-bottom: 0.4em; }
.vraag p { color: var(--kleur-tekst-zacht); margin: 0; }

/* 12B. CONTACT */
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.contact__lijst { list-style: none; margin: 1.6em 0 0; padding: 0; }
.contact__lijst li { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.contact__icoon { display: inline-flex; width: 22px; height: 22px; color: var(--kleur-primair); flex-shrink: 0; }
.contact__noot { color: var(--kleur-tekst-zacht); font-size: 0.95rem; margin-top: 1.2em; }

.contact__form {
  background: var(--kleur-licht); border: 1px solid var(--kleur-grijs);
  border-radius: var(--radius); padding: 32px;
}
.form__rij { margin-bottom: 18px; }
.form__rij label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; color: var(--kleur-secundair); }
.form__optioneel { font-weight: 400; color: var(--kleur-tekst-zacht); }
/* Optionele velden ogen lichter dan verplichte (progressive enhancement via :has). */
.form__rij label:has(.form__optioneel) { font-weight: 400; color: var(--kleur-tekst); }
.form__rij input, .form__rij textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 11px 14px; border: 1px solid var(--kleur-grijs);
  border-radius: var(--radius-veld); background: var(--kleur-licht); color: var(--kleur-tekst);
  transition: border-color var(--transitie), box-shadow var(--transitie);
}
.form__rij textarea { resize: vertical; min-height: 120px; }
.form__rij input:focus, .form__rij textarea:focus {
  outline: none; border-color: var(--kleur-primair);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kleur-primair) 18%, transparent);
}
.form__rij.is-fout input, .form__rij.is-fout textarea { border-color: var(--kleur-fout); }
.form__fout { display: block; color: var(--kleur-fout); font-size: 0.85rem; margin-top: 5px; min-height: 1em; }
.form__status { margin: 12px 0 0; font-size: 0.92rem; color: var(--kleur-tekst-zacht); }
.form__status.is-fout { color: var(--kleur-fout); }

/* 12C. FOOTER */
.footer { background: var(--kleur-donker); color: var(--kleur-tekst-op-don); padding: 56px 0 28px; }
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer__tagline { color: var(--kleur-mono-op-don); font-size: 0.95rem; margin: 12px 0 0; }
.footer__contact a { color: var(--kleur-tekst-op-don); font-family: var(--font-mono); font-size: 0.9rem; }
.footer__contact a:hover { color: var(--kleur-primair-licht); }
.footer__onder {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: var(--container); margin: 32px auto 0; padding: 20px 24px 0;
  border-top: 1px solid rgba(241, 238, 233, 0.14);
}
.footer__onder p { color: var(--kleur-mono-op-don); font-family: var(--font-mono); font-size: 0.82rem; margin: 0; }

/* 12D. REVEAL (beweging L1, alleen met JS actief) */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.is-zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .intro { opacity: 1; transform: none; transition: none; }
  .btn, .nav__link::after, .hamburger__bar, .logo__mark,
  .hero__voorproef img, .hero__voorproef-label,
  .case img, .case__hint,
  .demo__apparaat, .demo__sluit { transition: none; }
  .hero__eyebrow.is-typend::after,
  .hero__eyebrow.typ-klaar::after { animation: none; opacity: 0; }
  .site-header .logo__ember line { animation: none; }
  .demo:not([hidden]), .demo.is-sluitend { animation: none; }
  .demo__caret { animation: none; }
}

/* 12E. RESPONSIVE */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__voorproef { max-width: 460px; }
  .over__grid { grid-template-columns: 1fr; gap: 40px; }
  .over__statement { max-width: 26ch; }
  .register__rest { grid-template-columns: 1fr; gap: 28px; }
  .galerij__top { grid-template-columns: 1fr; gap: 32px; }
  .galerij__top .case:nth-child(2) { margin-top: 0; }
  .galerij__meer { grid-template-columns: 1fr 1fr; gap: 32px 24px; margin-top: 44px; }
  .galerij__meer .case:nth-child(even) { margin-top: 18px; } /* rechterkolom licht verspringend */
  .contact__grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 768px) {
  :root { --sectie-pad: 72px; }
  .hero { padding: 128px 0 var(--sectie-pad); }

  .hamburger { display: flex; }
  .nav {
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--kleur-licht); border-bottom: 1px solid var(--kleur-grijs);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height var(--transitie), visibility var(--transitie);
  }
  .nav.is-open { max-height: min(80vh, 560px); overflow-y: auto; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
  .nav__link { padding: 14px 4px; font-size: 0.95rem; }
  .nav__link::after { display: none; }
  .nav__link--cta { margin: 8px 0 0; text-align: center; padding: 14px; }

  .aanbod__grid { grid-template-columns: 1fr; gap: 36px; }
  .vragen__grid { columns: 1; }

  /* Demo-venster vult op telefoon het hele scherm; de weergaveknoppen
     verdwijnen, want dit scherm is zelf al de telefoonweergave. */
  .demo { padding: 0; }
  .demo__venster { height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
  .demo__apparaten { display: none; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .stap { padding-left: 44px; }
  .aanbod__service, .contact__form { padding: 24px; }
  .werk { padding: 88px 0; }
  .galerij__meer { grid-template-columns: 1fr; }
  .galerij__meer .case:nth-child(even) { margin-top: 0; }
}