/* ==========================================================================
   Davios 2026 — complete onepage + juridische pagina's
   §1–§5 fundament · §7 lijnenspel · §8 hero · §9 portret · §10 contact
   ========================================================================== */

/* ==========================================================================
   Inhoud
     0  typografie          8  statement (§6)
     1  design tokens (§4)  9  waarom davios + portret (§9)
     2  basis              10  contact + koffie (§10)
     3  ambient/lijnenveld 11  logo-segmenten (§12)
     4  header (§6)        12  footer (§6)
     5  hero-copy          13  juridische pagina's
     6  hero-visual (§8)   14  responsive
     7  sectieritme        15  prefers-reduced-motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typografie — Inter variabel, latin-subset, lokaal gehost.
   Eén bestand voor alle gebruikte gewichten (200–600), geen externe request.
   Licentie: zie assets/fonts/NOTICE.txt
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Caveat — handschrift, uitsluitend voor de signature onder "Waarom Davios"
   (feedbackronde 10). Licentie: zie assets/fonts/NOTICE.txt */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Caveat-Regular.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;
}

/* --------------------------------------------------------------------------
   1. Design tokens (§4)
   -------------------------------------------------------------------------- */
:root {
  /* huisstijl — enige bron voor neon en gradients */
  --navy:   #303763;
  --purple: #a46ba6;
  --cyan:   #1db4cd;
  --pink:   #e62765;
  --yellow: #f7bc14;
  --lime:   #c7d33a;

  /* fundament */
  --bg:    #03060c;
  --text:  #f6f7fb;
  --muted: #a7adba;

  /* afgeleiden van --muted, voor terughoudende bijschriften en de footer */
  --dim:   color-mix(in srgb, var(--muted) 74%, var(--bg));
  --lift:  color-mix(in srgb, var(--muted) 55%, var(--text));

  /* doorlopende huisstijlgradient voor lijnen en randen */
  --grad-line: linear-gradient(90deg,
    var(--cyan), var(--navy), var(--purple), var(--pink), var(--yellow), var(--lime));
  --grad-text: linear-gradient(96deg,
    var(--cyan) 0%, var(--purple) 34%, var(--pink) 62%, var(--yellow) 84%, var(--lime) 100%);
  /* volledige huisstijlgradient, vaste volgorde (feedbackronde 3 punt 2/5):
     cyan -> navy -> purple -> pink -> yellow -> lime, voor koppen waar alle
     zes kleuren zichtbaar moeten zijn */
  --grad-text-full: linear-gradient(96deg,
    var(--cyan) 0%, var(--navy) 20%, var(--purple) 40%,
    var(--pink) 60%, var(--yellow) 80%, var(--lime) 100%);

  /* ritme */
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --header-h: 4.75rem;

  /* vorm van alle CTA's — één bron voor huidige en toekomstige knoppen */
  --btn-radius: 999px;
}

@property --cta-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

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

.eyebrow {
  margin: 0 0 1.35rem;
  font-size: .688rem;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. Ambient — donker fundament dat zacht ademt
   -------------------------------------------------------------------------- */
.ambient {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 18% 22%, rgba(29, 180, 205, .13), transparent 68%),
    radial-gradient(34vw 34vw at 78% 30%, rgba(164, 107, 166, .11), transparent 68%),
    radial-gradient(46vw 46vw at 58% 88%, rgba(48, 55, 99, .30), transparent 70%);
  animation: ambient-drift 34s ease-in-out infinite alternate;
}

@keyframes ambient-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

/* --------------------------------------------------------------------------
   3b. Lijnenspel (§7) — doorlopend systeem over de volle breedte van de site.
   Eén vast canvas over de viewport; de scrollpositie schuift de lijnen mee,
   zodat het veld als één doorlopend geheel door de pagina loopt.
   -------------------------------------------------------------------------- */
.flowfield {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Header, navigatie en taalswitch
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  min-height: var(--header-h);
  padding: .9rem var(--pad-x);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--grad-line);
  opacity: 0;
  transition: opacity .4s ease;
}

.site-header.is-scrolled::after { opacity: .38; }

