/* ==========================================================================
   Studio Mooy — landingpage
   Monochroom merk: hiërarchie komt uit typografie, wit­ruimte en beweging.
   ========================================================================== */

/* ---------- Lettertypes: zelf gehost ----------
   Vanaf Googles servers laden stuurt het IP-adres van elke bezoeker naar
   Google; in de EU is dat een AVG-probleem. Daarom lokaal.

   Gemeten keuze: de variabele Jost is 26 KB voor álle gewichten van 300 tot
   500 — even groot als één statische snede, dus strikt beter. Idem bij
   Instrument Sans. Alleen de cursief blijft statisch: daar is de variabele
   30 KB tegen 11,3 KB voor het enige gewicht dat de site gebruikt.
   Statisch zou 148 KB latin kosten, dit 66,6 KB.

   Bewust `format("woff2")` en niet `woff2-variations`: die laatste is
   verouderd en wordt door een deel van de browsers geweigerd, waarna het
   lettertype stilzwijgend niet laadt. Variabiliteit leest de browser zelf
   uit het bestand.

   Subsets latin en latin-ext; cyrillisch is niet opgehaald. Door de
   unicode-range haalt een Nederlandstalige pagina in de praktijk alleen de
   latin-bestanden op. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/instrument-sans-var-latin.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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/instrument-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/jost-var-latin.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: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/jost-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/jost-300-italic-latin.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: 'Jost';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/jost-300-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Lettertypes van Les Copeaux ----------
   Alleen voor het specimen op hun casepagina. Uitgelezen van de live site:
   niet uit hun broncode gegokt maar de font-family die de browser er
   werkelijk op toepast, plus de fontbestanden die daarbij binnenkomen.
   Cormorant Garamond staat op de koppen (Light 300), Inter op de lopende
   tekst (300, met 400 en 500 voor navigatie en knoppen).

   Zelf gehost, net als onze eigen letters — vanaf Google laden zou het IP van
   elke bezoeker naar Google sturen, en dat hebben we er juist uitgehaald.
   Beide families staan onder de SIL Open Font License, dus zelf hosten mag.

   Alleen de latin-snede, en alleen de gewichten die het specimen toont. Het
   kost 84 KB, maar die worden pas opgehaald op de pagina waar ze ook echt
   gebruikt worden — een browser laadt een lettertype niet als geen enkel
   element erom vraagt. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-var-latin.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: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/inter-var-latin.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;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #111110;
  --ink-soft: #3c3c3a;
  --gray: #5f5f5b;
  --paper: #ffffff;
  --paper-dim: #f4f4f1;
  --line: #e3e3de;

  --inv-text: #f5f5f2;
  --inv-gray: #a6a6a0;
  --inv-line: #2b2b29;

  --font-display: 'Jost', 'Futura', sans-serif;
  --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --veer-duur: 0.72s;

  --container: 72rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --space-section: clamp(5.5rem, 11vw, 9rem);

  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.2, 1);
  /* Terugvalwaarde: een back-out bezier. Die schiet maar ~10% voorbij het
     eindpunt en dat is op een verplaatsing van 22px nauwelijks te zien —
     gemeten: 1 pixel. Vandaar de echte veer hieronder. */
  --veer: cubic-bezier(0.34, 1.56, 0.64, 1);
  --header-h: 4.5rem;
}

/* Een gedempte veer, benaderd met `linear()`: schiet 22% voorbij het eindpunt,
   zakt daarna licht door en komt tot rust. Dát is een veer; een bezier kan
   maar één keer doorschieten en amper. Buiten een @supports gezet zodat een
   browser zonder `linear()` gewoon op de bezier hierboven blijft staan in
   plaats van de hele eigenschap ongeldig te verklaren. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --veer: linear(
      0, 0.218 2.1%, 0.862 6.5%, 1.114, 1.226 11.5%, 1.219, 1.148 17.6%,
      1.033, 0.999 23.5%, 0.929 26.5%, 0.916, 0.926, 0.978 39.2%, 1.008,
      1.022 47.6%, 1.006 57.4%, 0.992 67.2%, 1
    );
  }
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* <picture> is enkel een omhulsel om de browser een formaat te laten kiezen;
   het hoort geen eigen doos in de opmaak te zijn. Met `display: contents`
   gedraagt de <img> zich alsof hij rechtstreeks in zijn ouder staat, en
   blijven alle bestaande regels als `.case-plate img` gewoon werken. Zonder
   dit is de picture een inline doos zonder hoogte, en kan een img met
   `height: 100%` zich nergens meer aan meten. */
picture { display: contents; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

ul[class], ol[class],
.site-nav ul, .footer-nav ul, .footer-contact ul { list-style: none; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0.005em;
  /* Geen kop die eindigt op één los woord. Verandert niets aan koppen die
     al goed afbreken; browsers die het niet kennen negeren het gewoon. */
  text-wrap: pretty;
}

h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }

h3 { font-size: 1.35rem; font-weight: 400; }

p { max-width: 60ch; }

/* Ook in lopende tekst en lijsten geen laatste regel met één los woord. */
p, li, dd { text-wrap: pretty; }

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

.section-werk :focus-visible,
.section-contact :focus-visible,
.site-footer :focus-visible { outline-color: var(--inv-text); }

::selection { background: var(--ink); color: var(--paper); }

/* ---------- Utilities ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.85rem;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 1.4rem;
}

.section { padding-block: var(--space-section); }

.section-head { margin-bottom: clamp(3rem, 6vw, 4.5rem); }

/* `.section-head h2 em` stond hier ook: er staat nergens een <em> in zo'n kop.
   Gevonden met shot/dodecss.mjs. */
.hero-title em,
.section-studio h2 em { font-style: italic; font-weight: 300; }

/* ---------- Knoppen ----------
   Vulling schuift bij hover van onderaf in (::after, alleen transform).
   JS voegt daar een licht magnetisch effect aan toe (inline transform). */
.btn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: inline-block;
  padding: 0.95rem 2.1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s var(--ease);
}

.btn:hover::after { transform: scaleY(1); }

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid::after { background: var(--paper); }
.btn-solid:hover { color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost::after { background: var(--ink); }
.btn-ghost:hover { color: var(--paper); }

.btn-light { background: var(--inv-text); color: var(--ink); border-color: var(--inv-text); }
.btn-light::after { background: var(--ink); }
.btn-light:hover { color: var(--inv-text); }

.btn-small { padding: 0.55rem 1.3rem; font-size: 0.85rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

.site-header.scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Horizontale lockup: monogram bewust kleiner dan je intuïtie zegt, want
   het is een massief vlak naast een ijl, ruim gespatieerd wordmerk. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.72rem;
}

.brand-mark { width: 27px; height: auto; }
.brand-word { width: 150px; height: auto; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}

.site-nav a:not(.btn) {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.3rem;
  transition: color 0.2s var(--ease);
}

.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.site-nav a:not(.btn):hover { color: var(--ink); }
.site-nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Uitklapmenu in de navigatie ---------- */
.nav-groep {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-groep-knop {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-groep-pijl {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--gray);
  border-bottom: 1.5px solid var(--gray);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.nav-groep:hover .nav-groep-pijl,
.nav-groep.open .nav-groep-pijl { border-color: var(--ink); }
.nav-groep.open .nav-groep-pijl { transform: translateY(1px) rotate(225deg); }

.nav-sub {
  position: absolute;
  top: 100%;
  left: -0.9rem;
  min-width: 12rem;
  margin-top: 0.7rem;
  padding: 0.6rem 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -26px rgba(17, 17, 16, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}

.nav-groep.open .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- Terugval zonder JavaScript ----------
   De klasse `open` wordt door main.js gezet, dus zonder script gaat dit menu
   nooit open en waren de twee caselinks onbereikbaar. Gemeten met
   shot/zonderjs.mjs: dat waren de enige twee elementen op de hele site die
   zonder JS verborgen bleven.

   Niet dramatisch — "Werk" zelf wijst naar /werk/ en dáár staan beide cases —
   maar een afkorting die er wel staat en niet werkt is slordig. Met CSS alleen
   kan het gewoon: openen bij aanwijzen én bij toetsenbordfocus ergens in de
   groep, zodat het ook zonder muis te bedienen is.

   De knop verdwijnt dan: dat is een bedieningselement dat zonder script niets
   doet, en een dode knop is erger dan geen knop. Het pijltje blijft staan als
   aanwijzing dat er iets onder zit. */
html:not(.js) .nav-groep-knop { display: none; }

html:not(.js) .nav-groep::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--gray);
  border-bottom: 1.5px solid var(--gray);
  transform: translateY(-2px) rotate(45deg);
}

html:not(.js) .nav-groep:hover .nav-sub,
html:not(.js) .nav-groep:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-sub li { display: block; }

/* De algemene `.site-nav ul { display: flex }` gold ook voor deze geneste
   lijst, waardoor de items in het uitklapvenster náást elkaar stonden in
   plaats van onder elkaar. Alleen op brede schermen: het mobiele paneel
   regelt het uitklappen zelf (zie de media query onderaan). */
@media (min-width: 48.001em) {
  .site-nav .nav-sub { display: block; }
}

.nav-sub a {
  display: block;
  padding: 0.5rem 1.1rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* De onderlijn uit de hoofdnavigatie hoort hier niet: die zou over de volle
   breedte van het uitklapvenster lopen. */
.site-nav .nav-sub a::after { content: none; }
.nav-sub a:hover { color: var(--ink); background: var(--paper-dim); }

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
}

.nav-toggle-box {
  display: block;
  width: 26px; height: 14px;
  position: relative;
}

.nav-toggle-box span {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}

.nav-toggle-box span:first-child { top: 0; }
.nav-toggle-box span:last-child { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle-box span:first-child { transform: translateY(6.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:last-child { transform: translateY(-6.25px) rotate(-45deg); }

/* ---------- Intro-overlay (monogram-opening, 1x per sessie) ----------
   Tijdlijn: 0,05 lijn tekent · 0,35 helften klikken samen · 0,95 wordmerk
   verschijnt · 1,35–1,80 stilstand · 1,80 vlucht naar de header · 2,40 klaar.
   De eindtoestand is puur CSS, zodat de overlay ook zonder JS wegvalt. */
/* Let op: de overlay heet bewust .intro-screen en niet .intro. Het
   <html>-element draagt .intro als statusvlag, dus een kale .intro-regel
   zou ook op <html> zelf slaan. */
html:not(.intro) .intro-screen { display: none; }

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: intro-clear 0.1s linear 2.72s forwards;
}

/* Losse achtergrond: vervaagt terwijl het merk erboven blijft vliegen */
.intro-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  animation: intro-fade-out 0.4s var(--ease) 1.8s forwards;
}

.intro-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  /* Lineair: de versnellingskromme zit al in de keyframes die JS schrijft.
     Zou de browser hier zelf versnellen, dan deed hij dat per deeltraject
     en kreeg de vlucht een knik. */
  animation:
    intro-land 0.78s linear 1.8s forwards,
    intro-logo-out 0.01s linear 2.6s forwards;
}

/* Klapt tijdens de vlucht om van gestapeld naar naast het wordmerk */
.intro-mark {
  position: relative;
  width: clamp(96px, 14vw, 150px);
  animation: intro-mark-move 0.78s linear 1.8s forwards;
}

.intro-word {
  width: clamp(200px, 29vw, 320px);
  opacity: 0;
  animation: intro-word-in 0.4s var(--ease) 0.95s forwards;
}

.intro-word img { width: 100%; height: auto; }

.intro-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.intro-curve-path {
  stroke: var(--ink);
  stroke-width: 30; /* viewBox-eenheden van het monogram (1679 breed) */
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    intro-draw 0.55s var(--ease) 0.05s forwards,
    intro-fade 0.3s var(--ease) 0.7s forwards;
}

/* Twee helften van het echte monogram schuiven rond de curve in elkaar */
.intro-half img { width: 100%; height: auto; }

.intro-half-l { clip-path: inset(0 50% 0 0); }

.intro-half-r {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 50%);
}

.intro-half-l img {
  opacity: 0;
  transform: translateX(-8%);
  animation: intro-assemble 0.5s var(--ease) 0.35s forwards;
}

.intro-half-r img {
  opacity: 0;
  transform: translateX(8%);
  animation: intro-assemble 0.5s var(--ease) 0.35s forwards;
}

@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-fade { to { opacity: 0; } }
@keyframes intro-assemble { to { opacity: 1; transform: none; } }

@keyframes intro-word-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-logo-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes intro-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes intro-clear { to { visibility: hidden; } }

/* Let op: bewust GEEN custom properties in deze keyframes. Browsers rekenen
   een var() binnen @keyframes niet betrouwbaar opnieuw uit wanneer je hem
   later zet — de animatie blijft dan op de terugvalwaarde hangen. JS meet de
   headerpositie en schrijft deze twee regels over met concrete waarden. */
@keyframes intro-land {
  to { transform: translate(0px, -24vh) scale(0.4); }
}

@keyframes intro-mark-move {
  to { transform: none; }
}

/* Overslaan bij interactie: alles kort uitfaden en meteen door */
html.intro-skip .intro-screen {
  animation: intro-skip-out 0.25s var(--ease) forwards;
}

@keyframes intro-skip-out { to { opacity: 0; visibility: hidden; } }

/* Het wordmerk in de header wacht tot het merk geland is */
/* Het logo in de header is er tijdens de intro niet. Op het moment dat de
   vlucht landt wisselen we in één keer om: beide staan dan pixelgelijk over
   elkaar, dus de wissel is onzichtbaar en het leest als aankomen. De header
   verschijnt bewust een fractie vóór het vliegende logo verdwijnt, zodat er
   nooit een gaatje valt. */
html.intro .brand {
  opacity: 0;
  animation: intro-word-in 0.01s linear 2.56s forwards;
}

html.intro-skip .brand { animation: intro-word-in 0.25s var(--ease) forwards; }

/* ---------- Ruggengraat: S-curve die met de scroll meetekent ---------- */
main { position: relative; }

/* Inhoud boven de lijn, sectie-achtergronden eronder */
main .container { position: relative; z-index: 3; }

.backbone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* JS tekent de lijn: de voortgang hangt aan de verticale scrollpositie,
   niet aan de lengte van het pad. Native scroll-timelines kunnen alleen
   lineair en lopen daardoor uit de pas met wat het oog volgt. */
/* Dekking staat op 1: de doorzichtigheid zit in het kleurverloop dat JS
   opbouwt. Bij verminderde beweging blijft deze waarde staan en is de lijn
   dus gewoon zichtbaar zonder scroll-afhankelijkheid. */
.backbone-path {
  stroke: #8a8a83;
  stroke-width: 1.6;
  opacity: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 3rem) 4rem;
  overflow: hidden;
}

