/* ==========================================================================
   AEM Systems — hero
   ========================================================================== */

/* ==========================================================================
   Lettertypen — Geist en Geist Mono, lokaal gehost
   ==========================================================================
   Dit zijn exact de woff2-bestanden die Google Fonts uitleverde, met dezelfde
   unicode-ranges, zodat de weergave niet verandert. Alleen de subsets latin en
   latin-ext staan erin: elk teken dat op deze site voorkomt valt daarbinnen.
   (De enige uitzondering is de pijl ← in de blog-terugknop; die zit in geen
   enkele Geist-subset en viel dus altijd al terug op een systeemfont.)

   Gewicht 600 wordt op dit moment nergens gerenderd, maar staat er wel in: een
   ongebruikte @font-face wordt niet gedownload, en zo pakt een <strong> buiten
   de juridische pagina's straks een echte 600 in plaats van een nepvette.

   font-display: swap komt overeen met de &display=swap die in de oude
   Google-URL stond, zodat tekst tijdens het laden zichtbaar blijft.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-400-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: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-400-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: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-500-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: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-500-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: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-600-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: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-600-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: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-400-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: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-400-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: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-500-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: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-500-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;
}

:root {
  /* Vrijwel zwart: schemert de body ergens door een subpixel-kier tussen
     secties, dan valt dat niet op tegen de donkere sectiekleuren. */
  --bg: #030304;
  --white: #ffffff;
  --grey: #a8a8a8;
  --line: rgba(255, 255, 255, 0.25);
  --electric: #0080ff;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --inset: clamp(1.25rem, 6.5vw, 6.25rem);
  --nav-h: 4.375rem;
}

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

/* <picture> is alleen een omhulsel om <img> een webp-variant mee te geven.
   display: contents haalt het element uit de layout, zodat de <img> exact
   dezelfde flex-, grid- en positioneringscontext houdt als vóór de wrapper.
   Zonder deze regel wordt <picture> zelf het flex-/griditem en kan de
   weergave verschuiven. */
picture {
  display: contents;
}

html {
  color-scheme: dark;
  /* Nooit horizontaal scrollen: transforms (zoals de inschuivende
     dienstenkaarten) mogen de pagina niet breder maken. `clip` maakt
     geen scrollcontainer (sticky blijft werken); `hidden` is de
     fallback voor oudere browsers. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Paginaovergangen — fade-in bij laden, fade-out bij interne navigatie
   (main.js onderschept interne links en zet .page-leave op <html>)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* backwards-fill: na afloop bepaalt de gewone opacity weer, zodat de
     .page-leave-transition niet door de animatie wordt overschreven */
  html.js body {
    animation: page-in 0.4s ease backwards;
    transition: opacity 0.26s ease;
  }

  html.js.page-leave body {
    opacity: 0;
  }
}

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   Navigatie — volledig transparant, subtiele scheidingslijn onderaan
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 var(--inset);
  background: transparent;
  border-bottom: 1px solid var(--line);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.3s ease;
}

/* Verdwijnt bij omlaag scrollen, komt terug bij omhoog scrollen (main.js) */
.nav.nav--hidden {
  transform: translateY(-100%);
}

/* Alleen bovenaan de pagina volledig transparant; eenmaal gescrold krijgt
   de bar een donkere blur-achtergrond zodat hij overal leesbaar blijft. */
.nav.nav--solid {
  background: rgba(6, 6, 7, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (prefers-reduced-motion: reduce) {
  .nav {
    transition: none;
  }
}

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-link {
  color: var(--white);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.nav-cta {
  color: var(--white);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.28);
}

/* — Hamburger (alleen zichtbaar ≤900px) — */

/* — Taalwisselaar —
   NL staat op de root (aemsystems.nl/contact.html), EN onder /en/
   (aemsystems.nl/en/contact.html). Elke pagina linkt hard naar zijn eigen
   tegenhanger, zodat het zonder JavaScript werkt en per pagina klopt.
   Hij staat als flex-kind van .nav direct links van de consult-knop.
   margin-left:auto slokt de vrije ruimte op zodat hij tegen die knop
   aan komt te staan; .nav-links raakt daar niets van, want dat blok is
   absoluut gecentreerd en staat dus buiten de flex-stroom. Onder 900px
   verbergen we dit exemplaar — daar staat er al een in het menupaneel. */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: auto;
  margin-right: 1.25rem;
}

/* in het menupaneel geen auto-marge: daar is hij een gewoon blokelement */
.menu__panel .nav-lang {
  margin-left: 0;
  margin-right: 0;
}

.nav-lang__link {
  color: var(--grey);
  text-decoration: none;
  transition: color 0.25s ease;
}

.nav-lang__link:hover,
.nav-lang__link:focus-visible {
  color: var(--white);
}

.nav-lang__link.is-actief {
  color: var(--white);
}

.nav-lang__sep {
  color: rgba(255, 255, 255, 0.3);
}

/* in het mobiele menu: eigen regel met een hairline erboven */
.menu__panel .nav-lang {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
  gap: 0.75rem;
}

.nav-burger {
  display: none;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.nav-burger:hover {
  background: rgba(255, 255, 255, 0.18);
}

.nav-burger__bar {
  width: 1.125rem;
  height: 2px;
  border-radius: 1px;
  background: var(--white);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hamburger morpht naar een X zodra het menu open is */
.nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(1) {
  transform: translateY(0.28125rem) rotate(45deg);
}

.nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(2) {
  transform: translateY(-0.28125rem) rotate(-45deg);
}

/* ==========================================================================
   Mobiel menu — donker afgerond paneel onder de navbar (referentie: sanjaya)
   ========================================================================== */

.menu {
  position: fixed;
  inset: 0;
  z-index: 9; /* onder de navbar (10): logo + X blijven zichtbaar */
  visibility: hidden;
}

.menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 2, 0.78);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.menu__panel {
  position: absolute;
  top: calc(var(--nav-h) + 0.375rem);
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.75rem 1.25rem;
  border-radius: 1.5rem;
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(-0.625rem) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.menu__links a {
  align-self: flex-start;
  padding: 0.875rem 0;
  color: var(--white);
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.menu__cta {
  display: block;
  margin-top: 2rem;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  background: var(--white);
  color: #0a0a0a;
  text-align: center;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: background-color 0.25s ease;
}

.menu__cta:hover {
  background: #e2e2e2;
}

/* Links en CTA komen gestaggerd omhoog zodra het menu opent */
.menu__links a,
.menu__cta {
  opacity: 0;
  transform: translateY(0.625rem);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* — Open staat — */

.menu.is-open {
  visibility: visible;
}

.menu.is-open .menu__backdrop {
  opacity: 1;
}

.menu.is-open .menu__panel {
  opacity: 1;
  transform: none;
}

.menu.is-open .menu__links a,
.menu.is-open .menu__cta {
  opacity: 1;
  transform: none;
}

.menu.is-open .menu__links a:nth-child(1) { transition-delay: 0.08s; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.13s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.18s; }
.menu.is-open .menu__cta { transition-delay: 0.24s; }

/* Dicht: geen vertraging, en visibility pas ná de fade-out */
.menu {
  transition: visibility 0s linear 0.3s;
}

.menu.is-open {
  transition-delay: 0s;
}

/* Geen page-scroll zolang het menu open staat */
html.menu-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .menu__backdrop,
  .menu__panel,
  .menu__links a,
  .menu__cta,
  .nav-burger__bar {
    transition: none;
  }
}

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

/* ==========================================================================
   Scramble-hover (code-effect) — opgebouwd door js/main.js
   .sc-text  = originele label (houdt de breedte vast)
   .sc-run   = absolute overlay met scramble-tekens
   .sc-cursor = 2px blinkende cursorbalk aan de rechterkant
   ========================================================================== */

[data-scramble] {
  position: relative;
  white-space: nowrap;
}

[data-scramble] .sc-text {
  transition: opacity 0.1s ease;
}

[data-scramble].is-scrambling .sc-text {
  opacity: 0;
}

[data-scramble] .sc-run {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: none;
  white-space: pre;
}

.nav-cta[data-scramble] .sc-run {
  left: 1.25rem; /* gelijk aan padding-inline van de knop */
}

[data-scramble].is-scrambling .sc-run {
  display: block;
}

/* Ook gebruikt door het load-decode-effect ([data-decode]) op de contactpagina */
.sc-glyph {
  color: var(--electric);
  text-shadow: 0 0 12px rgba(0, 128, 255, 0.75);
}

[data-scramble] .sc-cursor {
  position: absolute;
  top: 50%;
  right: -0.5rem;
  transform: translateY(-50%);
  width: 2px;
  height: 1.05em;
  background: var(--electric);
  box-shadow: 0 0 8px rgba(0, 128, 255, 0.9);
  opacity: 0;
}

.nav-cta[data-scramble] .sc-cursor {
  right: 0.75rem;
}

/* Witte CTA-knoppen (.page__cta): zelfde scramble-effect, maar het label
   is gecentreerd — de overlay centreert mee en de cursor staat in de
   tekststroom direct achter het label. Nieuwe knoppen van dit type
   krijgen het effect automatisch door data-scramble toe te voegen. */
/* Flexbox centreert label + cursor betrouwbaar op één as
   (vertical-align op inline-blocks is hier onvoorspelbaar). */
.page__cta[data-scramble],
.contact-form__submit[data-scramble] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.page__cta[data-scramble] .sc-run,
.contact-form__submit[data-scramble] .sc-run {
  left: 50%;
  transform: translate(-50%, -50%);
}

.page__cta[data-scramble] .sc-cursor,
.btn-ghost[data-scramble] .sc-cursor,
.contact-form__submit[data-scramble] .sc-cursor {
  position: static;
  transform: none; /* heft de translateY(-50%) van de basisregel op */
  height: 0.95em;
}

/* Blauwe gloed subtieler op de witte knop */
.page__cta[data-scramble] .sc-glyph,
.contact-form__submit[data-scramble] .sc-glyph {
  text-shadow: 0 0 8px rgba(0, 128, 255, 0.35);
}

/* Cursor blinkt alleen op apparaten met echte hover (touch houdt :hover
   vast na een tik) en nooit bij prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    [data-scramble]:hover .sc-cursor {
      animation: sc-blink 0.9s steps(2, jump-none) infinite;
    }
  }

  [data-scramble]:focus-visible .sc-cursor {
    animation: sc-blink 0.9s steps(2, jump-none) infinite;
  }
}

@keyframes sc-blink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/video/aem-hero-poster.jpg") center / cover no-repeat;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* onderrand loopt volledig dicht naar de paginakleur, zodat de
       hero naadloos vervloeit in de laptopsectie eronder */
    linear-gradient(to top, #030304 0%, #030304 2%, rgba(3, 3, 4, 0) 24%),
    radial-gradient(90% 75% at 0% 0%, rgba(0, 0, 0, 0.62), transparent 62%),
    radial-gradient(75% 60% at 100% 0%, rgba(0, 0, 0, 0.52), transparent 62%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 36%),
    rgba(0, 0, 0, 0.08);
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(2rem, 5.5vh, 3.5rem)) var(--inset) clamp(2.5rem, 6.5vh, 4.5rem);
}

/* — Links boven: diensten in mono — */

.hero-services {
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

/* — Rechts boven: intro — */

.hero-intro {
  position: absolute;
  top: calc(var(--nav-h) + clamp(2rem, 5.5vh, 3.5rem));
  right: var(--inset);
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  color: #e8e8e8;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.35);
  text-wrap: balance;
}

/* — Links onder: headline — */

.hero-headline {
  margin-top: auto;
  /* Gegarandeerde minimale afstand tot de intro erboven, ook op lage
     (landscape-mobiel) viewports waar margin-top: auto tot 0 krimpt. */
  padding-top: 2rem;
  font-size: clamp(2.5rem, 3.9vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--white);
}

/* ==========================================================================
   Contactpagina — design naar sanjaya.framer.ai/contact
   ========================================================================== */

.contact {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #030304;
}

.contact__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/img/contact-bg.jpg") center / cover no-repeat;
}

/* De referentie is vrijwel zwart; onze foto is licht, dus een stevige
   maar gelaagde scrim houdt de bergen zichtbaar en de tekst leesbaar. */
.contact__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, #030304 0%, #030304 1%, rgba(3, 3, 4, 0) 12%),
    linear-gradient(to right, rgba(2, 2, 4, 0.82), rgba(2, 2, 4, 0.55) 55%, rgba(2, 2, 4, 0.62)),
    linear-gradient(to top, rgba(2, 2, 4, 0.85) 0%, rgba(2, 2, 4, 0.25) 55%),
    rgba(2, 2, 4, 0.3);
}

.contact__content {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: clamp(2rem, 6vw, 5rem);
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(2rem, 6vh, 3.75rem)) var(--inset) clamp(2rem, 5vh, 3.5rem);
}

.contact__left {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-width: 32rem;
}

/* Badge-stijl (overal gebruikt): donkergrijze chip met wit accentbalkje
   aan de linkerkant, strakke hoeken. */
.contact-chip {
  align-self: flex-start;
  width: fit-content; /* nooit oprekken, ook buiten flex-containers */
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(32, 32, 36, 0.85);
  border-left: 3px solid rgba(255, 255, 255, 0.9);
  padding: 0.4375rem 0.875rem;
  border-radius: 0;
}

.contact-title {
  margin-top: 1.5rem;
  /* de hoogte tijdens het typen wordt in main.js exact gereserveerd op
     basis van de echte tekst; 1em is alleen het vangnet zonder JS */
  min-height: 1em;
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--white);
}

