/* ==========================================================================
   Motion Crew — site styles
   Translated from the "Motion Crew Light" design (Motion Crew Light.dc.html).
   All colours, sizes, clamps, radii and easings are taken from that file.
   ========================================================================== */

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- Palette ---------- */
:root {
  --cream:  #f4f1ea;
  --ink:    #1a1712;
  --strong: #2c2820;
  --body:   #48443c;
  --muted:  #6e6a60;
  --dim:    #79746a;
  --faint:  #938e82;
  --num:    #e0dacd;
  --band:   #eceadf;
  --card:   #ffffff;

  /* Accentkleur op één plek. Wilt u een andere kleur? Pas enkel deze drie
     getallen aan (lichtheid, verzadiging, kleurtoon) — al het overige,
     inclusief de zachte gloed achter de hero en de footer, volgt vanzelf.
       Petrol (huidig) 0.52 0.10 230   ·  Terracotta  0.64 0.21 33
       Oxblood         0.45 0.11 30    ·  Pine green  0.53 0.13 155
       Indigo          0.50 0.19 285   ·  Pruim       0.48 0.17 320  */
  --accent-l: 0.52;
  --accent-c: 0.10;
  --accent-h: 230;

  --accent:      oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-50:   oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.5);
  --accent-40:   oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.4);
  --accent-55:   oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.55);
  /* Gloed achter hero, paginakop en footer.
     Bewust LICHTER en VERZADIGDER dan het accent zelf: het accent moet donker
     blijven om leesbaar te zijn als tekst, en juist daardoor valt het als grote
     waas op crème weg. De kleurtoon volgt wel het accent, dus bij een andere
     --accent-h verkleurt de gloed mee.
     Sterker of zachter? Draai aan het laatste getal (de doorzichtigheid). */
  --glow-l: 0.72;
  --glow-c: 0.13;
  --glow-strong: oklch(var(--glow-l) var(--glow-c) var(--accent-h) / 0.38);
  --glow-mid:    oklch(var(--glow-l) var(--glow-c) var(--accent-h) / 0.30);
  --glow-soft:   oklch(var(--glow-l) var(--glow-c) var(--accent-h) / 0.24);

  /* De twee andere gloeden in de hero. Bewust NIET aan het accent gekoppeld:
     drie verschillende kleurtonen maken de zachte waas interessant. Koppelt u
     ze wel, dan wordt de hero één vlakke kleur. */
  --glow-cool: oklch(0.66 0.15 265 / 0.22);
  --glow-warm: oklch(0.78 0.14 55 / 0.24);

  --line-08: rgba(0, 0, 0, 0.08);
  --line-09: rgba(0, 0, 0, 0.09);
  --line-10: rgba(0, 0, 0, 0.10);

  --sans: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: clamp(24px, 5vw, 80px);
}

