@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Kleuren van de oude evdl-site, iets aangepast voor leesbaarheid */
  --bg: #ababa1;          /* olijfgrijs: rgba(86,86,66) met opacity .5 over wit */
  --ink: #1b1b16;
  --heading: #1a2a4a;     /* donkere variant van het oude stoffige blauw */
  --brand-blue: #2f5b9e;  /* blauw uit het oude woordmerk, dieper voor leesbaarheid */
  --bronze: #ab845a;      /* oorspronkelijke kleur van de gekko */
  --gecko: #a4a4a4e6;     /* kleur van de gekko in het logo: hier aanpassen om te experimenteren */
  --link: #1d1d18;
  --column: 1100px;
  --measure: 760px;
  --sans: "Noto Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 40px; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 20px/1.3 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }

/* Bewegende cirkels op de achtergrond, zoals op de oude site */
/* Achtergrond: 1-op-1 overgenomen van de originele evdl-site */
#background {
  position: fixed; top: 0; left: 0; display: block;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  overflow: hidden; background-color: rgba(86, 86, 66, 1); opacity: .5;
  z-index: 0; pointer-events: none;
}
.background-row { height: 25%; }
.zero, .one {
  width: 12.35%; height: 100%; float: left; display: block; overflow: hidden;
  position: relative; border-radius: 50%; transform: scale(1);
}
.zero { background-color: rgba(50, 50, 50, .05); }
.one { background-color: rgba(215, 215, 215, .05); }

/* Logo vast linksboven */
#branding { position: fixed; top: 10px; left: 10px; z-index: 3; }
#branding a { display: flex; align-items: flex-start; text-decoration: none; }
/* gekko-frames (1660x1505) hebben 40 px ruimte rondom; --gw is de oorspronkelijke logobreedte */
#branding .gecko { --gw: 190px; display: block; width: var(--gw); height: auto; margin: calc(var(--gw) * -20 / 1520); color: var(--gecko); }
.wordmark { display: flex; flex-direction: column; margin: 12px 0 0 6px; line-height: 1; }
.wordmark strong { font-weight: 400; font-size: 34px; color: var(--brand-blue); letter-spacing: .01em; }
.wordmark span { align-self: flex-end; font-size: 26px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); margin-top: 6px; }

/* Menu: groot, gecentreerd en sticky */
.nav {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: center; gap: 44px;
  padding: 22px 16px 30px; margin-bottom: 32px;
}
/* Melkglas achter het menu: lichter dan de achtergrond, vervaagd,
   en vanaf 30% van de onderkant zacht weglopend (geen rand) */