/* Typ-cursor van het type-on effect (wit, zoals de referentie) */
.to-cursor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 0.08em;
  background: var(--white);
  /* iets onder de basislijn zodat de balk niet boven de kapitalen uitsteekt */
  vertical-align: -0.1em;
}

.to-cursor.is-done {
  animation: sc-blink 0.7s steps(2, jump-none) 2 both;
}

@media (prefers-reduced-motion: reduce) {
  .to-cursor {
    display: none;
  }
}

.contact-lede {
  margin-top: 1.25rem;
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--grey);
}

/* — Formulier rechts — */

.contact-form {
  flex: 0 1 36rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: rgba(3, 2, 6, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

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

.field__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.5rem;
}

.field__input {
  width: 100%;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #101014;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.field__input::placeholder {
  color: var(--grey);
}

.field__input:focus {
  outline: none;
  border-color: var(--electric);
}

.field__textarea {
  resize: vertical;
  min-height: 6.25rem;
}

.contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 0.25rem;
}

.contact-form__note {
  max-width: 14rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--grey);
}

.contact-form__note a {
  color: var(--white);
  text-decoration: none;
}

.contact-form__note a:hover {
  text-decoration: underline;
}

.contact-form__submit {
  flex: 0 0 auto;
  min-width: 12rem;
  padding: 0.875rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--white);
  color: #0a0a0a;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.contact-form__submit:hover {
  background: #e2e2e2;
}

/* — Entrance contactpagina: chip -> (H1 typt via JS) -> lede/kaart/formulier — */

@media (prefers-reduced-motion: no-preference) {
  .contact-chip,
  .contact-lede,
  .contact-form {
    animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .contact-chip { animation-delay: 0.15s; }
  .contact-lede { animation-delay: 0.55s; }
  .contact-form { animation-delay: 0.45s; }

  .contact-form .field {
    animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* nth-of-type, niet nth-child: de spamval is ook een kind van het
     formulier en zou de telling verschuiven. Met nth-child kreeg alleen
     "Volledige naam" een vertraging en schoven de andere drie op 0s in —
     de velden kwamen in omgekeerde volgorde binnen. De .field-wrappers zijn
     div's en de spamval is een input, dus tellen per elementtype pakt
     precies de zichtbare velden. Blijft ook kloppen als er later een
     verborgen veld bij komt. */
  .contact-form .field:nth-of-type(1) { animation-delay: 0.55s; }
  .contact-form .field:nth-of-type(2) { animation-delay: 0.62s; }
  .contact-form .field:nth-of-type(3) { animation-delay: 0.69s; }
  .contact-form .field:nth-of-type(4) { animation-delay: 0.76s; }
  .contact-form .field:nth-of-type(5) { animation-delay: 0.83s; }
  .contact-form .contact-form__footer { animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }
}

/* — Contact responsief — */

@media (max-width: 56.25em) {
  .contact__content {
    flex-direction: column;
    align-items: stretch;
  }

  .contact__left {
    max-width: none;
  }

  .contact-form {
    flex-basis: auto;
  }

  .contact-form__footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .contact-form__note {
    max-width: none;
  }
}

/* ==========================================================================
   Entrance (subtiel, respecteert reduced motion)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .nav,
  .hero-services li,
  .hero-intro,
  .hero-headline {
    animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .nav { animation-name: fade-in; animation-delay: 0.15s; }
  .hero-services li:nth-child(1) { animation-delay: 0.25s; }
  .hero-services li:nth-child(2) { animation-delay: 0.32s; }
  .hero-services li:nth-child(3) { animation-delay: 0.39s; }
  .hero-services li:nth-child(4) { animation-delay: 0.46s; }
  .hero-services li:nth-child(5) { animation-delay: 0.53s; }
  .hero-services li:nth-child(6) { animation-delay: 0.6s; }
  .hero-intro { animation-delay: 0.45s; }
  .hero-headline { animation-delay: 0.35s; }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(0.875rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   Placeholder-pagina's (projecten, over ons, privacy, voorwaarden, 404)
   ========================================================================== */

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 3rem) var(--inset) 4rem;
  background:
    radial-gradient(60% 50% at 80% 8%, rgba(0, 128, 255, 0.06), transparent 60%),
    #060607;
}

.page .contact-lede {
  margin-top: 1.25rem;
}

.page__cta {
  align-self: flex-start;
  margin-top: 2.25rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  background: var(--white);
  color: #0a0a0a;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: background-color 0.25s ease;
}

.page__cta:hover {
  background: #e2e2e2;
}

/* ==========================================================================
   FAQ — accordion op de homepage (stijl naar sanjaya)
   ========================================================================== */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  padding: clamp(5rem, 12vh, 8rem) var(--inset);
  /* Inhoud gecentreerd in een smallere kolom (referentie: sanjaya-FAQ);
     de achtergrond blijft de volle breedte vullen. */
  padding-inline: max(var(--inset), calc((100% - 64rem) / 2));
  background: #060607;
}

.faq__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.faq__title {
  margin-top: 1.5rem;
  font-size: clamp(2rem, 3.35vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: var(--white);
}

.faq__left .contact-lede {
  margin-top: 1.25rem;
  max-width: 20rem;
}

.faq__left .page__cta {
  margin-top: 2rem;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__item {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.75rem;
  background: #0c0c0f;
  transition: border-color 0.25s ease;
}

.faq__item.is-open {
  border-color: rgba(255, 255, 255, 0.14);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--white);
}

/* Plus-icoon: twee balkjes; draait naar een wit kruis zodra open. */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 2px;
  border-radius: 1px;
  background: var(--white);
  transform: translate(-50%, -50%);
  transition: background-color 0.25s ease;
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer-inner {
  overflow: hidden;
}

.faq__answer-inner p {
  padding: 0 1.5rem 1.25rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--grey);
}

@media (prefers-reduced-motion: reduce) {
  .faq__answer,
  .faq__icon {
    transition: none;
  }
}

@media (max-width: 56.25em) {
  .faq {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ==========================================================================
   Blog — overzicht (referentie: sanjaya/blog) en artikelpagina's
   ========================================================================== */

.blog-hero,
.projects-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52vh;
  min-height: 52svh;
  padding: calc(var(--nav-h) + 4rem) var(--inset) 4rem;
  overflow: hidden;
  isolation: isolate;
}

.blog-hero__media,
.projects-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/img/contact-bg.jpg") center 30% / cover no-repeat;
}

/* Vrijwel zwart met een vaag zichtbaar landschap; onderrand loopt
   dekkend over in de grid-achtergrond (#060607). */
.blog-hero__scrim,
.projects-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, #060607 0%, #060607 2%, rgba(6, 6, 7, 0) 40%),
    radial-gradient(80% 90% at 50% 0%, rgba(2, 2, 4, 0.82), rgba(2, 2, 4, 0.6) 100%),
    rgba(2, 2, 4, 0.3);
}

.blog-hero .contact-chip,
.projects-hero .contact-chip {
  align-self: center;
}

.blog-hero .contact-lede,
.projects-hero .contact-lede {
  margin-top: 1.25rem;
  max-width: 34rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: 1rem var(--inset) clamp(4rem, 9vh, 6rem);
  background: #060607;
}

.blog-card {
  display: block;
  text-decoration: none;
  color: var(--white);
}