/* ---------- Keyframes ---------- */
@keyframes mcdrift   { 0% { transform: translate(0,0) scale(1); }    50% { transform: translate(70px,-50px) scale(1.18); } 100% { transform: translate(0,0) scale(1); } }
@keyframes mcdrift2  { 0% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-60px,50px) scale(1); }   100% { transform: translate(0,0) scale(1.05); } }
@keyframes mcmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mcbob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(13px); } }
@keyframes mcfade    { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mcfadel   { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mcring    { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes mcspin    { to { transform: rotate(360deg); } }
@keyframes mcdot     { 0% { transform: translateY(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

/* ---------- Base ---------- */
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  position: relative;
}
::selection { background: var(--accent); color: var(--cream); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: #d8d2c6; border-radius: 10px; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: var(--accent); color: var(--cream);
  padding: 12px 20px; border-radius: 0 0 10px 0;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

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

/* ---------- Shared type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--dim { color: var(--dim); }

.section-title {
  font-size: clamp(34px, 5.5vw, 76px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  margin-top: 18px;
}

.section {
  padding: clamp(90px, 13vh, 160px) var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 16px;
  padding: 16px 30px;
  border-radius: 46px;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.btn--primary { background: var(--accent); color: var(--cream); font-weight: 600; }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -10px var(--accent-55); }
.btn--ghost { border: 1px solid rgba(0,0,0,0.2); color: var(--ink); font-weight: 500; }
.btn--ghost:hover { border-color: rgba(0,0,0,0.38); background: rgba(0,0,0,0.03); }
.btn--lg { font-size: 17px; padding: 18px 36px; }

/* ---------- Progress bar / grain / loader ---------- */
.progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--accent);
  z-index: 300;
  will-change: transform;
}

.grain {
  position: fixed; inset: 0;
  z-index: 250;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.loader {
  position: fixed; inset: 0;
  z-index: 400;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1);
}
.loader.is-done { opacity: 0; pointer-events: none; }
.loader__inner { display: flex; align-items: center; gap: 14px; }
.loader__mark { width: 16px; height: 16px; background: var(--accent); animation: mcspin 1.1s linear infinite; }
.loader__text {
  font-family: var(--mono);
  letter-spacing: .32em;
  font-size: 13px;
  color: var(--dim);
  text-transform: uppercase;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(245, 242, 235, 0.72);
  border-bottom: 1px solid var(--line-08);
}
.nav__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav__mark { width: 13px; height: 13px; background: var(--accent); display: inline-block; }
.nav__name { font-weight: 700; letter-spacing: -.01em; font-size: 18px; color: var(--ink); }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 40px); }
.nav__link {
  text-decoration: none;
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
  transition: color .25s;
}
.nav__link:hover { color: var(--ink); }
.nav__cta {
  text-decoration: none;
  color: var(--cream);
  background: var(--accent);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 40px;
  transition: transform .25s, box-shadow .25s;
}
.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--accent-50); }

/* Mobile nav toggle — not in the canvas design, added so the nav survives small screens */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-10);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  transition: border-color .25s, background .25s;
}
.nav__toggle:hover { border-color: rgba(0,0,0,0.28); background: rgba(0,0,0,0.03); }
.nav__toggle span {
  display: block; width: 19px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 780px) {
  .nav { padding: 16px var(--gutter); }
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed;
    top: 73px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    background: var(--cream);
    box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid var(--line-08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__link {
    padding: 16px 2px;
    font-size: 17px;
    border-bottom: 1px solid var(--line-08);
  }
  .nav__cta { margin-top: 20px; text-align: center; padding: 14px 20px; font-size: 15px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--gutter) 80px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__blob { position: absolute; border-radius: 50%; }
.hero__blob--1 {
  top: -10%; left: 5%; width: 48vw; height: 48vw;
  background: radial-gradient(circle, var(--glow-strong), transparent 65%);
  filter: blur(50px);
  animation: mcdrift 16s ease-in-out infinite;
}
.hero__blob--2 {
  bottom: -15%; right: 0; width: 52vw; height: 52vw;
  background: radial-gradient(circle, var(--glow-cool), transparent 65%);
  filter: blur(60px);
  animation: mcdrift2 20s ease-in-out infinite;
}
.hero__blob--3 {
  top: 30%; right: 28%; width: 30vw; height: 30vw;
  background: radial-gradient(circle, var(--glow-warm), transparent 65%);
  filter: blur(55px);
  animation: mcdrift 24s ease-in-out infinite;
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000, transparent 85%);
}
.hero__fade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, var(--cream)); }

.hero__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; width: 100%; }
.hero__kicker { overflow: hidden; animation: mcfade .9s both .15s; }

.hero__title {
  font-size: clamp(52px, 9.5vw, 168px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -.035em;
  margin: 24px 0 0;
}
.hero__title > span { display: block; }
.hero__title > span:nth-child(1) { animation: mcfade 1s both .3s; }
.hero__title > span:nth-child(2) { animation: mcfade 1s both .45s; }
.hero__dot { color: var(--accent); }

.hero__rotator { margin-top: 34px; animation: mcfade 1s both .65s; }
.hero__rotator-text {
  font-family: var(--mono);
  font-size: clamp(14px, 1.5vw, 19px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--body);
}
.hero__word { color: var(--accent); font-weight: 700; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 48px; animation: mcfade 1s both .8s; }

.hero__scroll {
  position: absolute; bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: mcfade 1s both 1.1s;
}
.hero__scroll-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--faint);
  text-transform: uppercase;
}
.hero__mouse {
  width: 24px; height: 40px;
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 14px;
  display: flex; justify-content: center;
  padding-top: 8px;
}
.hero__mouse span {
  width: 4px; height: 8px;
  border-radius: 4px;
  background: var(--accent);
  animation: mcdot 1.8s ease-in-out infinite;
}