.brand { flex: 0 0 auto; }
.brand img {
  width: auto;
  height: clamp(1.6rem, 3.4vw, 2.05rem);
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  font-size: .813rem;
  letter-spacing: .04em;
  color: var(--muted);
}

.site-nav a {
  position: relative;
  padding-block: .3rem;
  transition: color .3s ease;
}

.site-nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--grad-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.site-nav a:hover { color: var(--text); }
.site-nav a:hover::after { transform: scaleX(1); }

.lang {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  letter-spacing: .1em;
  color: #5b626f;
}

.lang button {
  position: relative;
  padding: .2rem .15rem .34rem;
  border: 0;
  background: none;
  color: #6b7280;
  font: inherit;
  font-weight: 300;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color .3s ease, font-weight .3s ease;
}

.lang button:hover { color: var(--text); }

.lang button::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--grad-line);
  opacity: 0;
  transition: opacity .35s ease;
}

.lang button[aria-pressed='true'] {
  color: var(--text);
  font-weight: 600;
}

.lang button[aria-pressed='true']::after { opacity: 1; }

/* --------------------------------------------------------------------------
   5. Hero — copy
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 2;
  overflow: hidden;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(3rem, 7vw, 6rem) var(--pad-x) clamp(4rem, 9vw, 8rem);
  min-height: calc(100svh - var(--header-h));
}

.hero-copy {
  position: relative;
  z-index: 5;
  max-width: 34rem;
}

.hero h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.05rem, 4.4vw, 3.35rem);
  font-weight: 200;
  line-height: 1.16;
  letter-spacing: -.02em;
}

.hero h1 span { display: block; }

.hero .lede {
  margin: 0 0 2.5rem;
  max-width: 30rem;
  font-size: 1rem;
  color: var(--muted);
}

/* CTA met meebewegende neon-gradientrand en play-element uit het logo */
.cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.9rem .9rem 2rem;
  border-radius: var(--btn-radius);
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--text);
  background: rgba(246, 247, 251, .03);
  transition: all .35s ease;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(from var(--cta-angle),
      var(--cyan), var(--navy), var(--purple), var(--pink), var(--yellow), var(--lime), var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: cta-rotate 7s linear infinite;
  transition: all .35s ease;
}

@keyframes cta-rotate {
  to { --cta-angle: 360deg; }
}

/* Hover-fill (feedbackronde 5): solid wit van achter de tekst uit, gradient-
   rand verdwijnt. Geen glow, geen box-shadow, geen filter. */
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #f6f7fb;
  opacity: 0;
  transition: all .35s ease;
}

.cta:hover {
  color: #03060c;
}

.cta:hover::before {
  opacity: 0;
}

.cta:hover::after {
  opacity: 1;
}

.cta .play {
  width: .64rem;
  height: auto;
  flex: 0 0 auto;
  overflow: visible;
}