.hero-inner { width: 100%; }

/* De hero start pas op 'hero-go' — direct, of na de intro. Zonder JS
   staat alles gewoon zichtbaar. */
html.js .hero-eyebrow,
html.js .hero-sub,
html.js .hero-cta { opacity: 0; }

/* Eerst trekt de lijn door het beeld (main.js, start 60ms na hero-go), dan
   volgt de kop, alsof de lijn hem aflevert. Axel vond de oude hero te snel:
   alles kwam bijna tegelijk. Trager door langere bewegingen, niet door
   langere pauzes: boven ~0,3s stilte gaat het voelen als haperen. Alles
   staat ~2,65s na hero-go. Verder vertragen niet aangeraden: dan wordt de
   hero een wachtscherm en komen de knoppen als laatste. */
html.js.hero-go .hero-eyebrow { animation: fade-up 0.9s var(--ease) 0.55s forwards; }
html.js.hero-go .hero-line:nth-child(1) > span { animation: line-up 1.1s var(--ease) 0.65s forwards; }
html.js.hero-go .hero-line:nth-child(2) > span { animation: line-up 1.1s var(--ease) 0.82s forwards; }
html.js.hero-go .hero-sub { animation: fade-up 1s var(--ease) 1.35s forwards; }
html.js.hero-go .hero-cta { animation: fade-up 1s var(--ease) 1.65s forwards; }

.hero-title {
  font-size: clamp(2.5rem, 6.5vw, 4.6rem);
  line-height: 1.08;
  max-width: 16em;
}

/* Smalle telefoons: op 40px viel "Goed werk verdient / een eigen uitstraling."
   uiteen in vier stukken. Gemeten: 36px houdt het op twee regels tot 360px
   breed, 32px tot 320px. Vanaf 390px volstaat de gewone ondergrens. */
@media (max-width: 380px) { .hero-title { font-size: 2.25rem; } }
@media (max-width: 350px) { .hero-title { font-size: 2rem; } }
@media (min-width: 381px) and (max-width: 43.75em) { .hero-title { font-size: clamp(2.9rem, 13vw, 3.4rem); line-height: 1.04; } }

.hero-line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em;
}

html.js .hero-line > span { transform: translateY(110%); }

.hero-line > span { display: block; }

.hero-sub {
  margin-top: 1.8rem;
  max-width: 34rem;
  font-size: 1.08rem;
  color: var(--gray);
}

.hero-cta {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes line-up { to { transform: none; } }

/* ---------- Diensten ----------
   Geen raster van gelijke kaarten: drie gelijke vlakken geven geen rangorde,
   terwijl merk en website het werk zijn en onderhoud het vervolg. Vandaar
   twee open banden en daaronder één toegevoegd blok. */
.section-diensten {
  background: var(--paper-dim);
  position: relative;
  /* De scheidingslijnen lopen breder dan de tekstkolom; wat buiten beeld
     valt mag geen horizontale schuifbalk opleveren. */
  overflow: hidden;
}

/* Nummerkolom op vaste breedte en niet `auto`: elke band is een eigen raster,
   dus een breder nummer ("+" naast "01") schoof de hele band opzij en de
   kolommen van de drie banden lijnden niet meer uit. */
.track {
  position: relative;
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: stretch;
  padding-top: clamp(2.8rem, 5vw, 4.2rem);
  padding-bottom: clamp(2.4rem, 4.5vw, 3.6rem);
}

/* Scheidingslijn over de volle breedte. JS legt een piekkerf op het punt
   waar de ruggengraat de lijn kruist en laat beide helften vanaf die kerf
   naar buiten tekenen. Zonder JS blijft --len ongedefinieerd, valt de
   streeppatroon-regel weg en staat er gewoon een doorlopende haarlijn. */
.track-rule {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* De algemene `svg { max-width: 100% }` zou deze lijn tot de tekstkolom
     terugknijpen. De viewBox wordt dan horizontaal samengedrukt en de kerf
     schuift weg van de ruggengraat — op 1440px scheelde dat 99 pixels. */
  max-width: none;
  height: 24px;
  color: var(--line);
  pointer-events: none;
  overflow: visible;
}

.track-rule path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}

/* De overgang gaat pas aan in het frame nadat JS --len heeft gezet. Zonder
   die vertraging ziet de eerste sprong — van volledig getekend naar verborgen
   — eruit als een lijn die zich bij het laden terugtrekt. */
.track-rule.klaar path {
  transition: stroke-dashoffset var(--dur, 0.9s) var(--ease);
}

.track.in .track-rule path { stroke-dashoffset: 0; }

.track-nr {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--gray);
  padding-top: 0.55rem;
  transition: color 0.35s var(--ease);
}

.track:hover .track-nr { color: var(--ink); }

.track-body h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  margin-bottom: 0.8rem;
}

.track-lead {
  color: var(--gray);
  max-width: 46ch;
}

.track-list {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  list-style: none;
}

.track-list li {
  position: relative;
  padding-left: 1.2rem;
}

.track-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray);
}

/* Prijs bovenaan, doorlooptijd onderaan: zo omlijst de kolom zichzelf en
   blijft er geen gat onder de prijs staan. */
.track-deal {
  padding-top: 0.3rem;
  display: flex;
  flex-direction: column;
}

.track-price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-display);
  line-height: 1.1;
}

.track-price span {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}

.track-price b {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 500;
}

.track-alt {
  margin-top: 0.5rem;
  margin-bottom: 1.4rem;   /* ondergrens voor de ruimte boven de doorlooptijd */
  font-size: 0.88rem;
  color: var(--gray);
  max-width: 32ch;
}

/* Zelfde plek als "doorlopend, maandelijks opzegbaar" bij onderhoud: dat
   zet het abonnement in dezelfde categorie als de twee projecten. */
.track-time {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--gray);
}

/* Het enige omkaderde vlak in deze sectie. Bewust licht en niet donker: de
   werk-sectie er direct onder is al zwart, twee donkere vlakken op elkaar
   lopen in elkaar over. */
.upsell {
  margin-top: clamp(0.5rem, 1.5vw, 1.2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}

.upsell h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin: 0.35rem 0 0.7rem;
}

.upsell-lead {
  color: var(--gray);
  font-size: 0.95rem;
}

.upsell-term {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.upsell-tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.tier + .tier {
  padding-left: clamp(1.2rem, 2.5vw, 2rem);
  border-left: 1px solid var(--line);
}

.tier-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
}

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  font-family: var(--font-display);
  margin: 0.3rem 0 0.9rem;
  line-height: 1.1;
}

.tier-price b {
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  font-weight: 500;
}

.tier-price span {
  font-size: 0.85rem;
  color: var(--gray);
}

.tier ul {
  list-style: none;
  display: grid;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.tier li {
  position: relative;
  padding-left: 1.1rem;
}

.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray);
}