/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--line-08);
  border-bottom: 1px solid var(--line-08);
  padding: 26px 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--band);
}
.marquee__track { display: inline-flex; animation: mcmarquee 28s linear infinite; will-change: transform; }
.marquee__item {
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--num);
  text-transform: uppercase;
}
.marquee__item i { color: var(--accent); font-style: normal; }

/* ---------- Section head (shared by services & portfolio) ---------- */
.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 7vh, 90px);
}
.head__lead { max-width: 340px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* ---------- Services ---------- */
.services__list { border-top: 1px solid var(--line-10); }
.service {
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 30px;
  align-items: center;
  padding: 38px 8px;
  border-bottom: 1px solid var(--line-10);
  transition: padding-left .35s, background .35s;
}
.service:last-child { border-bottom: 0; }
.service:hover { padding-left: 24px; background: linear-gradient(90deg, rgba(0,0,0,0.025), transparent); }
.service__num { font-family: var(--mono); font-size: 15px; color: var(--faint); }
.service__title { font-size: clamp(24px, 3.2vw, 42px); font-weight: 600; letter-spacing: -.02em; }
.service__text { color: var(--muted); font-size: 16px; line-height: 1.6; margin-top: 12px; max-width: 640px; }
.service__arrow { font-size: 30px; color: var(--accent); }

@media (max-width: 700px) {
  .service { grid-template-columns: 1fr auto; gap: 10px 20px; padding: 30px 4px; align-items: start; }
  .service__num { grid-column: 1; }
  .service__arrow { grid-column: 2; grid-row: 1; align-self: center; }
  .service__body { grid-column: 1 / -1; }
  .service:hover { padding-left: 12px; }
}

/* ---------- Statementbalk ----------
   Zit tussen Diensten en Werkwijze en breekt de reeks lichte secties.
   Volle breedte en in de accentkleur: alles eromheen is crème, dus dit is het
   enige donkere vlak in de romp van de pagina. Staat bewust op de plek waar de
   showreel komt — is die video klaar, dan kunt u kiezen: de reel hierboven
   zetten, of dit blok vervangen. */
.statement {
  position: relative;
  background: var(--accent);
  color: var(--cream);
  padding: clamp(72px, 11vh, 132px) var(--gutter);
  overflow: hidden;
}
.statement__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
}
.statement__glow--1 {
  top: -55%; left: -8%; width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.20), transparent 65%);
  animation: mcdrift 20s ease-in-out infinite;
}
.statement__glow--2 {
  bottom: -60%; right: -6%; width: 42vw; height: 42vw;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.22), transparent 65%);
  animation: mcdrift2 26s ease-in-out infinite;
}
.statement__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; }
.statement__eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  /* Volle crème: op 78% zakt dit naar 3,5:1 en dat haalt AA niet. De ondergeschikte
     rol komt al uit de kleine korpsgrootte en de ruime letterspatiëring. */
  color: var(--cream);
}
.statement__title {
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-top: 18px;
  max-width: 17ch;
}
.statement__text {
  font-size: 16px;
  line-height: 1.7;
  margin-top: 20px;
  max-width: 54ch;
  color: var(--cream);
}
.statement__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.btn--invert { background: var(--cream); color: var(--accent); font-weight: 600; }
.btn--invert:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45); }