.blog-card__imgwrap {
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  aspect-ratio: 16 / 9;
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card:hover .blog-card__img {
  transform: scale(1.04);
}

.blog-card__meta {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.blog-card__title {
  margin-top: 0.625rem;
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.blog-card:hover .blog-card__title {
  color: #c9c9c9;
}

@media (max-width: 68.75em) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 43.75em) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* — Het probleem: lichtdraden die samenkomen —
   Drie knelpunten lopen als lichtdraden naar één punt. De sectie is
   hoger dan het venster en het frame plakt vast, zodat er scrollruimte
   is waarin de draden zich tekenen en de tekst verschijnt.

   Het licht (kern + horizon) en de kop staan er ALTIJD: die vormen de
   rustpunten van de sectie. Alleen de draden en de labels komen mee met
   het scrollen.

   --p is de scrollvoortgang (0-1), gezet door main.js; --p-lijn is de
   deelvoortgang van de draden, ook in JS berekend — betrouwbaarder dan
   clamp() in de CSS, waar een rekenfout de draden onzichtbaar zou maken.
   De CSS gaat uit van 1, dus zonder JS staat alles compleet. */
.licht {
  --p: 1;
  --p-lijn: 1;
  position: relative;
  background: var(--bg);
}

.licht__frame {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* Overgang naar de dienstensectie — zelfde recept als tussen .cta en de
   footer: de bovenste sectie loopt zelf dicht naar exact de kleur van de
   sectie eronder, en die krijgt 1px overlap tegen subpixel-kieren.

   Deze laag ligt BOVEN de draden, de bol en de horizon (z-index: 1), niet
   erachter. Dat is het verschil met de vorige poging: een laag erachter
   kan de rechte afsnijding van de gloed aan de framerand niet wegwerken,
   want die gloed wordt er juist overheen getekend. Kop en labels staan
   met z-index: 2 weer boven het verloop. */
.licht__frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(6, 6, 7, 0) 0%,
    rgba(6, 6, 7, 0.55) 38%,
    rgba(6, 6, 7, 0.92) 70%,
    #060607 100%);
  pointer-events: none;
}

/* Scrollruimte + plakkend frame op ELK formaat: de animatie hoort ook op
   een telefoon te spelen. Daar iets korter, zodat de sectie niet
   onevenredig lang wordt op een klein scherm. */
.licht {
  min-height: 135vh;
}

.licht__frame {
  position: sticky;
  top: 0;
}

@media (min-width: 56.3em) {
  .licht {
    min-height: 150vh;
  }
}

/* — De draden —
   preserveAspectRatio="none" is bewust: daarmee valt SVG-coördinaat
   x/1440 exact samen met x% van het frame, zodat de labels op elke
   schermverhouding precies op het uiteinde van hun draad staan. De
   vervorming die dat geeft is bij zachte curven niet te zien. */
.licht__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.licht__gloed,
.licht__lijn {
  fill: none;
  stroke-linecap: round;
  /* pathLength=1, dus de offset loopt van 1 (onzichtbaar) naar 0 (vol) */
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p-lijn));
}

.licht__gloed {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 7;
}

.licht__lijn {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.1;
}

.licht__lijn--dun {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 0.8;
}

/* — Het convergentiepunt en de horizon —
   Radiale verlopen op gewone elementen, geen SVG-filter: die zou bij
   elke frame opnieuw gerasterd moeten worden terwijl de lijnen groeien. */
.licht__kern {
  position: absolute;
  left: 50%;
  /* 84% i.p.v. 92%: de gloed is pas transparant op 114px van het midden,
     en werd op 92% dus 47px te vroeg door de framerand afgesneden. Die
     rechte afsnijding was de zichtbare streep boven de diensten. */
  top: 84%;
  width: 26rem;
  height: 26rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.35) 6%,
    rgba(214, 228, 246, 0.12) 16%,
    transparent 55%);
  pointer-events: none;
}

.licht__horizon {
  position: absolute;
  left: 50%;
  top: 84%;
  width: 150%;
  height: 2px;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 30%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.5) 70%,
    transparent 100%);
  pointer-events: none;
}

/* — Kop: staat er altijd, net als het licht waar de draden uit komen.
   Alleen de draden en de labels komen mee met het scrollen. — */
.licht__kop {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: min(90%, 46rem);
  text-align: center;
  font-size: clamp(1.75rem, 4.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.licht__kop span {
  display: block;
}

.licht__kop-zacht {
  color: var(--grey);
}

.licht__kop-sterk {
  color: var(--white);
  font-weight: 500;
}

/* — Labels bij de uiteinden van de draden — */
.licht__labels {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

/* Posities in de CSS, niet inline in de HTML: een inline custom property
   wint van elke stylesheetregel, waardoor de mobiele posities hieronder
   nooit zouden aankomen. */
.licht__labels > :nth-child(1) { --lx: 17%; --ly: 21%; }
.licht__labels > :nth-child(2) { --lx: 82%; --ly: 15%; }
.licht__labels > :nth-child(3) { --lx: 80%; --ly: 63%; }

.licht__label {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4375rem 0.875rem 0.4375rem 0.5rem;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem;
  background: rgba(14, 14, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  /* per label iets later in beeld, in de volgorde van de draden */
  opacity: clamp(0, calc((var(--p-lijn) - 0.34) * 5 - var(--i) * 0.55), 1);
}

.licht__punt {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 0.3125rem rgba(255, 255, 255, 0.12),
              0 0 1.25rem 0.125rem rgba(255, 255, 255, 0.55);
}

@media (max-width: 56.25em) {
  /* De labels staan hier niet op hun draaduiteinde (die vallen op een
     smal scherm deels buiten beeld) maar op vaste, leesbare plekken. */
  /* labels zijn op een telefoon breder dan de ruimte rond hun
     percentagepunt; daarom tegen de randen leggen i.p.v. centreren */
  .licht__label {
    transform: none;
  }

  .licht__labels > :nth-child(1) { --lx: 1.25rem; --ly: 16%; left: var(--lx); }
  .licht__labels > :nth-child(2) { --lx: auto; --ly: 26%; left: auto; right: 1.25rem; }
  .licht__labels > :nth-child(3) { --lx: auto; --ly: 70%; left: auto; right: 1.25rem; }



  .licht__kop {
    top: 40%;
    font-size: clamp(1.5rem, 7.2vw, 2.25rem);
  }

  .licht__kern {
    width: 18rem;
    height: 18rem;
  }
}

@media (max-width: 26.25em) {
  .licht__label {
    font-size: 0.625rem;
    gap: 0.5rem;
  }

  .licht__labels > :nth-child(1) { --ly: 15%; }
  .licht__labels > :nth-child(2) { --ly: 25%; }
  .licht__labels > :nth-child(3) { --ly: 72%; }
}

/* — Diensten: sticky kop links, gestapelde kaarten rechts
     (referentie: sanjaya services) — */

.services {
  /* 1px overlap met de lichtsectie erboven: voorkomt dat er een haarlijn
     door een subpixel-kier schemert. Zelfde truc als .cta gebruikt. */
  margin-top: -1px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding: clamp(4.5rem, 10vh, 7rem) var(--inset);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
  background: #060607;
  /* de naar rechts wachtende kaarten niet buiten de sectie laten steken
     (clip: geen scrollcontainer, dus de sticky kop blijft werken) */
  overflow-x: clip;
}

/* Kop links blijft plakken terwijl de kaarten rechts voorbij scrollen */
.services__head {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  align-self: start;
}

.services__title {
  margin-top: 1.5rem;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--white);
}

.services__head .contact-lede {
  margin-top: 1.25rem;
  max-width: 26rem;
}

.services__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Kaart: tekst links (met subdiensten-lijst onderin), afbeelding rechts */
.service {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  padding: clamp(1rem, 1.5vw, 1.25rem);
  border-radius: 0.75rem;
  background: #1a1a1d; /* zelfde kaartkleur als de referentiesectie */
}

.service__body {
  padding: clamp(0.5rem, 1vw, 0.75rem);
}

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

.service__tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--grey);
}

.service__name {
  margin-top: 2rem;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.1;
  color: var(--white);
}

.service__desc {
  margin-top: 0.875rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--grey);
  max-width: 44rem;
}

/* Subdiensten: mono-lijst met haarlijntjes, onderin de tekstkolom */
.service__points {
  list-style: none;
  margin-top: auto;
  padding-top: 3rem;
}

.service__points li {
  padding: 1.0625rem 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d6d6d6;
}

.service__points li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.service__imgwrap {
  border-radius: 0.5rem;
  overflow: hidden;
  min-height: 18rem;
}

.service__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.service:hover .service__img {
  transform: scale(1.03);
}

@media (max-width: 56.25em) {
  /* Mobiel: kop boven de kaarten (geen twee kolommen, geen sticky) */
  .services {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .services__head {
    position: static;
  }

  /* Mobiel: tekst boven, afbeelding eronder */
  .service {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  .service__points {
    padding-top: 2rem;
  }

  .service__imgwrap {
    min-height: 0;
    aspect-ratio: 1 / 1.05; /* mobiel hoger beeld, zoals de referentie */
  }
}

/* ==================================================================
   Projecten (home) — gecentreerde kop + sticky kaartenstapel
   (referentie: sanjaya "Our works"). Elke kaart blijft onder de nav
   plakken en wordt door de volgende overdekt; de kaarten eronder
   wijken terug via scale + omhoog (zie .projecten__stack in main.js).
   Kaartmaten uit de referentie: 1240x720 met een beeldkolom van 588
   (47,4%), radius 12px, kaartkleur #1a1a1d, tekstkolom padding 32px
   met space-between.
   ================================================================== */

.projecten {
  padding: clamp(4.5rem, 10vh, 7rem) var(--inset);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
  /* dekkende basis: gelijk aan de buren, voorkomt naadlijntjes */
  background: #060607;
  /* de terugwijkende kaarten mogen nooit horizontaal laten scrollen */
  overflow-x: clip;
}

.projecten__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.projecten__head .contact-chip {
  align-self: center;
}

.projecten__title {
  margin-top: 1.5rem;
  max-width: 24ch;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--white);
}

.projecten__head .contact-lede {
  margin-top: 1.5rem;
  max-width: 34rem;
}

/* position: relative maakt de stapel het referentiekader voor de
   sticky kaarten én de offsetParent waaruit main.js de natuurlijke
   (niet-getransformeerde) posities leest. */
.projecten__stack {
  position: relative;
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}

.project {
  position: sticky;
  /* zelfde afstand als de referentie: nav + 30px */
  top: calc(var(--nav-h) + 1.875rem);
  display: flex;
  /* verhouding van de referentiekaart (1240x720); daarmee komt de
     beeldkolom automatisch op 588/720 uit, op elke breedte */
  aspect-ratio: 1240 / 720;
  min-height: 26rem; /* vangnet als de tekst meer ruimte nodig heeft */
  border-radius: 0.75rem;
  background: #1a1a1d;
  overflow: hidden;
}

/* tussenruimte in de flow: bepaalt hoe lang een kaart blijft staan
   voordat de volgende hem overdekt */
.project + .project {
  margin-top: 7.5rem;
}

.project__media {
  position: relative;
  flex: 0 0 47.4%;
}

.project__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 2.2vw, 2rem);
}