@media (max-width: 900px) {
  .track {
    grid-template-columns: 1.4rem minmax(0, 1fr);
    row-gap: 1.6rem;
  }

  .track-deal {
    grid-column: 2;
    padding-top: 0;
  }

  .upsell { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .track { grid-template-columns: minmax(0, 1fr); }

  .track-nr { padding-top: 0; }

  .track-deal { grid-column: 1; }

  .upsell-tiers {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .tier + .tier {
    padding-left: 0;
    padding-top: 1.4rem;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ---------- Werk ---------- */
.section-werk {
  background: var(--ink);
  color: var(--inv-text);
  position: relative;
}

/* Piekprofiel uit het monogram: de V tussen de twee M-vlakken, hier als
   hap uit de bovenrand van een donkere sectie. Verhouding diepte/breedte
   (0,40) is overgenomen uit het merk zelf.

   TWEE DINGEN DIE HIER FOUT WAREN (sep 2026, door Axel gemeld):

   1. Een grijze haarlijn dwars over de bovenrand van de V. Die kwam van de
      antialiasing van de bovenrand van dit driehoekje tegen de zwarte sectie
      eronder. Opgelost door het vormpje `--over` omhoog te trekken, de
      schuine zijden precies dóór te trekken en het dus iets breder én hoger
      te maken. De helling blijft exact 1,25 (= (b/2) / 0,4b), dus op de
      sectiegrens is de V nog altijd exact `--kerf-b` breed en 0,40 diep.
      De bovenrand ligt nu bóven de grens, op gelijke kleur, en verdwijnt.

   2. De vulkleur stond vast op paper-dim, maar op de werk-, werkwijze- en
      studiopagina is de sectie erboven wit. Dat gaf een zichtbaar donkerder
      wigje. De kleur komt nu uit `--kerf-kleur`; zie de override hieronder. */
.section-werk::before,
.section-contact::before,
.section-site::before {
  --kerf-b: clamp(110px, 13vw, 180px);
  --over: 1.5px;
  content: "";
  position: absolute;
  top: calc(-1 * var(--over));
  left: 50%;
  width: calc(var(--kerf-b) + 2.5 * var(--over));
  height: calc(var(--kerf-b) * 0.4 + var(--over));
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--kerf-kleur, var(--paper-dim));
}

/* Terugvalwaarden voor als JS niet draait: main.js leest de werkelijke kleur
   van de sectie erboven uit en overschrijft deze. Deze twee dekken de
   pagina's waar de sectie erboven wit is. */
.section-contact.case-slot,
.contact-kop + .section-contact { --kerf-kleur: var(--paper); }

.section-werk .eyebrow { color: var(--inv-gray); }

/* Geen raster van gelijke cases meer. Les Copeaux loopt tot de schermrand,
   SR Bikes blijft binnen de tekstkolom — het verschil in formaat is de
   rangorde. De nepbrowserbalk is weg: die reduceerde een volledige
   identiteit tot "een schermafdruk van een website". */
.case + .case { margin-top: clamp(4.5rem, 9vw, 8rem); }

/* De plaat van de grote case is een direct kind van de sectie en dus buiten
   de tekstkolom — volle breedte zonder negatieve marges. */
/* Positioneren zodat de plaat boven de ruggengraat komt: die duikt er dan
   achter weg en komt eronder weer tevoorschijn — hetzelfde als bij het
   portret. Zonder dit loopt de lijn over de foto en hangt de leesbaarheid
   ervan af of er toevallig lucht of gebladerte onder ligt. */
/* z-index 3, gelijk aan `main .container`. Stond op 1 en dat was te laag: de
   ruggengraat staat op 2, dus de lijn liep gewoon over de foto in plaats van
   erachter weg te duiken. Dat viel eerder niet op omdat alleen de volvette
   plaat op de startpagina buiten een .container staat — alle andere platen
   zitten er wél in en erfden die 3 dus vanzelf. Met de nieuwe, veel hogere
   hero kruist de lijn de foto over bijna de volle hoogte en was het meteen
   zichtbaar. */
.case-plate {
  position: relative;
  z-index: 3;
  margin: 0;
  overflow: hidden;
  background: #1c1c1a;
  transition: clip-path 1.05s var(--ease);
}

/* De verhouding komt per plaat uit `--verhouding`, gezet in de opmaak uit de
   werkelijke beeldmaten in inc/cases.php. Zo snijdt `cover` nooit iets weg —
   Axel wil beide hero's volledig zien, inclusief hun eigen navigatiebalk.
   Hier stonden eerst vaste waarden per klasse (2880/1480 en 16/8); die liepen
   elke keer uit de pas zodra een beeld opnieuw uitgesneden werd. */
.case-plate { aspect-ratio: var(--verhouding, 16 / 9); }

/* Hairline om de kleine plaat: de SR Bikes-afbeelding (#101013) valt anders
   weg tegen de sectieachtergrond (#111110). */
.case-second .case-plate { border: 1px solid var(--inv-line); }

/* Op de casepagina staat de plaat op een lichte ondergrond. Daar is de plaat
   een direct kind van .case-second (op de startpagina zit er een .container
   tussen), dus dat onderscheid volstaat om de lijn om te kleuren. */
.case-second > .case-plate { border-color: var(--line); }

/* Opent als een letterbox zodra de plaat in beeld komt. Alleen met JS: zonder
   scriptondersteuning staat het beeld gewoon meteen open. */
html.js .case-plate { clip-path: inset(44% 0 44% 0); }
html.js .case.in .case-plate { clip-path: inset(0 0 0 0); }

/* Het beeld is groter dan het kader; JS schuift het binnen die overmaat mee
   met de scroll. De amplitude wordt uit dezelfde overmaat berekend, dus de
   randen kunnen nooit vrijkomen. */
.case-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}

.case-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-top: clamp(1.6rem, 3.5vw, 2.6rem);
  align-items: start;
}

/* LICHT IS DE STANDAARD, donker is de uitzondering — zie het blok onderaan
   deze sectie. Stond hier eerst omgekeerd: de donkere kleur als basis, met
   losse correcties voor de lichte plekken. Die correcties dekten niet alles,
   en op de casepagina's stond deze regel daardoor op 2,45:1 terwijl 4,5:1 de
   norm is. Gemeten met shot/toegankelijk.mjs. */
.case-facts {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.9rem;
}

/* Het puntje hangt achter het vorige feit en niet vóór het volgende: breekt
   de regel af (op telefoon bij "Tarn, Frankrijk"), dan begint de nieuwe regel
   met een woord in plaats van met een los puntje. */
.case-facts span { white-space: nowrap; }

.case-facts span:not(:last-child)::after {
  content: "·";
  margin: 0 0.7rem;
}

.case-name {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 300;
}

.case-second .case-name { font-size: clamp(1.6rem, 3vw, 2.2rem); }

.case-copy > p { color: var(--inv-gray); }

.case-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  margin-top: 1.3rem;
  padding-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--inv-text);
  text-decoration: none;
}

.case-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--inv-text);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.case-link:hover::after,
.case-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* Twee links naast elkaar: de case is de eerste keuze, de live site de
   tweede. Het verschil zit in de kleur, niet in de vorm. */
.case-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
}

.case-link-stil { color: var(--gray); }
.case-link-stil::after { background: var(--gray); }

.case-arrow { transition: transform 0.3s var(--ease); }

.case-link:hover .case-arrow,
.case-link:focus-visible .case-arrow { transform: translateX(4px); }

/* Hier stond een override naar 3/2 onder 700px, nog uit de tijd dat de platen
   16/6.6 waren en op een telefoon een reepje van 150px hoog werden. Die
   override sneed nu juist een kwart van de hero weg. De hero's zijn met
   verhouding 1,6 en 1,56 vanzelf hoog genoeg: op 380px geeft dat 237px. */

/* Het venster: het monogram maskeert een echte foto. Het S-kanaal is
   negatieve ruimte in het merk, dus daar valt het beeld ook echt weg —
   precies wat een massieve vorm niet kan. */