.nav::before {
  /* Loopt door tot onder "bouwt websites", zodat ook daar de onderliggende inhoud vervaagt */
  content: ""; position: absolute; inset: 0 0 -56px; z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
  opacity: 0; transition: opacity .3s;
}
.nav.scrolled::before { opacity: 1; }
.nav a {
  color: var(--ink); text-decoration: none; font-size: 22px; font-weight: 500; text-transform: lowercase;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a.active { color: #fff; border-bottom-color: #fff; }

main { position: relative; z-index: 1; padding: 100px 0 40px; }

.detail, .section-title, .archive-section { width: min(var(--column), 100% - 48px); margin: 0 auto 72px; }
.intro > *, #diensten > p, #over > p, #contact > p { max-width: var(--measure); }

/* Projecten: tekst en screenshot naast elkaar, afwisselend */
#werk .detail:not(.text-only) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); column-gap: 56px; align-items: center;
}
#werk .detail:not(.text-only) > h3, #werk .detail:not(.text-only) > p { grid-column: 1; }
#werk .detail:not(.text-only) { grid-template-rows: 1fr auto auto auto 1fr; }
#werk .detail:not(.text-only) > h3 { grid-row: 2; }
#werk .detail:not(.text-only) > p:not(.meta) { grid-row: 3; }
#werk .detail:not(.text-only) > p.meta { grid-row: 4; }
#werk .detail:not(.text-only) > .window { grid-column: 2; grid-row: 1 / -1; }
#werk .detail:not(.text-only):nth-of-type(even) { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
#werk .detail:not(.text-only):nth-of-type(even) > h3, #werk .detail:not(.text-only):nth-of-type(even) > p { grid-column: 2; }
#werk .detail:not(.text-only):nth-of-type(even) > .window { grid-column: 1; }
#werk .text-only { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); column-gap: 56px; margin-bottom: 40px; }
#werk .text-only > h3 { grid-column: 1; }
#werk .text-only > p { grid-column: 2; margin: 0; }
.section-title {
  font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #fff; margin-bottom: 28px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.detail .section-title { width: auto; }

.detail h1 { font-size: 34px; font-weight: 500; line-height: 1.15; color: #effb76; margin: 0 0 18px; }
.detail h3 { margin: 0 0 4px; font-size: 22px; font-weight: 500; text-transform: uppercase; color: var(--heading); }
.detail p { margin: 0 0 20px; line-height: 1.3; }
/* Typ-effect in de H1, met knipperende cursor zoals op een server */
.typed {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 400; font-size: .92em; letter-spacing: -.01em;
  color: #effb76;
  text-shadow: 0 0 6px rgba(239, 251, 118, .35);
}
.typed .cursor { box-shadow: 0 0 5px rgba(239, 251, 118, .5); }
.typed .t-rest { visibility: hidden; }
.typed .cursor {
  display: inline-block; width: .09em; height: .95em; margin: 0 -.13em 0 .04em;
  vertical-align: -.12em; background: currentColor; animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typed .cursor { animation: none; } }

.intro p strong { font-weight: 500; color: var(--heading); }
#werk .detail h3, .archive figcaption strong { color: var(--brand-blue); }
.detail a:not(.window) { color: var(--link); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .35); }
.detail a:not(.window):hover { color: #fff; border-color: #fff; }

/* Twee rustige knoppen in de intro */
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.detail a.btn {
  display: inline-block; padding: 10px 22px; border-radius: 26px; font-size: 19px; font-weight: 500;
  border: 1.5px solid var(--heading); transition: background .2s, color .2s, border-color .2s;
}
.detail a.btn-main { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.detail a.btn-main:hover { background: #244a85; color: #fff; border-color: #244a85; }
.detail a.btn-ghost { background: transparent; color: var(--heading); }
.detail a.btn-ghost:hover { background: rgba(255, 255, 255, .25); color: var(--heading); border-color: var(--heading); }

/* Browservenster rond de screenshots */
.window {
  display: block; overflow: hidden; border-radius: 6px; background: #fff; text-decoration: none;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .35); transition: transform .5s ease;
}
.window:hover { transform: scale(1.05); }

/* Ruimtelijk effect: het scherm komt naar je toe en draait een beetje naar het midden */
@media (min-width: 1101px) {
  #werk .window {
    transform: perspective(1400px) rotateY(0) scale(1);
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s;
  }
  #werk .detail:nth-of-type(odd) .window:hover {
    transform: perspective(1400px) rotateY(-9deg) scale(1.06);
    box-shadow: -18px 22px 36px rgba(0, 0, 0, .38);
  }
  #werk .detail:nth-of-type(even) .window:hover {
    transform: perspective(1400px) rotateY(9deg) scale(1.06);
    box-shadow: 18px 22px 36px rgba(0, 0, 0, .38);
  }
}
.bar {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  background: linear-gradient(#f2f2f2, #dadada); border-bottom: 1px solid #c4c4c4;
}
.bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.bar i:nth-child(2) { background: #febc2e; }
.bar i:nth-child(3) { background: #28c840; }
.url {
  flex: 1; margin-left: 10px; padding: 1px 10px; border-radius: 4px; background: #fff;
  font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.window img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }

/* Werk: ingeklapt halverwege Studio Smack, met uitklapknop */
.werk-list {
  position: relative; transition: max-height .8s cubic-bezier(.3, .7, .2, 1);
  /* Ruimte boven het eerste project, zodat het bij hover (vergroten/draaien) niet wordt afgeknipt */
  padding-top: 48px; margin-top: -48px;
}
.werk-list.collapsed {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent);
}
.werk-toggle-wrap { width: min(var(--column), 100% - 48px); margin: -8px auto 72px; text-align: center; }
.werk-toggle {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink);
  opacity: .5; transition: opacity .25s;
}
.werk-toggle:hover, .werk-toggle:focus-visible { opacity: 1; }
.werk-toggle .chev {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand-blue); color: #fff;
  transform: rotate(90deg); transition: transform .4s, background .2s;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.werk-toggle .chev svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.werk-toggle:hover .chev { background: #244a85; }
.werk-toggle[aria-expanded="true"] .chev { transform: rotate(-90deg); }
.werk-toggle .label { font-size: 16px; font-weight: 500; letter-spacing: .04em; }
.werk-toggle:focus-visible .chev { outline: 3px solid #effb76; outline-offset: 3px; }

/* Eén vaste regel onder elk project: live link of archief */
#werk p.meta { margin: -8px 0 0; font-size: 16px; }
.detail a.visit { font-weight: 500; color: var(--brand-blue); border-bottom-color: rgba(47, 91, 158, .4); }
.detail a.visit:hover { color: var(--heading); border-color: var(--heading); }
.archived { font-size: 15px; letter-spacing: .03em; color: var(--ink); opacity: .6; }

/* Ouder werk, als compacte afsluiter binnen Werk */
.archive-in-werk { width: min(var(--column), 100% - 48px); margin: 8px auto 72px; }
.archive-title {
  margin: 0 0 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .5);
  font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff;
}

.services { margin: 0 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.services > div {
  padding: 22px 26px; border-radius: 12px;
  background: rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.services > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.services dt {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-size: 22px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--brand-blue);
}
.services dt::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #effb76; }
.services dd { margin: 0; font-size: 17.5px; line-height: 1.45; }
.aside { font-size: 18px; padding-left: 14px; border-left: 3px solid var(--bronze); }

/* Archief: compacter, twee kolommen */
.archive-section .section-title { width: 100%; }
.archive { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
.archive figure { margin: 0; }
.archive .window { box-shadow: 0 8px 16px rgba(0, 0, 0, .3); }
.archive .bar { height: 18px; }
.archive .bar i { width: 7px; height: 7px; }
.archive figcaption { margin-top: 14px; font-size: 17px; line-height: 1.3; }
.archive figcaption strong { display: block; font-weight: 500; text-transform: uppercase; color: var(--heading); }

/* Contact: twee melkglas-blokken */
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 20px; margin-top: 8px; }
.detail a.contact-card {
  display: flex; align-items: center; gap: 18px; padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 12px;
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--brand-blue); font-weight: 500; font-size: 22px;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.detail a.contact-card:hover {
  background: rgba(255, 255, 255, .38); color: var(--brand-blue); border-color: rgba(255, 255, 255, .7);
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}
.contact-card svg {
  flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%;
  background: #effb76; fill: none; stroke: var(--heading); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.contact-card span { display: flex; flex-direction: column; line-height: 1.25; }
.contact-card small { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); opacity: .7; margin-bottom: 2px; }

.footer {
  position: relative; z-index: 1; width: min(var(--column), 100% - 48px); margin: 0 auto;
  padding: 24px 0 40px; border-top: 1px solid rgba(255, 255, 255, .5); font-size: 15px;
}
.footer a { color: var(--ink); }

@media (max-width: 1100px) {
  #branding { position: absolute; }
  #branding .gecko { --gw: 140px; }
  .wordmark strong { font-size: 28px; }
  .wordmark span { font-size: 22px; }
  .nav { margin-top: 150px; gap: 32px; }
  main { padding-top: 40px; }
  #werk .detail:not(.text-only), #werk .detail:not(.text-only):nth-of-type(even), #werk .text-only { display: block; }
  #werk .detail .window { margin-top: 8px; }
  .archive { grid-template-columns: 1fr 1fr; }
  .services { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  #branding .gecko { --gw: 96px; }
  .wordmark { margin-top: 6px; }
  .wordmark strong { font-size: 22px; }
  .wordmark span { font-size: 17px; }
  .nav { margin-top: 110px; gap: 20px; padding: 14px 12px; }
  .nav a { font-size: 19px; }
  .detail, .section-title, .archive-section, .footer { width: calc(100% - 32px); }
  .detail h1 { font-size: 28px; }
  .archive { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .window { transition: none; }
}

/* Losse pagina (privacyverklaring) */
.page h1 { font-size: 34px; font-weight: 500; color: var(--heading); margin: 0 0 18px; }
.page h2 { font-size: 22px; font-weight: 500; text-transform: uppercase; color: var(--brand-blue); margin: 32px 0 6px; }