.project__top {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.project__cat {
  color: var(--white);
}

.project__dot {
  opacity: 0.5;
}

/* klantlogo's wit uitgerenderd, net als in de referentiesectie */
.project__logo {
  display: block;
  margin-top: 1.5rem;
  height: 1.75rem;
  width: auto;
  max-width: 65%;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.project__name {
  font-size: clamp(1.5rem, 2.6vw, 2.375rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.2;
  color: var(--white);
}

.project__desc {
  margin-top: 0.875rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--grey);
}

.project__bottom .btn-ghost {
  margin-top: 1.5rem;
}

.projecten__foot {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* Mobiel/tablet: beeld boven de tekst en gewoon onder elkaar — de
   stapel-effecten staan uit, precies zoals in de referentie. */
@media (max-width: 56.25em) {
  .project {
    position: static;
    flex-direction: column;
    aspect-ratio: auto;
    min-height: 0;
  }

  .project + .project {
    margin-top: 2rem;
  }

  .project__media {
    flex: none;
    /* portretverhouding van de mockups: niets wordt afgesneden */
    aspect-ratio: 4 / 5;
  }

  .project__body {
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .project__name {
    font-size: 1.375rem;
  }

  .projecten__foot {
    margin-top: 2.5rem;
  }
}

/* ==================================================================
   Hoe het werkt (home) — gecentreerde kop + drie stapkaarten in een
   trapsgewijze rij (referentie: sanjaya "How it works"). De kaarten
   staan bij binnenkomst 50/100/150px verspringend en schuiven naar
   één lijn tijdens het scrollen; zie [data-stair] in main.js.
   ================================================================== */

.werkwijze {
  padding: clamp(4.5rem, 10vh, 7rem) var(--inset);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
  /* dekkende basis: gelijk aan de buren, voorkomt naadlijntjes */
  background: #060607;
  /* de verschoven kaarten mogen nooit horizontaal laten scrollen */
  overflow-x: clip;
}

.werkwijze__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* de chip heeft width: fit-content, dus centreren via align-self */
.werkwijze__head .contact-chip {
  align-self: center;
}

.werkwijze__title {
  margin-top: 1.5rem;
  max-width: 24ch;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--white);
}

.werkwijze__head .contact-lede {
  margin-top: 1.5rem;
  max-width: 34rem;
}

.werkwijze__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}

.werkwijze__step {
  /* main.js zet hier de trapverschuiving via translate3d */
  will-change: transform;
}

/* Zolang de trap actief is heeft de laatste kaart tot 150px extra
   ruimte nodig; een ondergrens op de onderpadding houdt hem ook op
   lage schermen binnen de sectie (en ligt op de 100px van de
   referentie). */
@media (min-width: 56.3em) {
  .werkwijze {
    padding-bottom: clamp(6rem, 10vh, 7rem);
  }
}

.werkwijze__imgwrap {
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  aspect-ratio: 397 / 379; /* verhouding van de referentiekaarten */
}

.werkwijze__img,
.werkwijze__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.werkwijze__step-title {
  margin-top: 1.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--white);
}

.werkwijze__step-desc {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--grey);
}

/* Mobiel/tablet: gestapeld en recht onder elkaar, zoals de referentie
   (de trapverschuiving wordt in main.js uitgezet onder 56.3em). */
@media (max-width: 56.25em) {
  .werkwijze__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 2.75rem;
  }

  .werkwijze__step {
    will-change: auto;
  }
}

/* — Onze meerwaarde: vergelijkingstabel (referentie: sanjaya "Why us") — */

.whyus {
  position: relative;
  padding: clamp(4.5rem, 10vh, 7rem) 0 clamp(4.5rem, 10vh, 7rem);
  overflow: hidden;
  isolation: isolate;
  /* dekkende basis: voorkomt naadlijntjes op de sectiegrenzen */
  background: #060607;
}

.whyus__media {
  position: absolute;
  inset: 1px 0;
  z-index: -1;
  background: url("../assets/img/contact-bg.jpg") center 70% / cover no-repeat;
}

/* Bijna zwart midden (voor de tabel), landschap vaag zichtbaar aan de
   randen; boven- en onderrand dekkend in de kleur van de buursecties. */
.whyus__scrim {
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(to bottom, #060607 0%, #060607 1.5%, rgba(6, 6, 7, 0) 22%),
    linear-gradient(to top, #060607 0%, #060607 1.5%, rgba(6, 6, 7, 0) 22%),
    radial-gradient(85% 80% at 50% 45%, rgba(3, 3, 4, 0.88), rgba(3, 3, 4, 0.55) 100%),
    rgba(3, 3, 4, 0.3);
}

.whyus__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: var(--inset);
}

.whyus__head .contact-chip {
  align-self: center;
}

.whyus__title {
  margin-top: 1.5rem;
  max-width: 22ch;
  font-size: clamp(2rem, 3.9vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--white);
}

.whyus__head .contact-lede {
  margin-top: 1.5rem;
  max-width: 36rem;
}

/* — De tabel — */

.whyus__tablewrap {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
  overflow-x: auto;
  scrollbar-width: none;
}

.whyus__tablewrap::-webkit-scrollbar {
  display: none;
}

.whyus__table {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(15rem, 1.5fr) minmax(15rem, 1.5fr) minmax(15rem, 1.5fr);
  min-width: 56rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.25rem;
  overflow: hidden;
}

.whyus__cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.625rem 1.5rem;
  font-size: 0.875rem;
  color: var(--white);
  background: rgba(1, 1, 1, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* lange woorden breken netjes af in smalle (mobiele) cellen */
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* kopregel zonder bovenrand */
.whyus__cell:nth-child(-n+4) {
  border-top: 0;
}

/* verticale scheidingslijnen tussen de kolommen */
.whyus__cell:not(:nth-child(4n+1)) {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.whyus__cell--head {
  padding-block: 2rem;
  font-size: 1rem;
}

.whyus__cell--label {
  font-size: 1rem;
}

/* Uitgelichte AEM-kolom (referentie: rgba wit 0.1) */
.whyus__cell--aem {
  background: rgba(255, 255, 255, 0.1);
}

/* Zelfde lettertype-stijl als het woordmerk in de footer */
.whyus__brand {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
}

.whyus__icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--grey);
}

.whyus__cell--aem .whyus__icon {
  color: var(--white);
}

/* Mobiele tabel (referentie: sanjaya mobiel): het rijlabel wordt een rij
   over de volle breedte met daaronder de drie kolommen naast elkaar —
   alles past binnen het scherm, geen horizontale scroll. */
@media (max-width: 43.75em) {
  .whyus__table {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }

  .whyus__cell--head[aria-hidden="true"] {
    display: none; /* lege hoekcel vervalt: koppen vullen de 3 kolommen */
  }

  .whyus__cell--label {
    grid-column: 1 / -1;
  }

  .whyus__cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    font-size: 0.8125rem;
  }

  .whyus__cell--head,
  .whyus__cell--label {
    flex-direction: row;
    font-size: 0.9375rem;
    padding: 1.125rem 0.875rem;
  }

  .whyus__brand {
    font-size: 1.0625rem;
  }

  /* Kolomlijnen opnieuw opgebouwd voor 3 kolommen (hoekcel telt als
     verborgen eerste child mee in de nth-child-nummering). */
  .whyus__cell:not(:nth-child(4n+1)) {
    border-left: 0;
  }

  .whyus__cell:nth-child(4n+3),
  .whyus__cell:nth-child(4n+4) {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* — Testimonials op de homepage (referentie: sanjaya, zonder portretfoto) — */

.testimonials {
  /* zelfde gecentreerde 72rem-kolom als de blogsectie */
  --pad: max(var(--inset), calc((100% - 72rem) / 2));
  padding: clamp(4.5rem, 10vh, 7rem) 0 clamp(1rem, 2vh, 2rem);
  background: #060607;
}

.testimonials__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-inline: var(--pad);
}

.testimonials__title {
  margin-top: 1.25rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--white);
}

.testimonials__arrows {
  display: flex;
  gap: 0.625rem;
}

.testimonials__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

.testimonials__arrow svg {
  width: 1rem;
  height: 1rem;
}

.testimonials__arrow:hover {
  background: #1f1f23;
}

.testimonials__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.testimonials__arrow:disabled:hover {
  background: #141416;
}

/* Horizontale track: kaarten lopen rechts het beeld uit en scrollen met
   snap; de scrollbalk is verborgen (pijlen + slepen/swipen sturen). */
.testimonials__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 2.75rem;
  padding-inline: var(--pad);
  overflow-x: auto;
  /* proximity i.p.v. mandatory: het einde van de track blijft bereikbaar,
     ook wanneer kaarten breed zijn t.o.v. het scherm */
  scroll-snap-type: x proximity;
  /* laat de snap-posities rekening houden met de zijpadding,
     anders rust de track nooit op scrollLeft 0 */
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}

.testimonials__track::-webkit-scrollbar {
  display: none;
}

.testimonial {
  display: flex;
  flex-direction: column;
  flex: 0 0 min(30rem, 85%);
  scroll-snap-align: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 0.75rem;
  /* zelfde kaartkleur als de referentie (sanjaya): rgb(26,26,29), geen rand */
  background: #1a1a1d;
}

/* Tekst-logo; later te vervangen door een <img class="testimonial__logo-img"> */
.testimonial__logo {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #d6d6d6;
}

.testimonial__logo-img {
  /* voorkom uitrekken door de flex-kolom van de kaart */
  align-self: flex-start;
  height: 1.75rem;
  width: auto;
  object-fit: contain;
  /* logo's uniform wit op de donkere kaart (standaard logo-wall-stijl);
     haal de filter weg als een logo in eigen kleur moet blijven */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.testimonial__quote {
  margin-top: 1.75rem;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--white);
}

.testimonial__who {
  margin-top: auto;
  padding-top: 2.25rem;
}

.testimonial__name {
  font-size: 1rem;
  color: var(--white);
}

.testimonial__role {
  margin-top: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

/* — Blogsectie op de homepage (referentie: sanjaya home) — */

.home-blog {
  padding: clamp(4.5rem, 10vh, 7rem) var(--inset) clamp(3rem, 7vh, 5rem);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
  background: #060607;
}

/* Doorschijnende knop in navbar-stijl (zelfde recept als .nav-cta),
   inclusief scramble-overlay voor gecentreerde labels. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.28);
}

.btn-ghost[data-scramble] .sc-run {
  left: 50%;
  transform: translate(-50%, -50%);
}


.home-blog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.home-blog__title {
  margin-top: 1.25rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--white);
}

.home-blog .page__cta {
  margin-top: 0;
}

.home-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2.75rem;
}

@media (max-width: 68.75em) {
  .home-blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 43.75em) {
  .home-blog__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* — Artikelpagina — */

/* Positionering naar sanjaya-artikel: brede container (~1000px) voor
   eyebrow/titel/auteur/afbeelding, met de bodytekst in een smallere
   gecentreerde leescolumn (~600px). */
.article {
  /* containerinhoud exact ~1000px op desktop (padding telt niet mee) */
  max-width: calc(62.5rem + 2 * var(--inset));
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(3rem, 8vh, 5rem)) var(--inset) clamp(4rem, 9vh, 6rem);
}

.article__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.article__title {
  margin-top: 1rem;
  max-width: 52rem;
  font-size: clamp(2rem, 3.9vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--white);
}