.mark-window {
  position: relative;
  overflow: hidden;
  width: clamp(160px, 21vw, 300px);
  aspect-ratio: 1679 / 1500;
  /* Geen schermafdruk meer erachter: het S-kanaal is een smalle kronkel, en
     elke rechte lijn uit een screenshot — menubalk, knoprand, tekstregel —
     kruist die curve om de paar pixels. Dat gaf op elk kruispunt een klein
     conflict. Een verloop heeft geen randen en dus niets om mee te botsen. */
  /* Bodemwaarde, duidelijk lichter dan de sectie (#111110): het licht beweegt,
     dus zonder ondergrens valt er telkens een andere hoek van het merk weg en
     is de vorm nooit twee keer hetzelfde. */
  background-color: #262623;
  /* Witte variant: die werkt zowel in alpha- als in luminantiemodus,
     de zwarte valt in luminantiemodus volledig weg. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1679 1500%22 width=%221679%22 height=%221500%22 role=%22img%22 aria-label=%22Studio Mooy%22%3E %3Cpath d=%22M 1660,12 L 1656,13 L 1646,23 L 1636,30 L 1630,36 L 1626,38 L 1612,51 L 1597,62 L 1580,77 L 1576,79 L 1570,85 L 1565,88 L 1552,100 L 1540,109 L 1532,117 L 1527,120 L 1515,131 L 1510,134 L 1504,140 L 1488,152 L 1467,171 L 1441,191 L 1398,229 L 1394,231 L 1388,237 L 1374,247 L 1368,253 L 1364,255 L 1322,292 L 1318,294 L 1312,300 L 1308,302 L 1302,308 L 1297,311 L 1264,341 L 1260,343 L 1236,364 L 1222,374 L 1188,404 L 1183,407 L 1177,413 L 1154,431 L 1121,460 L 1117,462 L 1082,493 L 1068,503 L 1015,549 L 994,565 L 951,603 L 934,616 L 922,627 L 917,630 L 884,660 L 859,680 L 857,683 L 849,690 L 841,701 L 832,721 L 831,729 L 830,730 L 830,736 L 829,737 L 829,744 L 828,745 L 828,773 L 829,774 L 830,786 L 831,787 L 832,795 L 838,807 L 839,813 L 844,820 L 848,830 L 851,833 L 856,842 L 870,859 L 905,894 L 940,926 L 969,949 L 1033,1006 L 1109,1081 L 1126,1102 L 1128,1106 L 1133,1111 L 1137,1118 L 1142,1123 L 1144,1128 L 1158,1147 L 1159,1151 L 1164,1157 L 1168,1167 L 1173,1173 L 1177,1183 L 1181,1188 L 1183,1195 L 1190,1207 L 1192,1215 L 1198,1226 L 1200,1235 L 1206,1247 L 1209,1263 L 1214,1275 L 1214,1280 L 1215,1281 L 1215,1286 L 1217,1293 L 1217,1299 L 1218,1300 L 1218,1304 L 1219,1305 L 1220,1313 L 1221,1314 L 1221,1319 L 1222,1320 L 1222,1333 L 1223,1334 L 1223,1369 L 1224,1370 L 1223,1398 L 1222,1399 L 1221,1418 L 1220,1419 L 1219,1430 L 1216,1440 L 1214,1459 L 1208,1476 L 1209,1482 L 1212,1485 L 1217,1487 L 1226,1487 L 1227,1486 L 1234,1486 L 1235,1487 L 1634,1487 L 1635,1486 L 1652,1487 L 1661,1484 L 1665,1476 L 1665,917 L 1666,916 L 1666,879 L 1665,878 L 1665,16 L 1663,13 Z M 16,13 L 14,15 L 12,20 L 12,23 L 13,24 L 13,32 L 12,33 L 12,67 L 13,68 L 13,100 L 12,101 L 12,183 L 13,184 L 13,1337 L 12,1338 L 12,1366 L 13,1367 L 13,1468 L 12,1469 L 13,1470 L 13,1476 L 15,1481 L 19,1485 L 23,1487 L 664,1486 L 665,1485 L 673,1485 L 674,1484 L 695,1483 L 696,1482 L 713,1480 L 714,1479 L 718,1479 L 724,1477 L 731,1477 L 732,1476 L 741,1475 L 752,1471 L 767,1468 L 773,1465 L 791,1460 L 799,1455 L 810,1452 L 816,1448 L 825,1445 L 834,1439 L 842,1436 L 866,1420 L 887,1401 L 910,1374 L 911,1371 L 918,1362 L 919,1358 L 926,1346 L 927,1339 L 933,1324 L 933,1319 L 935,1312 L 935,1304 L 936,1303 L 936,1284 L 937,1281 L 936,1280 L 936,1259 L 935,1258 L 934,1244 L 925,1214 L 922,1210 L 916,1196 L 913,1193 L 910,1186 L 903,1177 L 901,1172 L 897,1168 L 893,1161 L 878,1144 L 874,1141 L 861,1127 L 816,1087 L 811,1084 L 797,1071 L 792,1068 L 778,1055 L 772,1051 L 764,1043 L 738,1021 L 701,985 L 687,969 L 676,953 L 672,949 L 669,942 L 664,936 L 659,925 L 655,919 L 654,914 L 648,903 L 643,882 L 639,873 L 638,859 L 637,858 L 637,819 L 638,818 L 638,809 L 639,808 L 639,803 L 641,799 L 641,796 L 646,784 L 647,777 L 652,769 L 656,759 L 659,756 L 665,746 L 683,727 L 704,712 L 710,709 L 712,709 L 722,703 L 736,699 L 741,696 L 748,694 L 752,694 L 753,693 L 764,692 L 772,689 L 777,689 L 783,687 L 803,686 L 804,685 L 826,685 L 828,683 L 827,679 L 819,671 L 815,669 L 809,663 L 795,653 L 778,638 L 774,636 L 768,630 L 754,620 L 722,592 L 706,580 L 684,560 L 678,556 L 654,535 L 650,533 L 635,519 L 630,516 L 617,504 L 612,501 L 570,464 L 546,445 L 521,423 L 516,420 L 483,391 L 478,388 L 472,382 L 451,366 L 445,360 L 440,357 L 425,343 L 421,341 L 387,311 L 382,308 L 376,302 L 372,300 L 356,286 L 352,284 L 346,278 L 334,269 L 328,263 L 323,260 L 309,247 L 304,244 L 290,231 L 274,219 L 221,174 L 216,171 L 201,158 L 197,156 L 191,150 L 176,139 L 164,128 L 159,125 L 152,118 L 130,101 L 115,87 L 110,84 L 86,63 L 82,61 L 76,55 L 72,53 L 66,47 L 62,45 L 56,39 L 42,29 L 36,23 L 31,20 L 26,14 L 21,12 Z%22 fill=%22%23FFFFFF%22 fill-rule=%22evenodd%22 clip-rule=%22evenodd%22/%3E %3C/svg%3E ");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1679 1500%22 width=%221679%22 height=%221500%22 role=%22img%22 aria-label=%22Studio Mooy%22%3E %3Cpath d=%22M 1660,12 L 1656,13 L 1646,23 L 1636,30 L 1630,36 L 1626,38 L 1612,51 L 1597,62 L 1580,77 L 1576,79 L 1570,85 L 1565,88 L 1552,100 L 1540,109 L 1532,117 L 1527,120 L 1515,131 L 1510,134 L 1504,140 L 1488,152 L 1467,171 L 1441,191 L 1398,229 L 1394,231 L 1388,237 L 1374,247 L 1368,253 L 1364,255 L 1322,292 L 1318,294 L 1312,300 L 1308,302 L 1302,308 L 1297,311 L 1264,341 L 1260,343 L 1236,364 L 1222,374 L 1188,404 L 1183,407 L 1177,413 L 1154,431 L 1121,460 L 1117,462 L 1082,493 L 1068,503 L 1015,549 L 994,565 L 951,603 L 934,616 L 922,627 L 917,630 L 884,660 L 859,680 L 857,683 L 849,690 L 841,701 L 832,721 L 831,729 L 830,730 L 830,736 L 829,737 L 829,744 L 828,745 L 828,773 L 829,774 L 830,786 L 831,787 L 832,795 L 838,807 L 839,813 L 844,820 L 848,830 L 851,833 L 856,842 L 870,859 L 905,894 L 940,926 L 969,949 L 1033,1006 L 1109,1081 L 1126,1102 L 1128,1106 L 1133,1111 L 1137,1118 L 1142,1123 L 1144,1128 L 1158,1147 L 1159,1151 L 1164,1157 L 1168,1167 L 1173,1173 L 1177,1183 L 1181,1188 L 1183,1195 L 1190,1207 L 1192,1215 L 1198,1226 L 1200,1235 L 1206,1247 L 1209,1263 L 1214,1275 L 1214,1280 L 1215,1281 L 1215,1286 L 1217,1293 L 1217,1299 L 1218,1300 L 1218,1304 L 1219,1305 L 1220,1313 L 1221,1314 L 1221,1319 L 1222,1320 L 1222,1333 L 1223,1334 L 1223,1369 L 1224,1370 L 1223,1398 L 1222,1399 L 1221,1418 L 1220,1419 L 1219,1430 L 1216,1440 L 1214,1459 L 1208,1476 L 1209,1482 L 1212,1485 L 1217,1487 L 1226,1487 L 1227,1486 L 1234,1486 L 1235,1487 L 1634,1487 L 1635,1486 L 1652,1487 L 1661,1484 L 1665,1476 L 1665,917 L 1666,916 L 1666,879 L 1665,878 L 1665,16 L 1663,13 Z M 16,13 L 14,15 L 12,20 L 12,23 L 13,24 L 13,32 L 12,33 L 12,67 L 13,68 L 13,100 L 12,101 L 12,183 L 13,184 L 13,1337 L 12,1338 L 12,1366 L 13,1367 L 13,1468 L 12,1469 L 13,1470 L 13,1476 L 15,1481 L 19,1485 L 23,1487 L 664,1486 L 665,1485 L 673,1485 L 674,1484 L 695,1483 L 696,1482 L 713,1480 L 714,1479 L 718,1479 L 724,1477 L 731,1477 L 732,1476 L 741,1475 L 752,1471 L 767,1468 L 773,1465 L 791,1460 L 799,1455 L 810,1452 L 816,1448 L 825,1445 L 834,1439 L 842,1436 L 866,1420 L 887,1401 L 910,1374 L 911,1371 L 918,1362 L 919,1358 L 926,1346 L 927,1339 L 933,1324 L 933,1319 L 935,1312 L 935,1304 L 936,1303 L 936,1284 L 937,1281 L 936,1280 L 936,1259 L 935,1258 L 934,1244 L 925,1214 L 922,1210 L 916,1196 L 913,1193 L 910,1186 L 903,1177 L 901,1172 L 897,1168 L 893,1161 L 878,1144 L 874,1141 L 861,1127 L 816,1087 L 811,1084 L 797,1071 L 792,1068 L 778,1055 L 772,1051 L 764,1043 L 738,1021 L 701,985 L 687,969 L 676,953 L 672,949 L 669,942 L 664,936 L 659,925 L 655,919 L 654,914 L 648,903 L 643,882 L 639,873 L 638,859 L 637,858 L 637,819 L 638,818 L 638,809 L 639,808 L 639,803 L 641,799 L 641,796 L 646,784 L 647,777 L 652,769 L 656,759 L 659,756 L 665,746 L 683,727 L 704,712 L 710,709 L 712,709 L 722,703 L 736,699 L 741,696 L 748,694 L 752,694 L 753,693 L 764,692 L 772,689 L 777,689 L 783,687 L 803,686 L 804,685 L 826,685 L 828,683 L 827,679 L 819,671 L 815,669 L 809,663 L 795,653 L 778,638 L 774,636 L 768,630 L 754,620 L 722,592 L 706,580 L 684,560 L 678,556 L 654,535 L 650,533 L 635,519 L 630,516 L 617,504 L 612,501 L 570,464 L 546,445 L 521,423 L 516,420 L 483,391 L 478,388 L 472,382 L 451,366 L 445,360 L 440,357 L 425,343 L 421,341 L 387,311 L 382,308 L 376,302 L 372,300 L 356,286 L 352,284 L 346,278 L 334,269 L 328,263 L 323,260 L 309,247 L 304,244 L 290,231 L 274,219 L 221,174 L 216,171 L 201,158 L 197,156 L 191,150 L 176,139 L 164,128 L 159,125 L 152,118 L 130,101 L 115,87 L 110,84 L 86,63 L 82,61 L 76,55 L 72,53 L 66,47 L 62,45 L 56,39 L 42,29 L 36,23 L 31,20 L 26,14 L 21,12 Z%22 fill=%22%23FFFFFF%22 fill-rule=%22evenodd%22 clip-rule=%22evenodd%22/%3E %3C/svg%3E ");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* De lichtbron zelf: ruim groter dan het venster en met een verloop dat naar
   doorzichtig uitloopt, zodat er nooit een harde rand in beeld kan komen. JS
   verschuift hem via --dx/--dy — als gewone declaratie, niet in keyframes,
   want daar worden variabelen niet betrouwbaar opnieuw uitgerekend. */
.mark-light {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 165%;
  aspect-ratio: 1;
  transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(closest-side,
      #ffffff 0%,
      #dcdcd6 20%,
      #9a9a92 42%,
      #4a4a46 68%,
      rgba(38, 38, 35, 0) 100%);
  background-blend-mode: overlay, normal;
  pointer-events: none;
}

/* Kop links, het merk als doorkijk rechts */
.werk-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* Zonder maskering zou het beeld als rechthoek verschijnen — dan liever niet */
@supports not ((mask-image: url("#")) or (-webkit-mask-image: url("#"))) {
  .mark-window { display: none; }
}

.case-deliverables {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--inv-text);
}

/* ==========================================================================
   Werkwijzepagina
   De stappen staan hier als brede rijen, niet als de horizontale lijn met
   cijfers van de startpagina — dat beeldmoment blijft daar. De ruggengraat
   verbindt de rijen al.
   ========================================================================== */
.ww-kop { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ww-kop .case-inleiding { margin-top: 1.4rem; max-width: 54ch; }

.ww-stappen { padding-top: 0; }

.ww-stap {
  display: grid;
  grid-template-columns: minmax(5rem, 12rem) minmax(0, 40rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
  border-top: 1px solid var(--line);
}

.ww-stap-nr {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gray);
}

.ww-stap-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  margin-bottom: 0.8rem;
}

.ww-stap-body p { color: var(--gray); }

.ww-stap-feiten {
  display: grid;
  gap: 1.1rem;
}

.ww-stap-feiten dt {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.3rem;
}

.ww-stap-feiten dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------- Wat als ---------- */
.ww-watals { background: var(--paper-dim); }

.watals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.watals {
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.watals h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.watals p {
  font-size: 0.94rem;
  color: var(--gray);
}

/* ---------- De afspraken ---------- */
.ww-afspraken-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 6vw, 4.5rem);
  align-items: start;
}

.ww-afspraken-grid h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  margin-top: 0.6rem;
}

.ww-afspraken-noot {
  margin-top: 1.2rem;
  font-size: 0.92rem;
  color: var(--gray);
}

.afspraken-lijst {
  list-style: none;
  counter-reset: afspraak;
}

.afspraken-lijst li {
  counter-increment: afspraak;
  position: relative;
  padding: 1.1rem 0 1.1rem 2.6rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.afspraken-lijst li:last-child { border-bottom: 1px solid var(--line); }

.afspraken-lijst li::before {
  content: counter(afspraak, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.15rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--gray);
}

@media (max-width: 900px) {
  .ww-stap {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 1.4rem;
  }

  .ww-stap-feiten { grid-column: 2; }

  .watals-grid,
  .ww-afspraken-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .ww-stap { grid-template-columns: minmax(0, 1fr); }
  .ww-stap-feiten { grid-column: 1; }
}

/* ==========================================================================
   Studiopagina
   Zelfde vormtaal, maar tekstgedreven: dit is de pagina waar vertrouwen moet
   ontstaan, niet waar iets verkocht wordt.
   ========================================================================== */
.studio-kop { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.studio-kop .case-inleiding { margin-top: 1.4rem; }

.studio-verhaal-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}

/* Monochroom met dezelfde filmkorrel als het portret op de startpagina, maar
   zonder de S-breuk — dat beeldmoment blijft daar. De piekkerf houdt het wel
   in dezelfde vormtaal. */
.studio-portret {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--paper-dim);
  clip-path: polygon(0 0, 35% 0, 50% 9.6%, 65% 0, 100% 0, 100% 100%, 0 100%);
}

.studio-portret img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1) contrast(1.07);
}

.studio-portret::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.studio-tekst h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  margin: 0.6rem 0 1.2rem;
}

.studio-tekst p { color: var(--gray); }
.studio-tekst p + p { margin-top: 1.1rem; }

/* ---------- De lat ---------- */
.studio-lat { background: var(--paper-dim); }

.studio-lat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 6vw, 4.5rem);
  align-items: start;
}

.studio-lat-grid h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  margin-top: 0.6rem;
}

.studio-lat-tekst p { color: var(--ink-soft); }
.studio-lat-tekst p + p { margin-top: 1.1rem; }