/* ---------- Showreel (currently commented out in index.php) ---------- */
.reel {
  position: relative;
  margin: 0 clamp(16px, 4vw, 60px);
  border-radius: 24px;
  overflow: hidden;
  min-height: 62vh;
  display: flex; align-items: center; justify-content: center;
}
.reel__bg {
  position: absolute; inset: 0;
  background-image: url('../images/apotheekdiest.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  filter: saturate(0.7) brightness(0.5);
}
.reel__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,18,12,0.42), rgba(24,18,12,0.72)); }
.reel__inner { position: relative; z-index: 2; text-align: center; padding: 60px 24px; }
.reel__play {
  margin: 34px auto 0;
  width: 108px; height: 108px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.reel__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent-50); animation: mcring 2.6s ease-out infinite; }
.reel__ring--2 { animation-delay: 1.3s; }
.reel__btn {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream); font-size: 26px; padding-left: 6px;
}
.reel__title { font-size: clamp(28px, 4.5vw, 60px); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; margin-top: 34px; color: #fff; }
.reel__text { color: #c4c8c5; font-size: 16px; line-height: 1.6; margin: 16px auto 0; max-width: 460px; }

/* ---------- Werkwijze ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.step {
  background: var(--card);
  border: 1px solid var(--line-08);
  border-radius: 18px;
  padding: 36px 30px;
}
.step:hover { transform: translateY(-6px); border-color: var(--accent-40); }
.step__num { font-size: clamp(54px, 7vw, 88px); font-weight: 700; color: var(--num); letter-spacing: -.04em; line-height: 1; display: block; }
.step__title { font-size: 23px; font-weight: 600; margin-top: 18px; }
.step__text { color: var(--muted); font-size: 15px; line-height: 1.65; margin-top: 12px; }

/* ---------- Portfolio ---------- */
.portfolio { padding: clamp(70px, 9vh, 120px) var(--gutter) clamp(90px, 13vh, 160px); max-width: 1340px; margin: 0 auto; }
.portfolio .head { gap: 30px; margin-bottom: clamp(36px, 6vh, 70px); }
.head__more {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  padding-bottom: 4px;
  transition: color .25s, border-color .25s;
}
.head__more:hover { color: var(--ink); border-color: var(--accent); }

.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 24px; }
.project {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line-08);
  transition: border-color .4s;
}
.project:hover { border-color: rgba(0,0,0,0.16); }
.project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #edeae0, #e3e0d5);
}
/* Was een div met background-image. Nu een echte <img>, zodat de browser hem
   pas laadt als hij in beeld komt en er een alt-tekst bij kan. */
.project__media picture { position: absolute; inset: 0; display: block; }
.project__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .7s var(--ease);
}
.project:hover .project__img { transform: scale(1.07); }
.project__body { padding: 24px 24px 28px; }
.project__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project__title { font-size: 22px; font-weight: 600; }
.project__arrow { color: var(--accent); font-size: 20px; }
.project__meta { color: var(--dim); font-size: 13px; line-height: 1.6; margin-top: 8px; font-family: var(--mono); }

/* ---------- Contact / footer ---------- */
.footer {
  position: relative;
  border-top: 1px solid var(--line-09);
  padding: clamp(80px, 12vh, 150px) var(--gutter) 50px;
  overflow: hidden;
}
.footer__glow {
  position: absolute; top: -30%; left: 50%;
  transform: translateX(-50%);
  width: 70vw; height: 70vw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-soft), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  animation: mcdrift 22s ease-in-out infinite;
}
.footer__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; }
.footer__cta { text-align: center; margin-bottom: clamp(56px, 9vh, 100px); }
.footer__title { font-size: clamp(40px, 8vw, 120px); font-weight: 700; letter-spacing: -.04em; line-height: 0.96; margin-top: 22px; }
.footer__cta .btn { margin-top: 40px; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  border-top: 1px solid var(--line-09);
  padding-top: 50px;
}
.footer__head {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 16px;
}
.footer__text { color: var(--muted); font-size: 15px; line-height: 1.7; }
.footer__list { color: var(--muted); font-size: 15px; line-height: 1.9; }
.footer__contact { color: var(--strong); font-size: 15px; line-height: 1.9; }
.footer__contact a { color: var(--strong); text-decoration: none; transition: color .25s; }
.footer__contact a:hover { color: var(--ink); }
.footer__link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 60px; padding-top: 28px;
  border-top: 1px solid var(--line-09);
}
.footer__copy { display: flex; align-items: center; gap: 10px; }
.footer__mark { width: 11px; height: 11px; background: var(--accent); display: inline-block; }
.footer__copy span:last-child { font-size: 13px; color: var(--faint); }
.footer__legal { display: flex; gap: 24px; font-size: 13px; flex-wrap: wrap; }
.footer__legal a { color: var(--faint); text-decoration: none; transition: color .25s; }
.footer__legal a:hover { color: var(--strong); }