.article__meta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.75rem;
}

.article__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background: #17171a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--grey);
  object-fit: cover; /* geldt zodra de div door een <img> wordt vervangen */
}

.article__author {
  font-size: 0.9375rem;
  color: var(--white);
}

.article__role {
  margin-top: 0.125rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.article__date {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

/* Groot: de volle breedte van de artikelcontainer (referentie: sanjaya) */
.article__hero {
  width: 100%;
  height: auto;
  margin-top: 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article__body {
  max-width: 37.5rem;
  margin: 3.5rem auto 0;
}

.article__body h2 {
  margin-top: 2.75rem;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--white);
}

.article__body h3 {
  margin-top: 2rem;
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}

.article__body p {
  margin-top: 1.125rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #b9b9b9;
}

.article__back {
  display: block;
  width: fit-content;
  margin: 3rem auto 0;
  color: var(--white);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.25s ease;
}

.article__back:hover {
  color: var(--electric);
}

@media (prefers-reduced-motion: no-preference) {
  .blog-hero .contact-chip,
  .blog-hero .contact-lede,
  .projects-hero .contact-chip,
  .projects-hero .contact-lede,
  .overons-hero__intro,
  .case__hero,
  .article__hero,
  .article__body {
    animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .blog-hero .contact-chip,
  .projects-hero .contact-chip { animation-delay: 0.15s; }
  .blog-hero .contact-lede,
  .projects-hero .contact-lede { animation-delay: 0.45s; }
  .overons-hero__intro { animation-delay: 0.6s; }
  .case__hero { animation-delay: 0.1s; }
  .article__head { animation-delay: 0.1s; }
  .article__hero { animation-delay: 0.25s; }
  .article__body { animation-delay: 0.4s; }
}

/* ==========================================================================
   Pre-footer CTA — sectie boven de footer (referentie: sanjaya)
   ========================================================================== */

.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 1px overlap met de sectie erboven: voorkomt dat de body-achtergrond
     als haarlijntje door een subpixel-kier schemert (mobiel/DPR-schaling) */
  margin-top: -1px;
  /* Eigen dekkende achtergrond achter de (1px ingesneden) fotolaag:
     boven exact de FAQ/.page-kleur, onder exact de footerkleur — zo kan
     geen randsliver ooit de lichtere body-achtergrond tonen. */
  background: linear-gradient(to bottom, #060607 0%, #060607 40%, #030304 100%);
  min-height: 88vh;
  min-height: 88svh;
  padding: clamp(5rem, 12vh, 8rem) var(--inset);
  overflow: hidden;
  isolation: isolate;
  /* Eigen dekkende achtergrond áchter de foto-laag: de antialiasing-rand
     van de geclipte parallax-laag mengt dan met deze kleur in plaats van
     met de body — geen licht haarlijntje op de sectiegrens. */
  background: #030304;
}

.cta__media {
  position: absolute;
  /* Clip-rand 1px bínnen de sectie: een eventuele antialiasing-rij op de
     rand van de geclipte fotolaag valt zo op de eigen donkere sectie-
     achtergrond, nooit op de zichtbare sectiegrens. */
  inset: 1px 0;
  z-index: -1;
  overflow: hidden;
}

/* De afbeelding is hoger dan de sectie en beweegt licht mee met het
   scrollen (parallax via [data-parallax] in main.js). */
.cta__image {
  position: absolute;
  inset: -5rem 0;
  background: url("../assets/img/contact-bg.jpg") center / cover no-repeat;
  will-change: transform;
}

/* Blendt de sectie in het zwart van de footer (onder) en de sectie
   erboven; het midden blijft donker genoeg voor de tekst. De randen
   zijn 100% dekkend en exact de kleur van de buursecties (boven #060607
   = FAQ/.page, onder #030304 = footer) zodat er geen naadlijntje zichtbaar
   is. */
.cta__scrim {
  position: absolute;
  /* 2px voorbij de cliprand van .cta__media: de gecomposite parallax-laag
     kan bij fractionele randen een subpixelrij door de clip laten schemeren,
     en die rij bevat zo altijd dekkende scrim in plaats van blote foto. */
  inset: -2px;
  background:
    linear-gradient(to bottom, #060607 0%, #060607 2%, rgba(6, 6, 7, 0) 28%),
    linear-gradient(to top, #030304 0%, #030304 2%, rgba(3, 3, 4, 0) 44%),
    radial-gradient(75% 65% at 50% 42%, rgba(2, 2, 4, 0.78), rgba(2, 2, 4, 0.28) 100%),
    rgba(2, 2, 4, 0.26);
}

.cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Harde afdekstrips over de sectiegrenzen: de geclipte parallax-fotolaag
   kan door afrondingsverschillen tussen compositor-lagen op sommige
   schermen (DPR/zoom) een subpixelrij rauwe foto doorlaten. Deze strips
   liggen mét z-index bóven die laag en dekken de grens gegarandeerd af,
   in exact de kleur van de aangrenzende sectie. */
.faq {
  position: relative;
}

.faq::after,
.page::after,
.juridisch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 6px;
  background: #060607;
  z-index: 1;
  pointer-events: none;
}

.footer {
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  height: 6px;
  background: #030304;
  z-index: 1;
  pointer-events: none;
}

.cta .contact-chip {
  align-self: center;
}

.cta__title {
  margin-top: 1.5rem;
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: var(--white);
}

.cta .contact-lede {
  margin-top: 1.5rem;
  max-width: 30rem;
}

.cta .page__cta {
  align-self: center;
  margin-top: 2.5rem;
  min-width: 13rem;
  text-align: center;
}

/* ==========================================================================
   404 — gecentreerd over de bergachtergrond (referentie: sanjaya/404)
   ========================================================================== */

.notfound {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 2rem) var(--inset) 4rem;
  overflow: hidden;
  isolation: isolate;
  background: #030304;
}

.notfound__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/img/contact-bg.jpg") center / cover no-repeat;
}

/* De referentie-404 is bijna zwart met een vaag zichtbaar landschap;
   de onderrand sluit dekkend aan op de footer (#030304). */
.notfound__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, #030304 0%, #030304 1%, rgba(3, 3, 4, 0) 16%),
    radial-gradient(90% 75% at 50% 100%, rgba(2, 2, 4, 0.5), rgba(2, 2, 4, 0.85) 80%),
    rgba(2, 2, 4, 0.55);
}

.notfound .contact-chip {
  align-self: center;
}

.notfound .contact-title {
  min-height: auto;
}

.notfound .contact-lede {
  margin-top: 1.25rem;
  max-width: 28rem;
}

.notfound .page__cta {
  align-self: center;
  min-width: 15rem;
  text-align: center;
}

/* ==========================================================================
   Footer — design naar sanjaya.framer.ai
   ========================================================================== */

.footer {
  /* 1px overlap: zelfde subpixel-kier-preventie als bij .cta */
  margin-top: -1px;
  background: #030304;
  color: var(--white);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  padding: clamp(4rem, 9vh, 6.5rem) var(--inset) 0;
}

/* — Links: woordmerk, tagline, logovideo — */

.footer__wordmark {
  font-size: clamp(1.625rem, 2.1vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
}

.footer__tagline {
  margin-top: 1.75rem;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: var(--white);
}

.footer__video {
  display: block;
  width: min(100%, 21rem);
  margin-top: 2.75rem;
  border-radius: 0.75rem;
}

/* — Kolomlabels (mono, zoals de referentie) — */

.footer__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

/* — Midden: navigatie — */

.footer__nav ul {
  list-style: none;
  margin-top: 1.5rem;
}

.footer__nav a {
  display: inline-block;
  padding: 0.55rem 0;
  color: var(--white);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

/* — Rechts: socials + contactgegevens — */

.footer__meta .footer__label {
  margin-top: 2.75rem;
}

.footer__meta .footer__label:first-child {
  margin-top: 0;
}

.footer__socials {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.footer__social:hover {
  background: #1f1f23;
  border-color: rgba(255, 255, 255, 0.18);
}

.footer__social svg {
  width: 1.25rem;
  height: 1.25rem;
}

.footer__email,
.footer__phone {
  display: inline-block;
  margin-top: 0.875rem;
  color: var(--white);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color 0.25s ease;
}

.footer__email {
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
}

.footer__phone {
  font-size: 1.25rem;
}

.footer__email:hover,
.footer__phone:hover {
  color: var(--electric);
}

/* — Onderregel — */

.footer__bottom {
  margin-top: clamp(3.5rem, 8vh, 5.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem var(--inset) 1.75rem;
  text-align: center;
}

.footer__bottom p {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

/* — Scroll-reveal: kolommen komen gestaggerd omhoog zodra de footer in
     beeld schuift (main.js zet .is-visible via IntersectionObserver) — */

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  html.js [data-reveal="2"] { transition-delay: 0.12s; }
  html.js [data-reveal="3"] { transition-delay: 0.24s; }
  html.js [data-reveal="4"] { transition-delay: 0.36s; }

  /* Variant: van rechts naar links in positie schuiven (dienstenkaarten) */
  html.js [data-reveal].reveal-x {
    transform: translateX(4.5rem);
    transition-duration: 1.2s; /* rustiger, vloeiender inschuiven */
  }

  html.js [data-reveal].reveal-x.is-visible {
    transform: none;
  }

  /* Kaarten die samen in beeld komen schuiven ná elkaar in; de vertraging
     geldt alleen bij binnenkomst (.is-visible), het terugschuiven start
     direct. */
  html.js .services__list .service:nth-child(2).is-visible { transition-delay: 0.1s; }
  html.js .services__list .service:nth-child(3).is-visible { transition-delay: 0.2s; }
  html.js .services__list .service:nth-child(4).is-visible { transition-delay: 0.3s; }
  html.js .services__list .service:nth-child(5).is-visible { transition-delay: 0.4s; }
  html.js .services__list .service:nth-child(6).is-visible { transition-delay: 0.5s; }
}

@media (max-width: 56.25em) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ==========================================================================
   Responsief
   ========================================================================== */

/* ≤900px: hamburger-nav met consult-knop ernaast, en de intro verhuist
   naar rechtsonder — direct boven de headline (referentie: sanjaya mobiel). */
@media (max-width: 56.25em) {
  .nav-links {
    display: none;
  }

  /* de wisselaar zit hier al in het menupaneel; in de balk zou hij naast
     logo, consult-knop en hamburger te druk worden op een telefoon */
  .nav > .nav-lang {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  /* Consult-knop links van de hamburger, even hoog als de knop (40px) */
  .nav-cta {
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    margin-left: auto;
    margin-right: 0.625rem;
    padding: 0 1rem;
  }

  .nav-cta[data-scramble] .sc-run {
    left: 1rem; /* gelijk aan de mobiele padding-inline */
  }

  .hero-intro {
    position: static;
    align-self: flex-end;
    margin-top: auto;
    max-width: 22rem;
    text-align: center;
    color: #e8e8e8;
    text-shadow: 0 1px 20px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.45);
  }

  .hero-headline {
    margin-top: 0; /* de intro erboven duwt al naar beneden */
  }
}

@media (max-width: 43.75em) {
  .hero-headline {
    /* 9vw houdt "AUTOMATE. ELEVATE." op één regel tot ver onder 320px */
    font-size: clamp(1.5rem, 9vw, 2.5rem);
    letter-spacing: -0.04em;
  }

  .hero-services {
    font-size: 0.6875rem;
  }
}

/* ==================================================================
   Projectenpagina — lijst met case-kaarten (referentie:
   sanjaya /projects). Zelfde kaartcomponent als op de homepage, maar
   platter (1240x492), beeldkolom 35% en de tekst verticaal
   gecentreerd; hier géén sticky stapel.
   ================================================================== */

.projectlijst {
  padding: clamp(2rem, 5vh, 3.5rem) var(--inset) clamp(4rem, 9vh, 6rem);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
  background: #060607;
}

.projectlijst .project {
  position: static;
  aspect-ratio: 1240 / 492;
  min-height: 22rem;
}

.projectlijst .project + .project {
  margin-top: 2rem;
}

.projectlijst .project__media {
  flex: 0 0 35%;
}

.projectlijst .project__body {
  justify-content: center;
  gap: 1.75rem;
}

@media (max-width: 56.25em) {
  .projectlijst .project {
    aspect-ratio: auto;
    min-height: 0;
  }

  .projectlijst .project + .project {
    margin-top: 2rem;
  }
}

/* ==================================================================
   Case-studypagina (referentie: sanjaya /projects/<case>), maten 1:1
   overgenomen: smalle introkolom van 556px, metarijen met hairlines
   ertussen, full-bleed lijn onder de hero, brede banner, een
   citaatsectie waarin de projectfoto zelf de achtergrond is (met een
   horizontale fade naar de paginakleur + parallax), en daarna twee
   tekst/beeld-blokken die van kant wisselen.
   ================================================================== */

.case {
  padding: calc(var(--nav-h) + clamp(3rem, 8vh, 5rem)) var(--inset) clamp(3.5rem, 9vh, 6rem);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
  background: #060607;
}

/* Hero = twee kolommen: tekst links, projectfoto rechts. Maten uit de
   referentie: container 1240 = tekst 556 + gap 64 + beeld 620. */
.case__hero {
  display: grid;
  grid-template-columns: minmax(0, 556fr) minmax(0, 620fr);
  gap: 4rem;
  align-items: stretch;
}

.case__intro {
  display: flex;
  flex-direction: column;
  /* introtekst bovenaan, metatabel onderaan uitgelijnd met het beeld */
  justify-content: space-between;
}

.case__hero-media {
  align-self: stretch;
}

.case__hero-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 620 / 700;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.case__logo {
  display: block;
  /* niet uitrekken in de flexkolom; het logo houdt zijn eigen breedte */
  align-self: flex-start;
  height: 2rem;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.case__title {
  margin-top: 1.75rem;
  font-size: clamp(2rem, 3.9vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.04;
  color: var(--white);
}

.case__lede {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--grey);
}

/* Metatabel: mono label links, waarde rechts, hairline tussen de rijen */
.case__meta {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
}

.case__row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.625rem 0;
}

.case__row + .case__row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.case__row dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  /* optisch op één lijn met de waarde ernaast */
  padding-top: 0.1875rem;
}

.case__row dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--white);
}

.case__diensten {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.case__diensten li {
  position: relative;
  padding-left: 1.125rem;
}

.case__diensten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--grey);
}

/* De chip uit de sitestijl doet dienst als sectielabel */
.case__quote .contact-chip {
  align-self: center;
}

.case__block-body .contact-chip {
  align-self: flex-start;
}

/* — Citaatsectie: de projectfoto is hier de achtergrond — */

.case__quote {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(4rem, 13vh, 7.5rem) var(--inset);
  background: #060607;
  overflow: hidden;
}

.case__quote-media {
  position: absolute;
  /* even breed als de contentcontainer, met de fade naar de zijkanten */
  inset: 0 max(var(--inset), calc((100% - 72rem) / 2));
  z-index: -1;
  overflow: hidden;
}

.case__quote-image {
  position: absolute;
  /* ruimer dan het venster, zodat de parallax kan bewegen */
  inset: -3.5rem 0;
  background: url("../assets/img/contact-bg.jpg") center / cover no-repeat;
  will-change: transform;
}

.case__quote-scrim {
  position: absolute;
  inset: 0;
  /* Zware vignette: alleen een kleine kern in het midden blijft open,
     de rest loopt naar alle kanten volledig dicht. Onze achtergrondfoto
     is licht (mist en lucht), dus er is meer demping nodig dan bij de
     donkere rotsfoto van de referentie om hetzelfde beeld te krijgen. */
  background:
    radial-gradient(ellipse 46% 50% at 50% 55%,
                    rgba(6, 6, 7, 0) 0%,
                    rgba(6, 6, 7, 0.55) 30%,
                    rgba(6, 6, 7, 0.92) 62%,
                    #060607 80%),
    linear-gradient(to bottom, #060607 0%, rgba(6, 6, 7, 0) 38%,
                    rgba(6, 6, 7, 0) 62%, #060607 100%),
    linear-gradient(90deg, #060607 0%, rgba(6, 6, 7, 0) 30%,
                    rgba(6, 6, 7, 0) 70%, #060607 100%),
    rgba(4, 4, 6, 0.56);
}

.case__quote-text {
  margin-top: 1.625rem;
  max-width: 50rem;
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--white);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.case__quote-who {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.case__quote-name {
  font-size: 0.9375rem;
  color: var(--white);
}

.case__quote-role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

/* — Tekst/beeld-blokken die van kant wisselen — */

.case__blocks {
  padding: 0 var(--inset) clamp(3rem, 7vh, 5rem);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
  background: #060607;
}

.case__block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(3.5rem, 9vh, 6rem) 0;
}

/* Het resultaatblok heeft geen beeld: één gecentreerde kolom */
.case__block--solo {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.case__block--solo .case__block-body {
  max-width: 44rem;
}

.case__block--solo .contact-chip {
  margin-inline: auto;
}

.case__block--solo .case__block-body p:not(.contact-chip) {
  margin-inline: auto;
}

.case__block-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Klantlogo naast de aanpak-tekst — vrijstaand, zonder kader of vlak:
   alleen het merk op de sectieachtergrond. */
.case__mark {
  display: grid;
  place-items: center;
  /* houdt de kolom in balans met de tekst ernaast zonder zichtbaar vlak */
  min-height: clamp(11rem, 22vw, 17rem);
  padding: 1rem;
}

.case__mark img {
  width: auto;
  max-width: min(18rem, 78%);
  height: auto;
  max-height: clamp(5rem, 9vw, 7.5rem);
  object-fit: contain;
  /* wit uitgerenderd, zelfde behandeling als de andere klantlogo's */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.case__h2 {
  margin-top: 1.625rem;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.08;
  color: var(--white);
}

/* :not() houdt de chip buiten deze regel — die is ook een <p> en kreeg
   anders 17px in plaats van de 12px uit de sitestijl */
.case__block-body p:not(.contact-chip) {
  margin-top: 1.25rem;
  max-width: 32rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #b9b9b9;
}

@media (max-width: 56.25em) {
  .case__hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .case__hero-img {
    /* mobiel iets minder hoog, anders duwt hij alles weg */
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .case__block {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: clamp(2.5rem, 7vh, 4rem) 0;
  }

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

  .case__quote-media {
    inset: 0;
  }

  /* smal scherm: zelfde zwaarte, maar de zijfade blijft ruimer zodat
     hij de tekst niet raakt */
  .case__quote-scrim {
    background:
      radial-gradient(ellipse 72% 46% at 50% 55%,
                      rgba(6, 6, 7, 0) 0%,
                      rgba(6, 6, 7, 0.55) 32%,
                      rgba(6, 6, 7, 0.92) 66%,
                      #060607 84%),
      linear-gradient(to bottom, #060607 0%, rgba(6, 6, 7, 0) 30%,
                      rgba(6, 6, 7, 0) 70%, #060607 100%),
      rgba(4, 4, 6, 0.56);
  }
}

/* — Meer projecten — */

.case-more {
  padding: clamp(3rem, 7vh, 5rem) var(--inset) clamp(4rem, 9vh, 6rem);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
  background: #060607;
}

.case-more__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.case-more__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--white);
}

.case-more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2.75rem;
}

.case-more__card {
  /* kolom + auto-marge op de knop: die zakt naar de onderkant, zodat de
     knoppen van alle kaarten op één lijn staan bij ongelijke teksten */
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--white);
}

.case-more__imgwrap {
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  aspect-ratio: 16 / 9;
}

.case-more__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-more__card:hover .case-more__img {
  transform: scale(1.04);
}

.case-more__logo {
  display: block;
  height: 1.5rem;
  width: auto;
  max-width: 8rem;
  margin-top: 1.5rem;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.case-more__title {
  margin-top: 0.875rem;
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.case-more__card:hover .case-more__title {
  color: #c9c9c9;
}

.case-more__desc {
  margin-top: 0.625rem;
  /* vaste ondermarge: ook bij de langste tekst blijft er lucht tot de knop */
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--grey);
}

/* knop over de volle kaartbreedte, zoals in de referentie */
.case-more__btn {
  display: flex;
  width: 100%;
  /* auto-marge duwt de knop naar de onderkant van de kaart */
  margin-top: auto;
}

/* Spamval (company_website): buiten beeld en onbereikbaar voor bezoekers,
   bots vullen hem wel in en worden zo herkend. Bewust niet display:none —
   sommige bots slaan velden over die volledig verborgen zijn. */
.contact-form__spamval {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Turnstile rendert hier. De widget staat op Invisible, dus er komt niets
   zichtbaars bij; de container blijft leeg en zonder eigen hoogte, zodat er
   geen layoutverschuiving ontstaat. De iframe die Turnstile eventueel
   invoegt wordt hier buiten de flow gehouden. */
.contact-form__turnstile {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Alleen zichtbaar zonder JavaScript, waar het formulier verborgen is. */
.contact-form__noscript {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--grey);
}

.contact-form__noscript a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==================================================================
   Versturen-knop → papieren vliegtuig. Bij het versturen vouwt een
   kopie van de knop zich tot een driehoek, wordt een vliegtuigje en
   vliegt naar rechtsboven weg (met snelheidsstrepen). De echte knop
   blijft zijn ruimte innemen, zodat het formulier niet verspringt.
   ================================================================== */

.plane-fx {
  position: fixed;
  z-index: 120;
  pointer-events: none;
}

.plane-fx__body {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--white);
  border-radius: 0.5rem;
  transform-origin: 50% 50%;
  will-change: transform, clip-path;
  animation: plane-launch 1.3s cubic-bezier(0.34, 0, 0.2, 1) forwards;
}

.plane-fx__label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  animation: plane-label 0.3s ease forwards;
}

/* Alle stappen hebben evenveel punten, anders kan de browser het
   clip-path niet vloeiend interpoleren. */
@keyframes plane-launch {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
    border-radius: 0.5rem;
  }
  14% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    transform: translate(0, 0) rotate(0deg) scale(0.95, 0.92);
    border-radius: 0.5rem;
  }
  /* vouwen: de bovenrand klapt samen tot één punt */
  42% {
    clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 50% 100%, 0% 100%);
    transform: translate(0, 0) rotate(0deg) scale(0.34, 1.05);
    border-radius: 0.125rem;
  }
  /* de inkeping onderin maakt er een vliegtuigje van */
  58% {
    clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 50% 70%, 0% 100%);
    transform: translate(0, -0.25rem) rotate(6deg) scale(0.34, 1.05);
    border-radius: 0.125rem;
  }
  /* kantelen richting de vliegrichting */
  72% {
    clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 50% 70%, 0% 100%);
    transform: translate(0.75rem, -1.25rem) rotate(45deg) scale(0.34, 1.05);
    opacity: 1;
  }
  100% {
    clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 50% 70%, 0% 100%);
    transform: translate(26rem, -20rem) rotate(45deg) scale(0.17, 0.52);
    opacity: 0;
  }
}