/* ---------- Wat je mag verwachten ---------- */
.verwacht-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.verwacht {
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.verwacht h3 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.verwacht p {
  font-size: 0.95rem;
  color: var(--gray);
}

.studio-voorwie {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 60ch;
  color: var(--ink-soft);
}

.studio-voorwie span {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}

@media (max-width: 900px) {
  .studio-verhaal-grid,
  .studio-lat-grid,
  .verwacht-grid { grid-template-columns: minmax(0, 1fr); }

  .studio-portret {
    aspect-ratio: 3 / 2;
    max-width: 26rem;
  }
}

/* ==========================================================================
   Dienstenpagina
   Naslagpagina, geen etalage: geen heldenbeeld, wel een meelopende index en
   veel ruimte per dienst.
   ========================================================================== */
.diensten-kop { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.diensten-kop .case-inleiding { margin-top: 1.4rem; }

.section-dienstenlijst { background: var(--paper-dim); }

.diensten-grid {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* Blijft staan tijdens het scrollen, net onder de vaste header. */
.diensten-index {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

.diensten-index-titel {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 1.1rem;
}

.diensten-index ul {
  list-style: none;
  display: grid;
  gap: 0.2rem;
}

.diensten-index a {
  display: flex;
  gap: 0.8rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--gray);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.diensten-index li:last-child a { border-bottom: 1px solid var(--line); }

.diensten-index a span {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  padding-top: 0.15rem;
}

.diensten-index a:hover { color: var(--ink); }
.diensten-index a.hier { color: var(--ink); }

.dienst {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3rem);
}

.dienst + .dienst { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.dienst-nr {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--gray);
}

.dienst h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  margin: 0.5rem 0 1rem;
}

.dienst-lang {
  color: var(--gray);
  max-width: 52ch;
}

.dienst-prijs {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.dienst-alt,
.dienst-termijn {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--gray);
}

.dienst-kolommen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

.dienst-kolommen h3 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.9rem;
}

.dienst-lijst {
  display: grid;
  gap: 0.55rem;
  list-style: none;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.dienst-lijst li {
  position: relative;
  padding-left: 1.2rem;
}

.dienst-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray);
}

/* Hier stond ook .dienst-niet ("Minder geschikt"). Geschrapt op Axels
   verzoek (sep 2026), samen met 'nietvoor' in inc/diensten.php. */
.dienst-vanjou {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.dienst-vanjou span {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Doorverwijzing naar de merkpagina. Staat alleen onder de dienst die ze
   onderbouwt, want daar zit de twijfel: wat krijg ik nu eigenlijk voor dat
   bedrag? Dezelfde onderlijning als .case-link, maar in inkt. */
.dienst-meer {
  margin-top: 1.1rem;
}

.dienst-meer a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
}

.dienst-meer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.dienst-meer a:hover::after,
.dienst-meer a:focus-visible::after { transform: scaleX(0); transform-origin: right; }

.onderhoud-tarieven {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 1.2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
}

.onderhoud-tarieven .tier + .tier {
  padding-left: clamp(1.2rem, 3vw, 2.4rem);
  border-left: 1px solid var(--line);
}

/* Link onder de banden op de startpagina naar deze pagina */
.tracks-meer {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  text-align: right;
}

.tracks-meer .case-link { color: var(--ink); }
.tracks-meer .case-link::after { background: var(--ink); }

/* .case-link is ontworpen voor de zwarte werksectie; op licht moet de kleur om */
.studio-meer { margin-top: 1.8rem; }

.stappen-meer { margin-top: clamp(2rem, 4vw, 3rem); text-align: right; }
.stappen-meer .case-link { color: var(--ink); }
.stappen-meer .case-link::after { background: var(--ink); }
.studio-meer .case-link { color: var(--ink); }
.studio-meer .case-link::after { background: var(--ink); }


@media (max-width: 900px) {
  .diensten-grid { grid-template-columns: minmax(0, 1fr); }

  /* Meelopen heeft geen zin als de index boven de inhoud staat */
  .diensten-index { position: static; }

  .dienst-kolommen,
  .onderhoud-tarieven { grid-template-columns: minmax(0, 1fr); }

  .onderhoud-tarieven .tier + .tier {
    padding-left: 0;
    padding-top: 1.4rem;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ==========================================================================
   Werkpagina — de index
   Bewust geen etalage: op de startpagina draagt het formaatverschil de
   rangorde tussen de cases, hier krijgt elk project dezelfde behandeling
   zodat de lijst kan groeien zonder scheef te gaan.
   ========================================================================== */
.werk-kop { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.werk-kop .case-inleiding { margin-top: 1.4rem; max-width: 52ch; }

.werkitem + .werkitem {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--line);
}

.werkitem-beeld {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-dim);
}

.werkitem-beeld img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease);
}

.werkitem:hover .werkitem-beeld img { transform: scale(1.02); }

.werkitem-body {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.2rem, 4vw, 3.5rem);
  align-items: start;
}


.werkitem-naam {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.05;
  font-weight: 300;
}

.werkitem-naam a {
  color: inherit;
  text-decoration: none;
}

.werkitem-naam a:hover { text-decoration: underline; text-underline-offset: 0.12em; }

.werkitem-kort { color: var(--gray); }

/* .case-deliverables en .case-link zijn voor de zwarte werksectie gemaakt;
   op deze lichte pagina moeten de kleuren om. */
.werkitem .case-deliverables { color: var(--ink); }
.werkitem .case-link { color: var(--ink); }
.werkitem .case-link::after { background: var(--ink); }
.werkitem .case-link-stil { color: var(--gray); }
.werkitem .case-link-stil::after { background: var(--gray); }

@media (max-width: 800px) {
  .werkitem-body { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Casepagina
   Zelfde vormtaal als de landingspagina, maar met een eigen ritme: hier staat
   de opbouw van één merk centraal in plaats van het werk als geheel.
   ========================================================================== */
.case-kop { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.case-terug {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.case-terug span { transition: transform 0.3s var(--ease); }
.case-terug:hover { color: var(--ink); }
.case-terug:hover span { transform: translateX(-4px); }

.case-titel {
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02;
  font-weight: 300;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.case-kop-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
}

/* Heet bewust niet .case-lead: die naam staat op de landingspagina al voor de
   grote, schermbrede case. Dezelfde klassenaam voor twee dingen betekende dat
   deze max-width de plaat daar tot 562px terugbracht. */
.case-inleiding {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--gray);
  max-width: 44ch;
}

/* De link in de kop staat op een lichte ondergrond; .case-link is ontworpen
   voor de zwarte werksectie, dus kleur en onderlijning hier omkeren. */
.case-kop-meta .case-deliverables { color: var(--ink); }
.case-kop-meta .case-link { color: var(--ink); }
.case-kop-meta .case-link::after { background: var(--ink); }

.case-tekst {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}

.case-tekst-body > p { color: var(--gray); }
.case-tekst-body > p + p { margin-top: 1.1rem; }

.case-punten {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.case-punten li {
  position: relative;
  padding-left: 1.2rem;
}

.case-punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray);
}

/* ---------- Het merk: de bouwstenen ---------- */
.section-merk { background: var(--paper-dim); }

.bouwstenen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.bouwstenen-twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bouwsteen {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
}

.bouwsteen-nr {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--gray);
}

.bouwsteen h3 {
  font-size: 1.2rem;
  margin: 0.5rem 0 0.6rem;
}

.bouwsteen > p {
  font-size: 0.92rem;
  color: var(--gray);
  margin-bottom: 1.6rem;
}

/* Naast elkaar lopen nummer, titel, tekst en artefact over de drie kaarten
   heen in dezelfde rijen (subgrid). Zo begint elk artefact, en het lijntje
   erboven, overal op dezelfde hoogte. Eerst stonden de artefacten onderaan
   (margin-top: auto); omdat ze niet even hoog zijn, stonden de lijntjes dan
   op verschillende hoogtes — zichtbaar op de SR Bikes-case. Zelfde regel als
   bij de werkwijze: row-gap op 0, de verdeling komt uit de marges. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .bouwstenen { grid-template-rows: repeat(4, auto); row-gap: 0; }
    .bouwsteen { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .bouwsteen > :last-child { margin-top: 0; align-self: start; }
  }
}

/* Het logo heeft zelf al een doorzichtige achtergrond; de crèmekleurige plaat
   die hier stond was mijn toevoeging en die wilde Axel weg. Het merk is warm
   bruin en leest prima op het witte vlak van de bouwsteen. */
.logo-vlak {
  margin: auto 0 0;
  background: transparent;
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-vlak img {
  width: 100%;
  height: auto;
  max-width: 260px;
}

/* Artefactvlakken op de SR Bikes-case. Hun merk is oranje op wit, dus anders
   dan bij Les Copeaux is er geen gekleurde ondergrond nodig — het vlak van de
   bouwsteen volstaat. Wel een rand bij de foto, want die loopt anders zonder
   grens over in het witte vlak. */
.sr-vlak {
  margin: auto 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.sr-vlak img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  /* Groot genoeg om de kaart te dragen: op 150px verdronk het teken in de
     witruimte die de onderuitlijning eronder laat. */
  max-width: 200px;
}

.sr-vlak-foto img {
  max-width: 100%;
  border-radius: var(--radius);
}

.stalen {
  margin-top: auto;
  display: grid;
  gap: 0.7rem;
  list-style: none;
}

.stalen li {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.85rem;
}

.staal {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 2px;
  background: var(--kleur);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 16, 0.12);
}

.stalen b { font-weight: 400; color: var(--ink-soft); }

.stalen code {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--gray);
}

/* Specimen in de échte letters van Les Copeaux. Stond hier eerst leeg met
   "wacht op de lettertypes": een specimen in de verkeerde letter is op een
   merkpagina ronduit misleidend. De namen zijn nu uitgelezen van hun live
   site en de snedes staan zelf gehost (zie de @font-face bovenaan). */
.specimen-lc {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 1.3rem;
}

.lc-display {
  font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.1rem, 4.2vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Krapper gezet dan de andere labels op de site: met 0,72rem en 0,18em viel
   "Cormorant Garamond · Light 300" over twee regels en bleef "300" alleen
   achter. Een bijschrift van twee regels leest als een fout. */
.lc-naam {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0.6rem 0 1.1rem;
}

.lc-naam-onder { margin-bottom: 0; }

.lc-body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- De site ---------- */
/* `position: relative` voor de piekkerf in de bovenrand — die stond eerst
   alleen op merk.php (daar bewéért de tekst dat elke donkere sectie hem
   heeft) en ontbrak dus op de casepagina's. Axel merkte dat op; nu draagt
   elke donkere sectie dezelfde kerf, ongeacht op welke pagina ze staat.
   De sectie erboven is overal `.section-merk` (paper-dim), dus de standaard
   vulkleur klopt. */
.section-site {
  position: relative;
  background: var(--ink);
  color: var(--inv-text);
}

.section-site .eyebrow { color: var(--inv-gray); }
.section-site .case-tekst-body > p { color: var(--inv-gray); }
.section-site .case-punten { color: var(--inv-text); }
.section-site .case-punten li::before { color: var(--inv-gray); }

/* ---------- Slot ---------- */
.case-slot { text-align: center; }
.case-slot .hero-cta { justify-content: center; margin-top: 2.2rem; }

@media (max-width: 900px) {
  .case-kop-body,
  .case-tekst { grid-template-columns: minmax(0, 1fr); }

  .bouwstenen { grid-template-columns: minmax(0, 1fr); }

  .logo-vlak,
  .stalen,
  .specimen-lc,
  .specimen-vol { margin-top: 1.2rem; }
}

/* ---------- Merkpagina ----------
   Geen casepagina: Studio Mooy staat niet in inc/cases.php en niet in het
   uitklapmenu. Deze pagina legt het systeem uit terwijl de bezoeker er
   middenin staat, dus wisselen uitleg en artefact elkaar af. De artefacten
   staan op een dekkend vlak zodat de ruggengraat erachter wegduikt in plaats
   van er dwars overheen te lopen. */
.merk-kop { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.merk-kop .case-inleiding { margin-top: 1.4rem; }

.merk-blok { padding-block: clamp(3.5rem, 7vw, 6rem); }
.merk-dim { background: var(--paper-dim); }

.merk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* Alleen de volgorde keert om, niet de verhouding — anders springt de
   kolombreedte van blok tot blok. */
.merk-grid-om { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }

/* Zelfde maat als .dienst-nr en .bouwsteen-nr: met 0,35em viel "01" uit
   elkaar tot "0 1". */
.merk-nr {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--gray);
  margin-bottom: 1rem;
}

.merk-tekst h2,
.merk-breed h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.merk-tekst p { color: var(--gray); }
.merk-tekst p + p { margin-top: 1rem; }

.merk-toon { display: grid; gap: 1rem; }

/* Podium voor het monogram en de piek: één rustig vlak in de tint van de
   sectie-tegenhanger, geen wit vierkant met een rand. Daaronder twee kleine
   tegels die laten zien dat het teken ook op donker en klein werkt. */
.merk-podium {
  background: var(--paper-dim);
  border-radius: var(--radius);
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  padding: clamp(1.8rem, 5vw, 3.2rem);
}
.merk-dim .merk-podium { background: var(--paper); }
.merk-podium img { width: 58%; max-width: 260px; height: auto; }

.merk-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.merk-tegel {
  position: relative;
  background: var(--paper-dim);
  border-radius: var(--radius);
  min-height: 6.5rem;
  display: grid;
  place-items: center;
  padding: 1.4rem 1rem 2.4rem;
}
.merk-dim .merk-tegel { background: var(--paper); }
.merk-tegel-donker { background: var(--ink); }
.merk-dim .merk-tegel-donker { background: var(--ink); }
.merk-tegel img { width: 3.2rem; height: auto; }
.merk-tegel img.merk-tegel-klein { width: 16px; }
.merk-tegel svg { width: 70%; max-width: 8rem; height: auto; display: block; }
.merk-tegel span {
  position: absolute;
  left: 0; right: 0; bottom: 0.8rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
}
.merk-tegel-donker span { color: var(--inv-gray); }

.merk-toon figcaption {
  font-size: 0.85rem;
  color: var(--gray);
}

/* Maatschets in dezelfde taal als het monogram: een massief inktvlak met een
   V-hap, de maten in grijs ernaast. */
.piek-schema { width: 100%; max-width: 380px; height: auto; display: block; }

.piek-vlak { fill: var(--ink); }
.piek-maat { fill: none; stroke: var(--gray); stroke-width: 1; }
.piek-hulp { fill: none; stroke: var(--gray); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.6; }

.piek-label {
  font-family: var(--font-display);
  font-size: 15px;
  fill: var(--gray);
}

.merk-breed { max-width: 60rem; }

.merk-kolommen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  color: var(--gray);
}