/* ---------- Contactformulier ---------- */
.form { max-width: 640px; margin: clamp(40px, 6vh, 64px) auto 0; text-align: left; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__field { margin-bottom: 16px; }
.form__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.form__input,
.form__select,
.form__textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;               /* onder 16px zoomt iOS het scherm in bij focus */
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-10);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .25s, box-shadow .25s;
}
.form__textarea { min-height: 150px; resize: vertical; }
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-40);
}
.form__check { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 22px; }
.form__check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.form__check label { font-size: 14px; line-height: 1.6; color: var(--muted); }
.form__check a { color: var(--ink); border-bottom: 1px solid var(--accent); text-decoration: none; }
.form__note { font-size: 13px; line-height: 1.6; color: var(--faint); margin-top: 16px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__msg { border-radius: 12px; padding: 16px 18px; font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.form__msg--ok { background: #dcefe0; color: #1d6b34; border-left: 3px solid #2f8a4d; }
.form__msg--err { background: #fff; color: var(--strong); border-left: 3px solid var(--accent); }
.form__msg ul { margin: 6px 0 0; padding-left: 18px; }

@media (max-width: 600px) {
  .form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Legal / content pages ---------- */
.page-hero {
  position: relative;
  padding: 160px var(--gutter) clamp(40px, 7vh, 70px);
  overflow: hidden;
}
.page-hero__glow {
  position: absolute; top: -60%; left: 20%;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-mid), transparent 62%);
  filter: blur(60px);
  pointer-events: none;
  animation: mcdrift 18s ease-in-out infinite;
}
.page-hero__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; }
.page-hero__title {
  font-size: clamp(38px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 0.98;
  margin-top: 20px;
}
.page-hero__rule { margin-top: clamp(34px, 5vh, 56px); border: 0; border-top: 1px solid var(--line-10); }

.prose {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(44px, 7vh, 80px) var(--gutter) clamp(80px, 12vh, 140px);
}
/* Keep a readable measure, but align the column with the page-hero h1. */
.prose > * { max-width: 780px; }
.prose h2 {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: clamp(44px, 6vh, 66px) 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-10);
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); font-size: 16px; line-height: 1.75; margin-bottom: 18px; }
/* Native list numbering so the ol `start` attribute keeps the clauses running 1-18.
   (A display:grid li is no longer a list-item and would stop the counter.) */
.prose ol { list-style: decimal outside; padding-left: 42px; }
.prose ol li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  padding: 14px 0;
}
.prose ol li::marker {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--faint);
}
.prose ol li + li { border-top: 1px solid rgba(0,0,0,0.05); }
.prose a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }

/* iubenda injects its own markup — keep it inside our column and on our type scale */
.prose .iub-body-embed,
.prose #iubenda_policy { max-width: 100%; }
.prose .iubenda-embed { font-family: var(--sans) !important; }

.prose__note { color: var(--faint); font-size: 14px; line-height: 1.7; margin-top: 40px; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* cards additionally animate hover-lift; keep both transitions alive once revealed */
.step { transition: opacity .9s var(--ease), transform .4s, border-color .4s; }
.step[data-reveal] { transition: opacity .9s var(--ease), transform .9s var(--ease), border-color .4s; }
.step[data-reveal].is-visible { transition: opacity .4s, transform .4s, border-color .4s; }
.project[data-reveal].is-visible { transition: opacity .4s, transform .4s, border-color .4s; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .hero { padding-top: 108px; min-height: 92vh; }
  .hero__actions { margin-top: 36px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .head { gap: 24px; }
  .footer__bottom { justify-content: flex-start; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}