@keyframes plane-label {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Snelheidsstrepen die kort achter het vliegtuigje aan schieten */
.plane-fx__trail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 0.5rem;
  opacity: 0;
  animation: plane-trail 0.55s ease-out 0.68s forwards;
}

.plane-fx__trail span {
  position: absolute;
  left: 0;
  height: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.55);
}

.plane-fx__trail span:nth-child(1) { top: 0;      width: 100%; }
.plane-fx__trail span:nth-child(2) { top: 0.25rem; width: 70%; }
.plane-fx__trail span:nth-child(3) { top: 0.5rem;  width: 45%; }

@keyframes plane-trail {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) translateX(0); }
  25%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) translateX(9rem); }
}

/* De echte knop houdt zijn ruimte, maar is onzichtbaar tijdens de vlucht */
.contact-form__submit.is-sending {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .plane-fx__body,
  .plane-fx__trail {
    animation: none;
  }
}

/* ==========================================================================
   Intro-animatie (alleen homepage)

   Wolkenvideo (assets/video/intro-wolken.mp4, 1280x720, 2,7s, 120 KB;
   Higgsfield Seedance 2.0, geknipt en verdonkerd naar luma ~65) vult het
   scherm. Een eerdere versie zonder video — alleen een gordijn over de
   hero-poster — las als "gewoon een donkere overlay" en is vervangen.
   Het gordijn erover dimt licht voor tekstcontrast en verzorgt de fade;
   de blur bij het optrekken staat alleen op desktop aan (een filter op
   een schermvullende laag is op mobiele GPU's de dure operatie).

   Prestaties: per frame alleen transform en opacity, nooit op .intro zelf
   (groepsopaciteit zou een schermvullend render surface afdwingen op het
   drukste moment van het laden). Geen filter op grote vlakken.
   ========================================================================== */