.cta .play path {
  fill: currentColor;
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   6. Hero-transformatievisual (§8)

   De verhouding 4:3 houdt de SVG-viewBox (800×600) en de HTML-lagen exact op
   elkaar uitgelijnd. Binnen dat vlak ligt het media-slot als 16:9 over de volle
   breedte; het krijgt een concentrische mask, zodat er nergens een rechthoekige
   rand ontstaat. De schets eromheen mag bewust buiten het figuurvlak uitlopen:
   de tekening dooft uit in de donkere achtergrond in plaats van in een kader.
   -------------------------------------------------------------------------- */
.hero-visual {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.sketch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
}

.sketch--back { z-index: 1; }

/* Fragmenten van maatvoering en notities: leesbaar als schets, niet als tekst. */
.marks text {
  font-family: inherit;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: .1em;
}

/* De opacity van de zonegroepen wordt door de rAF-lus geschreven, zodat ze
   meeademen met de puls van het lijnenveld (§7). Dit is de startwaarde. */
.bp {
  opacity: .8;
  will-change: opacity;
}

/* --- in-view opbouw: van buiten naar binnen ------------------------------ */

/* de streken tekenen zichzelf */
.flow {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hero-visual.is-revealed .flow {
  animation: draw-line 1.8s cubic-bezier(.33, 1, .68, 1) forwards;
}

.hero-visual.is-revealed .bp-z2 .flow { animation-delay: .25s; }
.hero-visual.is-revealed .bp-z3 .flow { animation-delay: .48s; animation-duration: 1.6s; }
.hero-visual.is-revealed .bp-z4 .flow { animation-delay: .70s; animation-duration: 1.5s; }

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* cijfers, notities en knopen verschijnen ná de streek waar ze bij horen */
.marks {
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero-visual.is-revealed .marks       { opacity: 1; transition-delay: 1.05s; }
.hero-visual.is-revealed .bp-z2 .marks { transition-delay: 1.25s; }
.hero-visual.is-revealed .bp-z3 .marks { transition-delay: 1.45s; }
.hero-visual.is-revealed .bp-z4 .marks { transition-delay: 1.6s; }

/* --- het centrum: 16:9 media-slot ---------------------------------------- */
.frame {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 12.5%;
  width: 100%;
  height: 75%;
  will-change: transform;
}

/* feedbackronde 24, fix 1: geen concentrische opbouw-reveal meer — het
   media-slot is meteen zichtbaar bij laden, geen vertraging/fade-in. */
.frame__reveal {
  position: absolute;
  inset: 0;
}

/* De permanente overgang buiten→binnen. `closest-side ellipse` valt exact
   samen met het 16:9-vlak (rx 400, ry 225 in viewBox-eenheden), dus de hoeken
   en de randen zijn volledig weg: geen naad, alleen een brede overvloeiband
   waarin beeld en schets elkaar kruisen. */
.frame__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side ellipse at 50% 50%,
    #000 0 62%, rgba(0, 0, 0, .94) 78%, rgba(0, 0, 0, .52) 90%, transparent 100%);
          mask-image: radial-gradient(closest-side ellipse at 50% 50%,
    #000 0 62%, rgba(0, 0, 0, .94) 78%, rgba(0, 0, 0, .52) 90%, transparent 100%);
}

/* Hero-media (feedbackronde 23): drie gestapelde lagen, DOM-volgorde bepaalt
   de stapeling (A onder, B midden, video boven). A blijft op opacity 1 staan
   — B en de video faden er overheen, dat geeft dezelfde crossfade als bij de
   koffie (§10) met minder bewegende delen. */
.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

/* fix 1: direct zichtbaar, geen fade-in/opbouw-animatie op deze laag */
#hero-a { opacity: 1; transition: none; }

/* Stap 2 (video-fase) draait op een kortere transitieduur dan de eerste
   crossfade; de klasse wordt in js/script.js gezet op het moment van
   triggeren, vóór de nieuwe opacity-waarden. */
.hero-media.is-video-phase .hero-media__layer {
  transition-duration: .8s;
}

.hero-caption {
  position: absolute;
  left: 4%;
  top: 100%;
  padding-top: .6rem;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  font-weight: 200;
  letter-spacing: .01em;
  color: var(--lift);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .9s ease 2.1s, transform .9s ease 2.1s;
}

.hero-visual.is-revealed .hero-caption {
  opacity: .8;
  transform: none;
}


/* --------------------------------------------------------------------------
   7. Secties — gedeeld ritme (§6)

   Alle secties liggen boven het doorlopende lijnenveld (z-index 2) en hebben
   geen eigen achtergrond, zodat het veld er doorheen blijft lopen.
   -------------------------------------------------------------------------- */
.statement,
.why,
.contact {
  position: relative;
  z-index: 2;
  padding: clamp(5rem, 12vw, 10rem) var(--pad-x);
  /* de nav springt naar deze secties: houd ze vrij van de sticky header */
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* Elementen komen tot leven zodra de bezoeker bij de sectie is (§11).
   Bewust lage specificiteit: het reduced-motion-blok verderop moet deze regel
   met dezelfde selectors kunnen overschrijven. */
.has-reveal .statement__line,
.has-reveal .why-copy > *,
.has-reveal .contact-copy > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1),
              transform .9s cubic-bezier(.22, 1, .36, 1);
}

.has-reveal .is-in .statement__line,
.has-reveal .is-in .why-copy > *,
.has-reveal .is-in .contact-copy > * {
  opacity: 1;
  transform: none;
}

.has-reveal .is-in .statement__line:nth-child(2),
.has-reveal .is-in .why-copy > :nth-child(2),
.has-reveal .is-in .contact-copy > :nth-child(2) { transition-delay: .1s; }

.has-reveal .is-in .why-copy > :nth-child(3),
.has-reveal .is-in .contact-copy > :nth-child(3) { transition-delay: .2s; }

.has-reveal .is-in .why-copy > :nth-child(4) { transition-delay: .3s; }

/* De gradientbehandeling uit §5 — één bron voor alle koppen op de site:
   gradient = het complexe beginpunt, vol wit = de heldere uitkomst. */
.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*
  Volledige huisstijlgradient (feedbackronde 3, §5/§6) — voor korte
  headline-regels. `.grad` alleen is niet genoeg: op een display:block span
  zonder eigen breedte spant de achtergrond zich over de hele blokbreedte,
  waardoor de latere kleurstops (pink/yellow/lime) buiten de tekst vallen en
  onzichtbaar blijven. width: fit-content trekt de gradient strak om de
  tekst, zodat alle zes kleuren binnen de tekst zelf zichtbaar zijn.
  Let op: background-image i.p.v. de background-shorthand — de shorthand
  zet background-clip stil terug naar border-box en breekt zo de tekst-clip
  die .grad al zet.
*/
.grad--full {
  background-image: var(--grad-text-full);
  width: fit-content;
}

.why h2,
.contact h2 {
  margin: 0 0 1.6rem;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.why h2 span,
.contact h2 span { display: block; }

/* --------------------------------------------------------------------------
   8. Statement (§6) — compact, twee regels, verder niets
   -------------------------------------------------------------------------- */
.statement {
  display: grid;
  justify-items: center;
  gap: .2rem;
  text-align: center;
  padding-block: clamp(4.5rem, 11vw, 9rem);
}

/* Deeltjesveld (feedbackronde 14): achter de tekst, vult de hele sectie.
   Randen lossen zacht op (feedbackronde 16, fix 2) i.p.v. deeltjes hard af
   te snijden aan de containerrand. */
.statement-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
              linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.statement__line {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 32ch;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  font-weight: 200;
  line-height: 1.28;
  letter-spacing: -.015em;
}

/* --------------------------------------------------------------------------
   9. Waarom Davios (§9) — portret dat oplost in de omgeving
   -------------------------------------------------------------------------- */
.why {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

/*
  Portretintegratie (§9, feedbackronde 13) — danny-cutout-masked-small.png
  heeft het masker en de transparante achtergrond al in het beeld zelf; geen
  CSS-mask en geen mix-blend-mode meer nodig. Staand formaat (9:16), dus
  hoogte-gestuurd met width:auto zodat de eigen verhouding behouden blijft.
  Absoluut gepositioneerd (zelfde reden als bij de koffie, feedbackronde 8):
  alleen zo resolvet een percentuele hoogte betrouwbaar tegen de sectiehoogte
  i.p.v. tegen de viewport. .why-copy krijgt daarom expliciet kolom 2.
*/
.portrait {
  position: absolute;
  top: 50%;
  left: 32%;
  transform: translate(-50%, -50%);
  margin: 0;
  height: 85%;
  width: auto;
}

.portrait__photo {
  display: block;
  height: 100%;
  width: auto;
}

.why-copy {
  position: relative;
  grid-column: 2;
  max-width: 34rem;
}

.why .body,
.contact .body {
  margin: 0;
  color: var(--muted);
}

/* Persoonlijke ondertekening (§6), in handschrift (feedbackronde 10):
   Davios blijft leidend, dit is alleen de kleine persoonlijke toets eronder. */
.signature {
  margin: 12px 0 0;
  font-family: 'Caveat', cursive;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   9b. Klantlogo's (briefing 2026-09-09) — smalle, open sectie tussen Waarom
   Davios en Contact. Geen eigen achtergrond/border: sluit naadloos aan op de
   omliggende secties. Canvas vult de volledige sectie; de eyebrow ligt erboven.
   -------------------------------------------------------------------------- */
.clients-section {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 280px;
  padding-top: 2.5rem;
}

.clients-section .eyebrow {
  position: relative;
  z-index: 1;
  text-align: center;
}

#clients-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.clients-logos { display: none; }

/* --------------------------------------------------------------------------
   10. Contact (§10) — de koffie materialiseert bij nadering van de knop
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-bottom: clamp(6rem, 13vw, 11rem);
}

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

.contact .cta { margin-top: .6rem; }

.coffee {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 50%;
  max-height: 80%;
  aspect-ratio: 16 / 9;
  margin: 0;

  /* 0 = schets, 1 = werkelijkheid. Wordt door de rAF-lus geschreven. */
  --materialise: 0;
}

/* Zelfde principe als bij het portret: geen rechte beeldrand, het kopje komt
   uit de omgeving naar voren in plaats van erop te liggen. Elliptisch masker
   voor de integratie met de achtergrond (feedbackronde 11). Werkt op de hele
   stack — dus ook op coffee1b, de permanente onderlaag. */
.coffee__stack {
  position: absolute;
  inset: 0;
  mask-image: radial-gradient(ellipse 70% 65% at 60% 50%, black 15%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 60% 50%, black 15%, transparent 80%);
}

.coffee__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: opacity;
}

/* Permanente onderlaag (feedbackronde 11): altijd zichtbaar, geen eigen
   masker — de blauwe schetslijnen van coffee1b blijven ook tijdens hover
   zichtbaar rondom coffee2. */
.coffee__layer--sketch { opacity: 1; }

/* Bovenlaag: alleen het centrum zichtbaar via een eigen, kleiner elliptisch
   masker, zodat de schetsranden van coffee1b eromheen doorschijnen. Fadeert
   in naarmate de cursor de CTA nadert. */
.coffee__layer--real {
  opacity: var(--materialise);
  mask-image: radial-gradient(ellipse 60% 65% at 55% 52%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 65% at 55% 52%, black 20%, transparent 75%);
  transform: scale(calc(.984 + var(--materialise) * .016));
}

/* Damp-loop (§19.3), later: valt exact over hetzelfde vlak. */
.coffee__layer--steam {
  opacity: calc(var(--materialise) * .9);
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   12. Footer (§6)
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  padding: 2rem var(--pad-x) 2.6rem;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--dim);
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 var(--pad-x) auto;
  height: 1px;
  background: var(--grad-line);
  opacity: .22;
}

.site-footer__mark { margin: 0; }

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem clamp(1.2rem, 3vw, 2.25rem);
}

.site-footer__nav a {
  position: relative;
  padding-block: .25rem;
  transition: color .3s ease;
}

.site-footer__nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--grad-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.site-footer__nav a:hover { color: var(--text); }
.site-footer__nav a:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   13. Juridische pagina's (privacyverklaring, algemene voorwaarden)
   Rustige, smalle leeskolom; het lijnenveld blijft op de achtergrond lopen
   maar wordt achter de tekst gedempt.
   -------------------------------------------------------------------------- */
.legal {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--pad-x) clamp(4rem, 9vw, 7rem);
}