/* Wijst naar de lijn die op dit blok links naast de tekst loopt. Het enige
   voordeel dat een klantcase nooit heeft: het bewijs staat er al. */
.merk-wijs {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.merk-wijs-pijl {
  flex: none;
  position: relative;
  width: 2.6rem;
  height: 1px;
  background: var(--ink);
}

.merk-wijs-pijl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-left: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
}

/* Hetzelfde blok als het lege specimen op de casepagina van Les Copeaux,
   maar dan ingevuld: daar ken ik de letters niet, hier wel. */
.specimen-vol {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 1.3rem;
}

.specimen-woordmerk { display: block; width: 100%; height: auto; }

.specimen-groot {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1;
}

.specimen-reeks {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--gray);
  margin: 0.7rem 0 1.2rem;
}

.specimen-tekst {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.specimen-tekst span {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---------- Toepassingen (donkere sectie) ---------- */
.toepassingen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.8rem, 3.5vw, 2.8rem);
}

.toepassingen li {
  border-top: 1px solid var(--inv-line);
  padding-top: 1.1rem;
}

/* Was een CSS-teller in ::before; een pseudo-element kan het masker van de
   ruggengraat niet uitsparen, dus liep de lijn er dwars doorheen. */
.toepassing-nr {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--inv-gray);
  margin-bottom: 0.8rem;
}

.toepassingen b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.toepassingen span {
  display: block;
  font-size: 0.92rem;
  color: var(--inv-gray);
}

@media (max-width: 900px) {
  .merk-grid,
  .merk-grid-om { grid-template-columns: minmax(0, 1fr); }

  /* Op één kolom hoort de uitleg altijd vóór het artefact, ook in het
     omgekeerde blok. */
  .merk-grid-om .merk-tekst { order: 1; }
  .merk-grid-om .merk-toon { order: 2; }

  .merk-kolommen { grid-template-columns: minmax(0, 1fr); }
  .toepassingen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  /* Daar loopt de lijn vlak tegen de schermrand; een pijl van 2,6 rem zou er
     dwars doorheen steken in plaats van ernaar te wijzen. */
  .merk-wijs-pijl { display: none; }
}

@media (max-width: 620px) {
  .toepassingen { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Werkwijze ----------
   De pagina beweegt overal verticaal: de ruggengraat, de banden bij Diensten,
   de platen bij Werk. Een werkwijze is juist een beweging van links naar
   rechts, dus dit is de enige sectie die de horizontale as gebruikt: één lijn
   dwars door de vijf stappen, met de nummers eróp. */
.steps {
  /* Korpsgrootte van het nummer; de lijn ligt op exact de helft daarvan.
     Groot gezet omdat dit de enige sectie zonder beeld is: de cijfers zijn
     hier het beeld. Hiërarchie uit typografie, niet uit versiering. */
  --nr: clamp(2.8rem, 4.2vw, 4.2rem);
  --nrbox: 2.9rem;   /* breedte van het nummervak in de gestapelde variant */
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Rij-tussenruimte bewust op nul: met subgrid zou die bovenop de marges
     komen en dan verschilt de verdeling van de terugvalvariant. Eén model. */
  column-gap: clamp(0.9rem, 2.2vw, 1.8rem);
  row-gap: 0;
}

/* De lijst krijgt zelf .in voor de lijn, maar geen eigen fade — de stappen
   erbinnen verzorgen dat al. */
html.js .steps.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--nr) / 2);
  height: 1px;
  background: var(--line);
}

html.js .steps::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.15s var(--ease);
}

html.js .steps.in::before { transform: scaleX(1); }

/* De stappen komen na elkaar op, zodat de lijn ze onderweg lijkt af te
   leveren. */
html.js .steps .step:nth-child(2) { transition-delay: 0.2s; }
html.js .steps .step:nth-child(3) { transition-delay: 0.4s; }
html.js .steps .step:nth-child(4) { transition-delay: 0.6s; }
html.js .steps .step:nth-child(5) { transition-delay: 0.8s; }

/* Dekkende achtergrond: het nummer knipt de lijn weg en gaat er dus op staan
   in plaats van erdoor. */
.step-nr {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--nr);
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  padding-right: 0.7rem;
}

.step {
  display: flex;
  flex-direction: column;
}

/* De titel hoort dichter bij zijn eigen tekst te staan dan bij het nummer
   erboven — anders valt de groepering uit elkaar. */
.step h3 {
  font-size: 1.2rem;
  margin: 2.2rem 0 0.7rem;
}

.step p { font-size: 0.95rem; color: var(--ink-soft); }

/* Hier stond per stap ook een grijs "Van jou"-vlak. Weg op Axels verzoek: op
   de startpagina werd dat te veel uitleg voor een sectie die alleen het ritme
   van een project hoeft te tonen. Het staat nog volledig op werkwijze.php.
   Gevolg voor de opbouw: drie gedeelde rijen in plaats van vier, en de
   ondermarge van 2rem onder de tekst kon weg — die diende om het vlak los te
   zetten en was zonder dat vlak alleen nog dode ruimte. */

/* Subgrid deelt de drie rijen met de lijst, zodat nummers, titels en teksten
   over alle vijf kolommen op dezelfde hoogte liggen. Zonder subgrid valt het
   terug op de flexvariant hierboven. */
@supports (grid-template-rows: subgrid) {
  .steps { grid-template-rows: auto auto 1fr; }

  .step {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

/* Onder de vijf kolommen past geen rij meer: dan kantelt de reeks naar één
   kolom en wordt de lijn verticaal, nog steeds door de nummers heen. */
@media (max-width: 1100px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 0;
  }

  /* Eén kolom: de gedeelde rijen van subgrid hebben hier geen betekenis meer. */
  .step {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .steps::before {
    left: calc(var(--nrbox) / 2);
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
  }

  html.js .steps::before {
    transform: scaleY(0);
    transform-origin: top;
  }

  html.js .steps.in::before { transform: scaleY(1); }

  html.js .steps .step:nth-child(n) { transition-delay: 0s; }

  .step {
    position: relative;
    padding-left: calc(var(--nrbox) + 1.2rem);
    padding-block: 1.1rem;
  }

  .step-nr {
    position: absolute;
    left: 0;
    top: 1.1rem;
    width: var(--nrbox);
    padding: 0.2rem 0;
    font-size: 1.7rem;
    text-align: center;
  }

  .step h3 { margin-top: 0; }
}

/* ---------- Quote ---------- */
.section-quote {
  background: var(--paper-dim);
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

.quote { text-align: center; }

.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  max-width: 42ch;
  margin-inline: auto;
}

/* De volledige quote op de casepagina is vijf zinnen. Op displaygrootte
   wordt dat een muur, dus daar een maat kleiner en een regel breder — het
   blijft een citaat, maar het leest als tekst in plaats van als een kop. */
.quote-lang p {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  max-width: 54ch;
}

.quote cite {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray);
}

/* De link naar hun site hoort bij de bronvermelding: wie twijfelt of dit
   echt is, kan het in één klik nakijken. Dat is het verschil tussen een
   bewering en bewijs — dus hij moet als link herkenbaar zijn, niet als
   grijze tekst tussen de rest. */
.quote cite a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.15rem;
  transition: border-color 0.3s var(--ease);
}

.quote cite a:hover,
.quote cite a:focus-visible { border-bottom-color: var(--ink); }

/* ---------- Studio ---------- */
/* Tekst links op dezelfde linkerlijn als de rest van de pagina, het merk
   als doorkijk rechts. */
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.studio-copy { max-width: 34rem; }

/* ---------- Portret ----------
   Monochroom, want kleur is op deze site voorbehouden aan het werk van
   klanten. De fijne korrel geeft het portret textuur en vangt meteen de
   zachtheid op die ontstaat door het opschalen van de bronfoto.
   De bovenrand draagt het piekprofiel uit het monogram. */
.studio-photo {
  position: relative;
  margin: 0;
  width: clamp(210px, 26vw, 320px);
  aspect-ratio: 4 / 5;
  background: var(--paper-dim);
  /* Breedte 30% van het kader, diepte 0,40 × die breedte — dezelfde
     verhouding als de V tussen de twee vlakken van het monogram. */
  clip-path: polygon(0 0, 35% 0, 50% 9.6%, 65% 0, 100% 0, 100% 100%, 0 100%);
}

.studio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(1) contrast(1.07) brightness(1.02);
  /* Zelfde tempo als de breuklaag, anders lopen ze tijdens het lijmen
     uit elkaar en klopt alleen het eindbeeld. */
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
}

/* De S-breuk: rechts van de curve ligt hetzelfde beeld, een paar pixels
   verschoven en een tikje donkerder. De breuk wordt dus getekend door jouw
   eigen merk in plaats van door een filter. Bij hover schuift alles weer op
   zijn plaats — kijk je langer, dan komt hij scherp. */