.intro { display: none; }

html.intro-aan .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  /* zodat scrollen en klikken tijdens de intro gewoon doorwerken */
  pointer-events: none;
  /* VANGNET: ook als het inline script halverwege omvalt is het gordijn
     na 3,4s weg. Bezoeker kan dus nooit vastzitten. */
  animation: intro-vangnet 0.01s linear 3.4s both;
}

@keyframes intro-vangnet {
  to { visibility: hidden; }
}

/* — Wolken: de video vult het scherm. object-fit: cover cropt op portret
     (telefoon); bij wolken is dat onzichtbaar. De poster is frame 0, dus
     het begin van het afspelen is naadloos. — */
.intro__wolken {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg);
}

/* — Gordijn. Eigen laag, want .intro zelf moet transparant blijven.
     Lichter dan voorheen (0,32 i.p.v. 0,74): de video is zelf al donker,
     het gordijn hoeft alleen nog de tekst te dragen. — */
.intro__veil {
  position: absolute;
  inset: 0;
  background: var(--bg);
  animation: intro-veil-in 0.55s cubic-bezier(0.33, 0, 0.2, 1) both;
}

@keyframes intro-veil-in {
  from { opacity: 1; }
  to { opacity: 0.32; }
}

/* — Korrel tegen banding. Geen luxe: een gedimd donker verloop heeft te
     weinig unieke helderheidsniveaus en geeft zichtbare ringen op OLED.
     De tegel wordt één keer op 64px berekend, niet schermvullend. — */
.intro__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 64px 64px;
  background-repeat: repeat;
}

/* — Tekst: typemachine —
   De regel is ÉÉN tekstknoop (bolletjes inbegrepen), zodat hij karakter
   voor karakter onthuld kan worden en bij de uitgang in zijn geheel
   verdwijnt. Eerder zaten de woorden in losse <span>s en de bolletjes in
   <i>; de uitgangsselector pakte alleen de spans, waardoor de bolletjes
   nog even bleven hangen nadat de woorden al weg waren.

   Techniek: de tekst zit in een box met overflow:hidden waarvan de breedte
   in 30 stappen (= 30 tekens) van 0 naar vol groeit. Het blokje cursor
   schuift met exact dezelfde steps() mee. In een monospace-font is elke
   tekencel even breed, dus 30ch + 30 x letter-spacing (0.1em) = 3em geeft
   precies de eindbreedte; daarmee staat de cursor altijd tegen het laatst
   getypte teken aan. De rij heeft die eindbreedte vást, zodat de tekst
   vanaf een vaste linkerkant groeit (zoals een typemachine) in plaats van
   vanuit het midden open te vouwen. — */
.intro__woord {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.85rem, 4.2vw, 2rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.6);
}

/* lettertype kwam niet op tijd: pin een vervanger vast, zodat er later
   geen zichtbare wissel meer plaatsvindt */
html.intro-fallbackfont .intro__woord {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.intro__woord-rij {
  position: relative;
  display: inline-block;
  /* 30 tekens; zie toelichting hierboven */
  width: calc(30ch + 3em);
  height: 1.25em;
}

.intro__woord-tekst {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
}

.intro__caret {
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 0.08em;
  height: 1.05em;
  background: var(--white);
  opacity: 0;
}

html.intro-tekst .intro__woord-tekst {
  animation: intro-typen 0.85s steps(30, end) both;
}

html.intro-tekst .intro__caret {
  animation:
    intro-caret-mee 0.85s steps(30, end) both,
    intro-caret-knipper 1.05s steps(2, jump-none) infinite;
}

@keyframes intro-typen {
  from { width: 0; }
  to   { width: calc(30ch + 3em); }
}

@keyframes intro-caret-mee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(30ch + 3em)); }
}

@keyframes intro-caret-knipper {
  from { opacity: 1; }
  to   { opacity: 0.15; }
}