.legal::before {
  content: '';
  position: absolute;
  inset: 0 -8% 0 -8%;
  z-index: -1;
  background: radial-gradient(62% 46% at 50% 28%,
    rgba(3, 6, 12, .94) 0%, rgba(3, 6, 12, .82) 58%, transparent 92%);
  pointer-events: none;
}

.legal h1 {
  margin: 0 0 .4rem;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.legal .updated {
  margin: 0 0 2.6rem;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--dim);
}

.legal h2 {
  margin: 2.4rem 0 .6rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text);
}

.legal p {
  margin: 0 0 1rem;
  max-width: 42rem;
  color: var(--muted);
  font-size: .938rem;
}

.legal p em { color: var(--lift); }

.legal a {
  color: var(--text);
  border-bottom: 1px solid rgba(29, 180, 205, .5);
  transition: border-color .3s ease;
}

.legal a:hover { border-bottom-color: var(--cyan); }

.legal .note {
  margin-bottom: 2.2rem;
  padding: .9rem 1.1rem;
  border-left: 2px solid rgba(29, 180, 205, .4);
  background: rgba(246, 247, 251, .03);
  font-size: .875rem;
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(2.5rem, 7vw, 4rem);
  }
  .hero-copy { max-width: 40rem; }
  .hero-visual { max-width: 40rem; }

  /* Koffie blijft geïntegreerd (§3): schuift onder de tekst, houdt zijn
     oplossende randen en het lokale lijnenveld loopt gewoon door. */
  .contact {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  /* Tablet: portret en tekst blijven zij-aan-zij (§9, feedbackronde 5) */
  .why { gap: clamp(2rem, 6vw, 3.5rem); }

  /* de koffie is op desktop absoluut gepositioneerd (rechterhelft, feedbackronde 8);
     op tablet/mobiel valt hij terug in de normale flow, onder de tekst */
  .coffee {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 17rem;
    max-height: none;
    aspect-ratio: 16 / 9;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  :root { --header-h: 4rem; }

  .site-header {
    flex-wrap: wrap;
    row-gap: .5rem;
    padding-block: .75rem;
  }
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .lang { margin-left: auto; }

  .hero { padding-top: 2rem; }
  .hero .lede { margin-bottom: 2rem; }
  .hero-caption { font-size: .95rem; }

  .statement__line { max-width: 21ch; }

  /* Klantlogo's (briefing 2026-09-09): hoger op mobiel dan op desktop, zodat
     de zeven lijnen genoeg verticale ruimte hebben en de logo's (die op
     mobiel via js/script.js kleiner renderen) niet overlappen. */
  .clients-section { height: 320px; }

  /* Mobiel: portret bovenaan op volledige breedte, tekst eronder (§9,
     feedbackronde 5). feedbackronde 26, fix 1: kleiner (max-height 55vh) en
     minder witruimte erboven/eronder. */
  .why {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 1.5rem;
    padding-top: 2rem;
  }
  .why .portrait {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    order: 1;
    align-self: auto;
    justify-self: stretch;
    width: 100%;
    height: auto;
  }
  .why .portrait__photo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 55vh;
    margin: 0 auto;
  }
  .why .why-copy { grid-column: 1; order: 2; }

  /* feedbackronde 26, fix 2: minder witruimte onder de handtekening op mobiel */
  .signature { margin-bottom: 1rem; }

  /* mobiel (<768px, feedbackronde 9): breder en groter, gecentreerd, hoogte
     volgt uit de geërfde aspect-ratio: 16/9 (geen vaste hoogte). margin: 0
     auto zet margin-bottom al op 0 (feedbackronde 26, fix 3). */
  .coffee {
    width: 90%;
    max-width: none;
    margin: 0 auto;
  }

  /* feedbackronde 26, fix 3: minder lege ruimte onder de koffie */
  .contact { padding-bottom: 2rem; }

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

  .legal h2 { margin-top: 2rem; }

  /* De schets wordt hier flink verkleind; de fragmenten moeten leesbaar
     blijven als notitie in plaats van te vervallen tot ruis. */
  .marks text {
    font-size: 17px;
    letter-spacing: .06em;
  }
}

/* --------------------------------------------------------------------------
   15. prefers-reduced-motion — alles blijft leesbaar, beweging vervalt
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .ambient,
  .cta::before,
  .hero-visual.is-revealed .flow {
    animation: none;
  }

  /* volledig statisch eindframe: de schets staat er, het beeld staat er */
  .flow { stroke-dashoffset: 0; }

  .marks,
  .hero-caption,
  .hero-media__layer {
    transition: none;
  }

  .marks { opacity: 1; }

  .hero-caption {
    opacity: .8;
    transform: none;
  }

  .site-nav a::after,
  .lang button,
  .lang button::after { transition: none; }

  /* Nieuwe secties: alles staat er meteen, in de eindtoestand. */
  .has-reveal .statement__line,
  .has-reveal .why-copy > *,
  .has-reveal .contact-copy > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* de koffie staat in zijn materialiseerde eindstand */
  .coffee { --materialise: 1; }
  .coffee__layer { transition: none; }

  .site-footer__nav a,
  .site-footer__nav a::after,
  .legal a { transition: none; }
}