.photo-slip {
  position: absolute;
  inset: 0;
  /* Een achtergrond kan geen <picture> gebruiken, maar `image-set()` doet
     hetzelfde: de browser pakt het eerste formaat dat hij kent. De gewone
     regel erboven blijft staan als vangnet voor wie `image-set()` niet
     begrijpt — die krijgt dan de JPEG. */
  background-image: url("../images/about-axel/axel-2-640.jpg");
  background-image: image-set(
    url("../images/about-axel/axel-2-640.avif") type("image/avif"),
    url("../images/about-axel/axel-2-640.webp") type("image/webp"),
    url("../images/about-axel/axel-2-640.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: 50% 42%;
  clip-path: url(#sm-s-right);
  /* Klein houden: bij een grote verschuiving verschijnt elke beeldkolom langs
     de naad twee keer, en dan lijkt het of er twee gezichten over elkaar
     liggen. Het toonverschil draagt nu het grootste deel van het signaal.
     JS leest deze waarde uit om het knippad ermee te compenseren. */
  --slip: 3px;
  transform: translateX(var(--slip));
  filter: grayscale(1) contrast(1.28) brightness(0.87);
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
  pointer-events: none;
}


.studio-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.24;
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}

/* Gelijmd: beide lagen krijgen exact dezelfde vergroting én dezelfde tint,
   anders blijft de naad zichtbaar hoe goed ze ook uitgelijnd zijn. Deze twee
   regels moeten dus altijd identiek blijven. */
.studio-photo:hover img,
.studio-photo:hover .photo-slip {
  transform: scale(1.035);
  filter: grayscale(1) contrast(1.14) brightness(1.06);
}

.studio-photo:hover::after { opacity: 0.1; }

/* Op een gsm: het portret over de volle kolombreedte en zonder S-breuk.
   Een vaste breedte van ~210px liet het links hangen met lucht ernaast. De
   breuk volgt de ruggengraat, en die loopt hier tegen de rechterrand; op die
   breedte werd het een dun streepje langs de rand van de foto in plaats van
   een zichtbare S. 4:3 is het formaat van de bronfoto, dus er wordt niets
   extra afgesneden. */
@media (max-width: 43.75em) {
  .studio-photo { width: 100%; aspect-ratio: 4 / 3; }
  .photo-slip { display: none; }
}

/* Letterwissel: het monogram ís de M van Mooy. Bewust één keer op de
   pagina, en iets onder cap-hoogte omdat het massieve vlak anders zwaarder
   weegt dan de ijle Jost eromheen. */
.mark-letter {
  display: inline-block;
  width: auto;
  height: 0.72em;
  vertical-align: baseline;
  margin-right: 0.08em;
  transform: translateY(0.01em);
}

.studio-copy h2 { margin-bottom: 1.4rem; }

.studio-copy > p { color: var(--gray); }

.studio-points {
  margin-top: 1.8rem;
  display: grid;
  gap: 0.7rem;
}

.studio-points li {
  padding-left: 1.4rem;
  position: relative;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.studio-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray);
}

/* ---------- FAQ ---------- */
.section-faq {
  background: var(--paper-dim);
  position: relative;
  overflow: hidden;
}

/* Het merk op ware grootte, half aflopend — aanwezigheid in een sectie die
   verder grafisch leeg is. */
.watermark {
  position: absolute;
  left: -7%;
  bottom: -14%;
  width: min(44vw, 600px);
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}


.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.faq-grid .section-head { margin-bottom: 0; }

.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.faq-item + .faq-item { margin-top: 0.75rem; }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  flex: 0 0 auto;
  position: relative;
  width: 14px; height: 14px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 100%; height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}

.faq-icon::after { transform: rotate(90deg); }

/* Zonder JS stuurt het open-attribuut het plusje, met JS de klasse die de
   animatie ook aanstuurt — anders draait het teken al terug terwijl het
   antwoord nog dichtklapt. */
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
html.js .faq-item[open] .faq-icon::after { transform: rotate(90deg); }
html.js .faq-item.uit .faq-icon::after { transform: rotate(0deg); }

.faq-body p {
  padding: 0 1.4rem 1.3rem;
  font-size: 0.95rem;
  color: var(--gray);
}

/* ---------- Openveren van een antwoord ----------
   Twee bewegingen over elkaar. De hoogte gaat van 0fr naar 1fr — vloeiend,
   maar een fr-waarde kán niet doorschieten, dus daar zit geen veer in. Die
   komt van de inhoud zelf: die schuift van boven naar binnen met een easing
   die voorbij het eindpunt gaat en terugveert. Het raster knipt af, dus je
   ziet het antwoord binnenvallen en zich zetten. */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
}

.faq-binnen { overflow: hidden; }

/* Zonder JS is het een gewone <details>: open betekent uitgeklapt. */
html:not(.js) .faq-item[open] .faq-body { grid-template-rows: 1fr; }

html.js .faq-body { transition: grid-template-rows 0.42s var(--ease); }

html.js .faq-binnen {
  transform: translateY(-22px);
  opacity: 0;
  transition: transform var(--veer-duur) var(--veer), opacity 0.26s linear;
}

html.js .faq-item.uit .faq-body { grid-template-rows: 1fr; }

html.js .faq-item.uit .faq-binnen {
  transform: translateY(0);
  opacity: 1;
}

/* ---------- Contact ---------- */
.section-contact {
  background: var(--ink);
  color: var(--inv-text);
  text-align: center;
  position: relative;
}

.section-contact .eyebrow { color: var(--inv-gray); }

/* Ook h1: op de bedankpagina is de kop van dit blok de hoofdkop van de
   pagina, elders is het een h2. Zelfde maat, want het is dezelfde rol. */
.contact-inner h1,
.contact-inner h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }

.contact-sub {
  margin: 1.5rem auto 0;
  color: var(--gray);
  max-width: 32rem;
}

/* ---------- Omgekeerde tekstkleuren op donkere secties ----------
   Deze drie klassen komen op allebei de ondergronden voor. Licht is nu de
   standaard; hier zetten de donkere secties hem om.

   WAAROM ZO EN NIET ANDERSOM: eerst stond de donkere kleur in de basisregel
   met losse correcties voor de lichte plekken. Die correcties dekten niet
   alles, en één ervan (`.contact-sub-licht`) stond bovendien vóór de regel
   die hij moest overschrijven — bij gelijke specificiteit wint de laatste,
   dus die heeft nooit iets gedaan. Gevolg: tekst op 2,45:1 waar 4,5:1 de
   norm is, precies boven de knop op de diensten- en merkpagina.

   Met licht als basis kan een nieuwe lichte sectie niet meer stilletjes fout
   staan: hooguit een nieuwe dónkere sectie, en die valt meteen op.

   Vijf van deze negen combinaties komen vandaag nergens voor (shot/dodecss.mjs
   meldt ze als dood). Ze blijven bewust staan: dit is een volledige matrix,
   geen toevallige verzameling. Krijgt een donkere sectie er ooit een van deze
   klassen bij, dan staat ze meteen goed — en precies dát ging hier eerder mis. */
.section-werk .case-facts,
.section-contact .case-facts,
.section-site .case-facts,
.section-werk .contact-sub,
.section-contact .contact-sub,
.section-site .contact-sub,
.section-werk .case-link-stil,
.section-contact .case-link-stil,
.section-site .case-link-stil { color: var(--inv-gray); }

.section-werk .case-link-stil::after,
.section-contact .case-link-stil::after,
.section-site .case-link-stil::after { background: var(--inv-gray); }

.contact-cta {
  margin-top: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}

.contact-mail {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--inv-gray);
  text-decoration: none;
  border-bottom: 1px solid var(--inv-line);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.contact-mail:hover { color: var(--inv-text); border-color: var(--inv-text); }

/* ==========================================================================
   Privacyverklaring
   Een leesdocument, geen verkooppagina: één smalle kolom, ruime tussenkoppen
   en verder niets dat afleidt.
   ========================================================================== */
.privacy-kop { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.privacy-kop .case-inleiding { margin-top: 1.4rem; }

.privacy-datum {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}

.privacy-tekst { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.privacy-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: 44rem;
}

.privacy-blok h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  font-weight: 300;
  margin-bottom: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.privacy-blok h3 {
  font-size: 1rem;
  font-weight: 400;
  margin: 1.8rem 0 0.6rem;
}

.privacy-blok p { color: var(--ink-soft); }
.privacy-blok p + p { margin-top: 0.9rem; }

.privacy-gegevens {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  line-height: 1.75;
}

.privacy-gegevens a { color: var(--ink); }

/* De grondslag is het stuk waar zo'n verklaring juridisch op rust; die hoort
   herkenbaar te zijn en niet weggestopt in een alinea. */
.privacy-grond {
  margin-top: 0.9rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--line);
  font-size: 0.92rem;
}

.privacy-grond span {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}

.privacy-lijst {
  margin-top: 1rem;
  list-style: none;
  display: grid;
  gap: 0.8rem;
  color: var(--ink-soft);
}

.privacy-lijst li {
  position: relative;
  padding-left: 1.4rem;
}

.privacy-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray);
}

.privacy-lijst b { font-weight: 500; }

/* Zelfde gestippelde markering als op de contactpagina: een gat hoort er als
   een gat uit te zien zolang het niet ingevuld is. */
.privacy-open {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
  font-size: 0.9rem;
  color: var(--gray);
}

.privacy-open span {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Onderrand van de voettekst ----------
   Rij 1: auteursrecht links, wettelijke links rechts. Rij 2: bedrijfsgegevens
   over de volle breedte, kleiner en gedempt. Zo staat er nooit een regel die
   halverwege afbreekt of een link die in een ander lettertype hangt. */
.footer-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; }
.footer-copy, .site-footer .footer-links a { color: var(--inv-gray); font-size: 0.85rem; }
.site-footer .footer-links a:hover { color: var(--inv-text); }
.footer-wettelijk {
  flex-basis: 100%;
  max-width: none;
  color: var(--inv-gray);
  font-size: 0.78rem;
  line-height: 1.6;
  opacity: 0.8;
}

/* ==========================================================================
   Foutpagina (404)
   Kort en bruikbaar: waar wilde je heen. Geen grap en geen illustratie — een
   foutpagina is het slechtste moment om leuk te doen.
   ========================================================================== */
.fout-kop { padding-block: clamp(4rem, 9vw, 7rem); }

.fout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.fout-kop .case-inleiding { margin-top: 1.4rem; }

.fout-lijst {
  list-style: none;
  margin-top: clamp(2.2rem, 4vw, 3rem);
  display: grid;
  gap: 0;
  max-width: 30rem;
}

.fout-lijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}

.fout-lijst li:last-child { border-bottom: 1px solid var(--line); }

.fout-lijst a {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}

.fout-lijst a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.fout-lijst a:hover::after,
.fout-lijst a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.fout-lijst span {
  font-size: 0.88rem;
  color: var(--gray);
}

.fout-noot {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  font-size: 0.9rem;
  color: var(--gray);
}

.fout-merk { justify-self: center; }

.fout-merk img {
  width: 100%;
  max-width: 200px;
  height: auto;
  /* Laag genoeg om watermerk te blijven: op 0,09 leest het massieve M-vlak
     als een grijs blok dat met de lijst eronder concurreert. */
  opacity: 0.06;
}

@media (max-width: 800px) {
  .fout-grid { grid-template-columns: minmax(0, 1fr); }
  .fout-merk { display: none; }
}

/* ==========================================================================
   Contactpagina
   Het formulier zelf blijft de donkere sectie van de startpagina — één vorm
   voor "hier stuur je iets". Wat eromheen staat is wat een sectie niet kan
   dragen: wanneer je antwoord krijgt, wat er in je bericht helpt, en de
   gegevens die er wettelijk moeten staan.
   ========================================================================== */
.contact-kop { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.contact-kop .case-inleiding { margin-top: 1.4rem; }

.contact-kop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}

.contact-punten {
  list-style: none;
  display: grid;
  gap: 1.3rem;
}

.contact-punten li {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.contact-punten b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.contact-punten span {
  display: block;
  font-size: 0.9rem;
  color: var(--gray);
}

/* Onder het formulier op de startpagina: een stille verwijzing naar wat er op
   de contactpagina extra staat. Bewust ná het formulier — wie hier al aan het
   typen is, moet niet weggestuurd worden. */
.contact-verder {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: 0.9rem;
  color: var(--inv-gray);
}

.contact-verder .case-link { margin-top: 0; margin-left: 0.6rem; }

.contact-gegevens-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}

.contact-gegevens .eyebrow { margin-bottom: 0.9rem; }

.contact-adres {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 0.7rem;
}

.contact-adres a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.1rem;
}

.contact-adres a:hover,
.contact-adres a:focus-visible { border-bottom-color: var(--ink); }

.contact-noot {
  font-size: 0.9rem;
  color: var(--gray);
}

.contact-noot + .contact-noot { margin-top: 0.7rem; }

/* Zolang de KBO- en btw-nummers ontbreken is dit een zichtbaar gat, en dat
   hoort het ook te zijn: het is wettelijk verplicht vóór de site live gaat. */
.contact-wettelijk {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
  font-size: 0.85rem;
  color: var(--gray);
}