/* — Uitgang — */
html.intro-weg .intro__veil {
  animation: intro-veil-uit 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes intro-veil-uit {
  from { opacity: 0.32; }
  to   { opacity: 0; }
}

/* de wolken zelf faden mee; op desktop met een zachte blur, op mobiel
   alleen opacity (filter op een schermvullende laag is daar te duur) */
html.intro-weg .intro__wolken {
  animation: intro-uit 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@media (min-width: 56.3em) and (hover: hover) {
  html.intro-weg .intro__wolken {
    animation: intro-wolken-uit 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes intro-wolken-uit {
    /* 6px in plaats van 10px: de kosten van een blur lopen ruwweg mee met
       de straal, en over een laag ter grootte van het scherm was 10px de
       duurste bewerking per frame van de hele site. Bij een fade van 0,75s
       naar volledig transparant is het verschil nauwelijks te zien.
       Wil je de oude zachtheid terug, dan is dit het enige getal. */
    to { opacity: 0; filter: blur(6px); transform: scale(1.03); }
  }
}

html.intro-weg .intro__grain {
  animation: intro-uit 0.7s ease-in forwards;
}

@keyframes intro-uit {
  to { opacity: 0; }
}

/* de hele regel in één keer, dus inclusief de bolletjes en de cursor */
html.intro-weg .intro__woord {
  animation: intro-woord-uit 0.34s cubic-bezier(0.4, 0, 1, 1) forwards;
  animation-delay: 0s;
}

/* Knipperen stoppen bij het weggaan, anders knippert de cursor nog even
   door terwijl de regel al aan het verdwijnen is.
   LET OP: `animation: none` zet ook de verplaatsingsanimatie stop, en
   daarmee vervalt de eindstand die `both` vasthield — de cursor sprong
   dan zichtbaar terug naar het begin van de regel. De eindpositie moet
   hier dus expliciet herhaald worden. */
html.intro-weg .intro__caret {
  animation: none;
  opacity: 1;
  transform: translateX(calc(30ch + 3em));
}

@keyframes intro-woord-uit {
  to {
    opacity: 0;
    transform: translateY(-50%) translate3d(0, -0.35rem, 0);
    filter: blur(8px);
  }
}

/* — De hero: de trage zoom is de wolkenbeweging, en de bestaande entree
     wacht netjes tot het gordijn op is. — */
@media (prefers-reduced-motion: no-preference) {
  html.intro-aan .hero__media {
    animation: intro-hero-adem 3.2s linear both;
    will-change: transform;
  }

  @keyframes intro-hero-adem {
    from { transform: scale(1.075); }
    to   { transform: scale(1); }
  }

  /* pauzeren i.p.v. vertragen: de bestaande staggering (0,15s t/m 0,6s)
     blijft zo intact en speelt vanaf het optrekken alsnog helemaal af */
  html.intro-bezig .nav,
  html.intro-bezig .hero-services li,
  html.intro-bezig .hero-intro,
  html.intro-bezig .hero-headline {
    animation-play-state: paused;
  }
}

/* — Verminderde beweging: geen drift, geen zoom, geen blur. Alleen een
     rustige fade, en korter (1,4s totaal). — */
html.intro-rust .intro {
  animation: intro-vangnet 0.01s linear 1.45s both;
}

html.intro-rust .intro__veil {
  opacity: 0.8;
  animation: intro-veil-rust 0.5s linear 0.9s forwards;
}

@keyframes intro-veil-rust {
  from { opacity: 0.8; }
  to   { opacity: 0; }
}

html.intro-rust .intro__wolken,
html.intro-rust .intro__grain {
  display: none;
}

html.intro-rust .intro__woord-tekst {
  width: calc(30ch + 3em);
}

html.intro-rust .intro__caret {
  display: none;
}

html.intro-rust .intro__woord {
  animation: intro-woord-rust 1.4s linear both;
}

@keyframes intro-woord-rust {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  64%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================================================
   Over ons — opbouw in registers: naam, verhaal, team, grondslag
   ========================================================================== */

/* Gedeelde leesspec van de pagina, gelijk aan .article__body p */
.naam__slot,
.verhaal__tekst p,
.begin__tekst p,
.klein__tekst p,
.oprichter__bio,
.grondslag__tekst p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #b9b9b9;
}

.verhaal__tekst p + p,
.begin__tekst p + p,
.klein__tekst p + p,
.grondslag__tekst p + p {
  margin-top: 1.125rem;
}

/* Gedeelde sectiekop op de schaal van .werkwijze__title */
.naam__titel,
.begin__titel,
.klein__titel,
.oprichters__titel,
.grondslag__titel {
  margin-top: 1.5rem;
  max-width: 22ch;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--white);
}

/* Alle secties op deze pagina delen containerformule en dekkende
   achtergrond; de 1px overlap voorkomt naadlijntjes tussen de banden. */
.naam,
.verhaal,
.klein,
.oprichters,
.grondslag {
  background: #060607;
  margin-top: -1px;
  padding-block: clamp(4.5rem, 10vh, 7rem);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
}

/* — 01 Hero — */

.overons-hero {
  min-height: 58vh;
  min-height: 58svh;
}

.overons-hero .contact-lede {
  max-width: 44rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.overons-hero__intro {
  margin-top: 1rem;
  max-width: 40rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #8d8d8d;
  text-wrap: balance;
}

/* — 02 De naam: de letter als scharnier tussen twee lezingen — */

.naam__lijst {
  list-style: none;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.naam__rij {
  display: grid;
  grid-template-columns: clamp(2.5rem, 6vw, 4.5rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.125rem, 3vh, 1.875rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.naam__rij:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.naam__letter {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--white);
}

/* de private lezing: klein, mono, grijs */
.naam__persoon {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

/* de publieke lezing: groot, wit, rechts uitgelijnd */
.naam__woord {
  justify-self: end;
  text-align: right;
  font-size: clamp(1.375rem, 3.2vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--white);
}

.naam__slot {
  margin-top: clamp(2rem, 4vh, 2.75rem);
  max-width: 42rem;
}

/* — 03 Ons verhaal: meelopende kop naast de leeskolom — */

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

.verhaal__head {
  position: sticky;
  top: calc(var(--nav-h) + clamp(1.5rem, 6vh, 3rem));
}

.verhaal__titel {
  margin-top: 1.5rem;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--white);
}

.verhaal__tekst {
  max-width: 40rem;
}

.verhaal__tekst .verhaal__slot {
  margin-top: 2rem;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* — 04 Waarom we begonnen: één gecentreerde leeskolom — */

.begin {
  background: #060607;
  margin-top: -1px;
  padding: clamp(4.5rem, 10vh, 7rem) var(--inset);
}

.begin__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* de chip heeft width: fit-content, dus centreren via align-self */
.begin__head .contact-chip {
  align-self: center;
}

.begin__titel {
  max-width: 20ch;
}

.begin__tekst {
  max-width: 37.5rem;
  margin: clamp(2.5rem, 5vh, 3.5rem) auto 0;
}

/* — Volle-breedte statementbanden (blok 04 en 08) — */

.statement {
  background: var(--bg);
  margin-top: -1px;
  padding-block: clamp(4.5rem, 11vh, 7.5rem);
  padding-inline: max(var(--inset), calc((100% - 72rem) / 2));
}

.statement--mono {
  text-align: center;
}

.statement__mono {
  font-family: var(--font-mono);
  font-size: clamp(1.0625rem, 2.6vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--white);
  text-wrap: balance;
}

.statement__onder {
  margin: 1.5rem auto 0;
  max-width: 32rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--grey);
}

.statement--groot {
  padding-block: clamp(5rem, 12vh, 8rem);
}

.statement__groot {
  max-width: 22ch;
  font-size: clamp(1.75rem, 4.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.statement__groot span {
  display: block;
}

.statement__zacht {
  color: var(--grey);
}

.statement__sterk {
  color: var(--white);
  font-weight: 500;
}

/* — 05 Klein team: het argument links, de belofte als kanttekening — */

.klein__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}

.klein__tekst {
  max-width: 40rem;
}

.klein__kant {
  border-left: 1px solid var(--line);
  padding-left: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--white);
}

/* — 06 Het team: drie rijen, typografisch, zonder beeld — */

.oprichters__head {
  margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
}

.oprichter {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.oprichter:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* dezelfde maat als .service__tag, maar met de initiaal uit blok 02 */
.oprichter__index {
  padding-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--grey);
}

/* de naam draagt het gewicht dat een portret zou dragen */
.oprichter__naam {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--white);
}

.oprichter__rol {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

.oprichter__bio {
  max-width: 34rem;
}

/* de opleiding staat er, maar met het kleinste type van de rij */
.oprichter__studie {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.oprichter__studie dd {
  font-size: 0.8125rem;
  color: var(--grey);
}

/* LinkedIn-icoon, dezelfde vorm als .footer__social maar een maatje kleiner
   zodat hij de naam ernaast niet beconcurreert */
.oprichter__link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease;
}

.oprichter__link svg {
  width: 1.125rem;
  height: 1.125rem;
}

.oprichter__link:hover,
.oprichter__link:focus-visible {
  background: #1f1f23;
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--electric);
}

/* — 07 Hoe we werken: het bestaande component zonder beeld — */

.werkwijze--sober {
  margin-top: -1px;
}

.werkwijze--sober .werkwijze__step {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.25rem;
  /* geen trapverschuiving hier, dus ook geen laagpromotie nodig */
  will-change: auto;
}

.werkwijze__num {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.4);
}

.werkwijze--sober .werkwijze__step-title {
  margin-top: 1.25rem;
}

/* — 08 Waar we voor staan — */

.grondslag__tekst {
  max-width: 40rem;
  margin-top: clamp(2rem, 4vh, 2.75rem);
}

/* Kernwaarden als doorlopende monoregel, niet als rij icoontjes:
   hetzelfde slash-idioom als .hero-services. */
.waarden {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

/* — Mobiel/tablet — */

@media (max-width: 56.25em) {
  .verhaal {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* meelopen heeft geen zin zonder tweede kolom ernaast */
  .verhaal__head {
    position: static;
  }

  .klein__body {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .klein__kant {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 1.25rem;
  }

  .oprichter {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .oprichter__index {
    padding-top: 0;
  }

  .oprichter__naam {
    font-size: clamp(1.5rem, 6vw, 1.75rem);
  }

  .oprichter__bio,
  .oprichter__link {
    max-width: none;
  }

  /* op tafel/telefoon is dit een losstaande tikzone: naar 44px, gelijk
     aan .footer__social, in plaats van de compactere desktopmaat */
  .oprichter__link {
    justify-self: start;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: 0.5rem;
  }
}

@media (max-width: 43.75em) {
  /* Voornaam en werkwoord onder elkaar, de letter blijft de kolom links.
     Vaste kolombreedte: bij `auto` is A/E/M elk anders breed en zou de
     tweede kolom per rij verspringen. */
  .naam__rij {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    row-gap: 0.25rem;
  }

  .naam__letter {
    grid-row: span 2;
  }

  .naam__persoon {
    align-self: end;
  }

  .naam__woord {
    justify-self: start;
    text-align: left;
    align-self: start;
  }
}

/* ==========================================================================
   Juridische pagina's — privacyverklaring, cookieverklaring, voorwaarden
   ========================================================================== */

.juridisch {
  position: relative;
  background: #060607;
  padding: calc(var(--nav-h) + clamp(3rem, 8vh, 5rem)) var(--inset)
           clamp(4rem, 9vh, 6rem);
}

.juridisch__wrap {
  max-width: 46rem;
  margin: 0 auto;
}

.juridisch__meta {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.juridisch__lede {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #b9b9b9;
}

/* Inhoudsopgave: mono-genummerde lijst tussen haarlijnen */
.juridisch__inhoud {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.juridisch__inhoud p {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.juridisch__inhoud ol {
  list-style: none;
  counter-reset: toc;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem clamp(1.5rem, 3vw, 2.5rem);
}

.juridisch__inhoud li {
  counter-increment: toc;
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.juridisch__inhoud li::before {
  content: counter(toc, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--grey);
  padding-top: 0.15em;
}

.juridisch__inhoud a {
  color: var(--grey);
  text-decoration: none;
  transition: color 0.25s ease;
}

.juridisch__inhoud a:hover,
.juridisch__inhoud a:focus-visible {
  color: var(--white);
}

/* — De artikelen zelf — */

.juridisch__art {
  margin-top: clamp(2.75rem, 6vh, 4rem);
  /* ruimte onder de vaste nav bij het springen vanuit de inhoudsopgave */
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

.juridisch__art h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--white);
}

.juridisch__art h3 {
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--white);
}

.juridisch__art p,
.juridisch__art li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #b9b9b9;
}

/* De wrapper is 46rem breed omdat de tabellen die ruimte nodig hebben; op
   die breedte loopt lopende tekst op tot 86 tekens per regel en dat leest
   niet prettig. Alleen de tekst krimpt daarom naar ~75 tekens; tabellen
   houden de volle breedte. */
.juridisch__art > p,
.juridisch__art > h2,
.juridisch__art > h3,
.juridisch__art > ul,
.juridisch__art > ol,
.juridisch__lede {
  max-width: 40rem;
}

.juridisch__art p {
  margin-top: 1.125rem;
}

.juridisch__art ul,
.juridisch__art ol {
  margin-top: 1.125rem;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.juridisch__art ul { list-style: disc; }
.juridisch__art ol { list-style: decimal; }
.juridisch__art li::marker { color: var(--grey); }

.juridisch__art strong {
  color: var(--white);
  font-weight: 500;
}

.juridisch__art a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.juridisch__art a:hover,
.juridisch__art a:focus-visible {
  color: var(--electric);
  text-decoration-color: var(--electric);
}

/* Gegevensblok (naam/adres/e-mail) en bewaartermijnen */
.juridisch__gegevens {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 0.625rem 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.juridisch__gegevens dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 0.2em;
}

.juridisch__gegevens dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--white);
}

/* Nog in te vullen waarden vallen bewust op */
.juridisch__invullen {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--grey);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

.juridisch__tabel {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.juridisch__tabel th,
.juridisch__tabel td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.6;
}

.juridisch__tabel th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--grey);
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.juridisch__tabel td { color: #b9b9b9; }
.juridisch__tabel td:first-child { color: var(--white); }

/* Wide tabellen mogen scrollen, de pagina zelf nooit */
.juridisch__scroll { overflow-x: auto; }

@media (max-width: 43.75em) {
  .juridisch__inhoud ol { grid-template-columns: 1fr; }

  .juridisch__gegevens {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .juridisch__gegevens dd { margin-bottom: 0.75rem; }
}