.contact-wettelijk span {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .contact-kop-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .contact-gegevens-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Contactformulier ----------
   Staat op de zwarte sectie, dus velden zijn doorzichtig met een randlijn in
   plaats van witte vlakken — die zouden het rustige beeld openbreken. */
.contact-form {
  margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
  max-width: 44rem;
  text-align: left;
}

.form-rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}

.veld { margin-top: clamp(1rem, 2.5vw, 1.6rem); }
.form-rij .veld { margin-top: 0; }

.veld label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inv-gray);
}

.veld input,
.veld select,
.veld textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--inv-text);
  background: transparent;
  border: 1px solid var(--inv-line);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.veld textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}

/* De pijl van een select is niet te stylen; een eigen pijl als achtergrond
   wel, en dan past het vak bij de rest. */
.veld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--inv-gray) 50%),
                    linear-gradient(135deg, var(--inv-gray) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.75rem) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.veld select option { color: var(--ink); background: var(--paper); }

.veld input:hover,
.veld select:hover,
.veld textarea:hover { border-color: var(--inv-gray); }

/* Hier stond `outline: none`. Gemeten met shot/toetsenbord.mjs: de vier
   formuliervelden waren de enige elementen op de hele site zonder zichtbare
   focusring — precies daar waar iemand met het toetsenbord van veld naar veld
   springt en dus het hardst moet zien waar hij staat.

   De randkleur en het lichte vlak blijven: dat is de zachte aanduiding bij
   aanwijzen én bij typen. De ring erbovenop komt van de algemene
   `:focus-visible`-regel, die binnen `.section-contact` vanzelf licht wordt.
   Bij een muisklik op een tekstveld tonen browsers die ring ook — terecht,
   want daarna ga je typen. */
.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  border-color: var(--inv-text);
  background: rgba(245, 245, 242, 0.04);
}

.veld input::placeholder,
.veld textarea::placeholder { color: var(--inv-gray); }

.veld [aria-invalid="true"] { border-color: #b4736a; }

.veld-fout {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: #d29a92;
}

.form-melding {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--inv-line);
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--inv-text);
}

.form-melding-fout { border-color: #7a4b45; }
.form-melding a { color: var(--inv-text); }

.form-onder {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
}

/* Honeypot: moet in de DOM staan en invulbaar blijven voor bots, maar nooit
   zichtbaar of bereikbaar voor mensen. Daarom niet display:none — sommige
   bots slaan verborgen velden juist over. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .form-rij { grid-template-columns: minmax(0, 1fr); }
  .form-rij .veld + .veld { margin-top: 1rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: #0b0b0a;
  color: var(--inv-gray);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.footer-brand img { width: 180px; height: auto; }

.footer-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--inv-text);
  margin-bottom: 1.1rem;
}

.footer-nav ul,
.footer-contact ul { display: grid; gap: 0.55rem; }

.site-footer a {
  color: var(--inv-gray);
  text-decoration: none;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  transition: color 0.2s var(--ease);
}

.site-footer a:hover { color: var(--inv-text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--inv-line);
  font-size: 0.85rem;
}

/* ---------- Scroll-reveals (alleen met JS actief) ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

html.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 60em) {
  .werk-head { grid-template-columns: 1fr; gap: 2.5rem; }
  .studio-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  .case-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }

  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .section-head { margin-bottom: 0.5rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 48em) {
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 1.5rem var(--gutter) 2rem;
    transform: translateY(-115%);
    transition: transform 0.4s var(--ease), visibility 0.4s;
    visibility: hidden;
    z-index: 40;
  }

  .site-nav.open { transform: none; visibility: visible; }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }

  .site-nav a:not(.btn) { font-size: 1.15rem; }

  /* In een gestapeld paneel hoort het uitklapmenu de rest naar beneden te
     duwen in plaats van eroverheen te zweven. Dus geen zwevend venster maar
     een ingesprongen lijst die opengaat. */
  .nav-groep {
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem;
  }

  .nav-groep-knop { width: 1.6rem; height: 1.6rem; }

  /* `.site-nav .nav-sub` en niet kaal `.nav-sub`: de algemene regel
     `.site-nav ul { display: flex }` is specifieker en won, waardoor de
     uitklapmenu's op telefoon altijd open stonden en het pijltje niets
     deed (gevonden sep 2026). */
  .site-nav .nav-sub {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    margin: 0.2rem 0 0;
    padding: 0 0 0 1rem;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .site-nav .nav-groep.open .nav-sub {
    display: grid;
    gap: 0.9rem;
  }

  /* Zonder JS gewoon altijd uitgeklapt. Op een aanraakscherm bestaat hover
     niet en is er geen knop om op te duwen, dus openklappen zou hier nooit
     kunnen. In een gestapeld paneel kost het alleen wat hoogte — dat is een
     betere ruil dan twee links die er staan en niet werken. */
  html:not(.js) .nav-sub {
    display: grid;
    gap: 0.9rem;
  }

  html:not(.js) .nav-groep::after { display: none; }

  .nav-sub a { padding: 0; font-size: 1rem; }
  .nav-sub a:hover { background: none; }

  .nav-cta { margin-top: 0.5rem; }

  .nav-toggle { display: block; }

  /* De hero vult op een gsm het hele zichtbare scherm (100svh staat al in de
     basisregel). Voorheen stond hier min-height: auto, waardoor de volgende
     sectie opschoof en de hero onaf leek. */
  /* Typografie bovenaan, de lijn eronder. De kop is groot en vult de breedte;
     de ruimte onderaan is voor de grote S die zich daar tekent en de bezoeker
     naar beneden leidt (main.js). */
  .hero {
    align-items: flex-start;
    /* Onder de knoppen blijft ruimte voor de eerste bocht van de lijn */
    padding-block: calc(var(--header-h) + 2.5rem) 11rem;
  }

  .hero-sub { font-size: 1.12rem; }
  .hero-cta { margin-top: 2rem; }

  .steps { grid-template-columns: 1fr; max-width: 28rem; }

  .brand { gap: 0.55rem; }
  .brand-mark { width: 23px; }
  .brand-word { width: 128px; }
}

@media (max-width: 30em) {
  /* Compacte footer: logo bovenaan, navigatie en contact naast elkaar. Eén
     kolom rekte de footer op een gsm tot ruim twee schermen. */
  .site-footer { padding-top: 2.5rem; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem 1.25rem; padding-bottom: 1.75rem; }
  .footer-brand img { width: 120px; }
  .footer-title { margin-bottom: 0.7rem; letter-spacing: 0.22em; }
  .footer-nav ul, .footer-contact ul { gap: 0.2rem; }
  .site-footer a { display: inline-block; padding-block: 0.4rem; font-size: 0.9rem; }
  .footer-bottom { flex-direction: column; gap: 0.35rem; padding-block: 1rem; }
  .site-footer .footer-links a { font-size: 0.85rem; }
  .footer-wettelijk { flex-basis: auto; }
}

/* De hint hoort alleen bij de veegrij op een gsm */
.verwacht-hint { display: none; }

/* ---------- Studio op gsm: "Wat je mag verwachten" als veegkaarten ----------
   Vier kaarten van 2-4 zinnen, naast elkaar met scroll-snap. Een stukje van
   de volgende kaart blijft zichtbaar als hint dat je kunt vegen. Zonder
   horizontale paginascroll: alleen de rij scrolt. */
@media (max-width: 43.75em) {
  .verwacht-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    grid-template-columns: none;
    gap: 0.9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.2rem var(--gutter) 1rem;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    counter-reset: verwacht;
  }

  .verwacht-grid::-webkit-scrollbar { display: none; }

  .verwacht-grid .verwacht {
    counter-increment: verwacht;
    scroll-snap-align: start;
    padding: 1.3rem 1.3rem 1.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .verwacht-grid .verwacht::before {
    content: counter(verwacht, decimal-leading-zero);
    display: block;
    margin-bottom: 0.8rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--gray);
  }

  .verwacht-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.2rem;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray);
  }

  .verwacht-veeg { transition: opacity 0.4s var(--ease); }
  .verwacht-pijl { margin-left: 0.6rem; letter-spacing: 0; }
  .verwacht-hint.geveegd .verwacht-veeg { opacity: 0; }

  .verwacht-dots { display: flex; gap: 0.45rem; }

  .verwacht-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line);
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  }

  .verwacht-dots i.actief { background: var(--ink); transform: scale(1.25); }

  /* Een kaart die buiten beeld staat zou anders pas na het vegen opkomen */
  html.js .verwacht-grid .verwacht.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Tijdlijn op gsm: diensten en werkwijze ----------
   De ruggengraat loopt hier als tijdlijn langs de linkerrand (main.js,
   TIJDLIJN_X = 16px). De blokken krijgen links extra ruimte zodat ze de lijn
   niet bedekken, en elk blok een knoop op de lijn. */
@media (max-width: 43.75em) {
  .diensten-grid,
  .ww-stappen .container {
    padding-left: calc(var(--gutter) + 1.1rem);
  }

  .dienst,
  .ww-stap { position: relative; }

  /* Knoop: dekkend, dus hij ligt boven de lijn en onderbreekt hem netjes */
  .dienst::before,
  .ww-stap::before {
    content: "";
    position: absolute;
    left: calc(16px - var(--gutter) - 1.1rem - 5.5px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    z-index: 4;
  }

  .dienst::before { top: 1.6rem; }
  .ww-stap::before { top: calc(clamp(2.2rem, 4.5vw, 3.4rem) + 0.5rem); }

  /* Werkwijze: nummer en titel op één regel, de feiten als rustige kaart */
  .ww-stap {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    border-top: 0;
    padding-block: 1.4rem 1.6rem;
  }

  .ww-stap::before { top: 1.65rem; }

  .ww-stap-nr {
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    font-weight: 500;
    color: var(--gray);
  }

  .ww-stap-body h2 { font-size: 1.55rem; margin-bottom: 0.55rem; }

  .ww-stap-feiten {
    grid-column: 1;
    gap: 0.9rem;
    margin-top: 0.4rem;
    padding: 1rem 1.1rem;
    background: var(--paper-dim);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
}

/* Het merk in de FAQ zat op de gsm onderaan en -14% buiten beeld, zodat
   alleen de bovenkant zichtbaar was. Hier staat het rechtsboven en volledig. */
@media (max-width: 60em) {
  .watermark {
    left: auto;
    right: 1rem;
    bottom: auto;
    top: 1.5rem;
    width: min(46vw, 280px);
    opacity: 0.07;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .intro-screen { display: none; }

  html.js .hero-eyebrow,
  html.js .hero-sub,
  html.js .hero-cta { animation: none; opacity: 1; }

  html.js .hero-line > span { animation: none; transform: none; }

  html.js .brand { animation: none; opacity: 1; }

  /* Ruggengraat als rustige, volledig getekende lijn */
  .backbone-path {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  /* Scheidingslijnen staan er meteen, de kerf blijft */
  .track-rule path {
    transition: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .track-nr,
  .btn,
  .btn::after,
  .studio-photo img,
  .studio-photo::after,
  .photo-slip { transition: none; }

  /* Platen staan meteen open en het beeld schuift niet mee */
  .case-plate { transition: none; }
  .case-plate img { transform: none; }

  /* Werkwijzelijn staat er meteen, zonder trapsgewijs opkomen */
  html.js .steps::before {
    transform: none;
    transition: none;
  }

  html.js .steps .step { transition-delay: 0s; }

  /* Een FAQ-antwoord klapt meteen open, zonder veer. Het accordeongedrag
     (maar één vraag tegelijk) blijft wél staan: dat is functie, geen
     versiering. main.js sluit hier dan ook zonder wachttijd. */
  html.js .faq-body,
  html.js .faq-binnen,
  .faq-icon::before,
  .faq-icon::after { transition: none; }

  html.js .faq-binnen { transform: none; opacity: 1; }
}

/* Merkpagina, toepassingen: korte alinea in plaats van de lijst van zes */
.merk-toepassingen-kort { margin-left: 0; max-width: 38rem; }