/* =========================================================
   Relevant Visuals — Global Stylesheet v3 (refined)
   ========================================================= */

:root {
  --color-navy: #0F1B3D;
  --color-navy-2: #15224a;
  --color-navy-3: #1c2c5e;
  --color-purple: #7C3AED;
  --color-purple-2: #6D28D9;
  --color-purple-3: #5B21B6;
  --color-purple-soft: #A78BFA;
  --color-purple-pale: #EDE9FE;
  --color-purple-glow: rgba(124, 58, 237, 0.12);
  --color-blue: #3B82F6;
  --color-blue-soft: #60A5FA;
  --color-teal: #2DB8C4;
  --color-teal-soft: #6FD4DC;
  --color-gold: #F4B740;
  --color-bg: #FAFAF7;
  --color-bg-2: #F2F1EC;
  --color-cream: #F7F5EE;
  --color-white: #FFFFFF;
  --color-text: #0F1B3D;
  --color-muted: #5A6378;
  --color-border: #E6E5DF;
  --color-border-soft: #EFEEE9;

  --gradient-purple: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);

  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-script: "Caveat", "Bradley Hand", "Segoe Script", cursive;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-2xl: 40px;

  --shadow-sm: 0 2px 8px rgba(15, 27, 61, 0.05);
  --shadow: 0 12px 36px rgba(15, 27, 61, 0.07);
  --shadow-lg: 0 30px 70px rgba(15, 27, 61, 0.12);

  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.5s var(--easing);

  --container: 1240px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; transition: color 0.3s var(--easing); }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--color-navy); color: var(--color-white); }

/* Typography ============================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-navy);
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.8rem); letter-spacing: -0.03em; font-weight: 600; line-height: 1.05; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.1rem; font-weight: 600; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 22px;
  padding: 0;
  background: none;
}

.lead {
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  color: var(--color-muted);
  line-height: 1.65;
  max-width: 600px;
}

.text-purple { color: var(--color-purple); }
.text-italic { font-style: italic; font-family: var(--font-serif); font-weight: 500; color: var(--color-purple); }

/* Layout ================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

section { position: relative; }

.section-padding { padding: clamp(80px, 11vw, 140px) 0; }
.section-padding-sm { padding: clamp(60px, 8vw, 100px) 0; }

/* Header ================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: all 0.4s var(--easing);
  background: transparent;
}

.site-header.scrolled {
  background: rgba(250, 250, 247, 0.9);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;   /* anders drukt de flexbox het logo plat i.p.v. te schalen */
  transition: 0.3s var(--easing);
}
.brand img {
  height: 64px;
  width: auto;
  transition: 0.3s var(--easing);
}
.site-header.scrolled .brand img { height: 50px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-links a {
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--color-navy);
  border-radius: 999px;
  white-space: nowrap;   /* "Over mij" brak anders op de spatie */
  transition: all 0.3s var(--easing);
}
.nav-links a:hover {
  color: var(--color-purple);
}
.nav-links a.active {
  background: var(--color-navy);
  color: var(--color-white);
}

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-navy);
  position: relative;
}
.menu-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.6px;
  background: var(--color-white);
  transform: translate(-50%, -50%);
  transition: 0.3s var(--easing);
}
.menu-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
.menu-toggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
.menu-open .menu-toggle span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-navy);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  opacity: 0;
  pointer-events: none;
  transition: 0.5s var(--easing);
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -0.02em;
  transform: translateY(20px);
  opacity: 0;
  transition: 0.5s var(--easing);
}
.menu-open .mobile-nav { opacity: 1; pointer-events: auto; }
.menu-open .mobile-nav a { transform: translateY(0); opacity: 1; }
.menu-open .mobile-nav a:nth-child(1) { transition-delay: 0.1s; }
.menu-open .mobile-nav a:nth-child(2) { transition-delay: 0.15s; }
.menu-open .mobile-nav a:nth-child(3) { transition-delay: 0.2s; }
.menu-open .mobile-nav a:nth-child(4) { transition-delay: 0.25s; }
.menu-open .mobile-nav a:nth-child(5) { transition-delay: 0.3s; }
.menu-open .mobile-nav a:nth-child(6) { transition-delay: 0.35s; }

/* Buttons ================================================= */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 999px;
  transition: all 0.4s var(--easing);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn-primary:hover {
  background: var(--color-purple);
  transform: translateY(-2px);
}

.btn-purple {
  background: var(--color-purple);
  color: var(--color-white);
}
.btn-purple:hover {
  background: var(--color-purple-2);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-navy);
  border: 1.5px solid var(--color-navy);
}
.btn-ghost:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-navy);
}
.btn-arrow .arrow {
  display: inline-flex;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  align-items: center;
  justify-content: center;
  transition: 0.4s var(--easing);
}
.btn-arrow:hover .arrow {
  background: var(--color-purple);
  transform: translateX(3px);
}

.magnetic { display: inline-block; transition: transform 0.3s var(--easing); }

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

.hero {
  position: relative;
  padding: 200px 0 120px;
  overflow: hidden;
}

.hero-bg-soft {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-purple-glow), transparent 70%);
  top: -200px;
  right: -200px;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.7;
}

.hero-grid {
  position: relative;
  display: grid;
  /* showcase-kolom krimpt mee, zodat de kop ook rond 900–1100px naast
     het beeld blijft passen in plaats van eronder te vallen */
  grid-template-columns: minmax(0, 1fr) clamp(240px, 32vw, 440px);
  align-items: center;
  gap: 56px;
}

.hero-copy { max-width: 640px; }

.hero h1 { margin-bottom: 24px; }
.hero h1 .accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-purple);
  letter-spacing: -0.01em;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.hero-meta {
  display: flex;
  gap: 50px;
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}
.hero-meta .stat .num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-navy);
  line-height: 1;
  margin-bottom: 6px;
}
.hero-meta .stat .label {
  font-size: 0.82rem;
  color: var(--color-muted);
}

/* Hero showcase — mini-mockups van het werk zelf: deck · poster · post.
   Elk stuk is een eigen container, tekst schaalt in cqw zodat de mockups
   op elk formaat kloppen. */
.hero-showcase {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.12;
  isolation: isolate;
}

.showpiece {
  position: absolute;
  container-type: inline-size;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: translate 0.6s var(--easing), rotate 0.6s var(--easing),
              box-shadow 0.6s var(--easing);
}

/* Alle maatvoering binnen een kaart hangt aan .piece-inner: een element is
   nooit z'n eigen query-container, dus cqw op .showpiece zelf zou terugvallen
   op vw. Op de inner klopt 1cqw wél met 1% van de kaartbreedte. */
.piece-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Pitch deck slide (16:9) */
.piece-deck {
  top: 0; right: 0;
  width: 88%;
  aspect-ratio: 16 / 9;
  z-index: 1;
  rotate: -3deg;
  border-radius: 12px;
  background: var(--color-navy);
}
.piece-deck .piece-inner { padding: 6.5cqw 7cqw 5.5cqw; }
.piece-deck::before {
  content: "";
  position: absolute;
  width: 62%; aspect-ratio: 1;
  top: -24%; right: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.55), transparent 68%);
}
.deck-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.deck-eyebrow,
.deck-page {
  font-family: var(--font-display);
  font-size: 3cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.deck-eyebrow { color: var(--color-purple-soft); }
.deck-page { color: rgba(255, 255, 255, 0.4); }

.deck-body {
  position: relative;
  flex: 1;
  margin-top: 4cqw;
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  align-items: end;
  gap: 5cqw;
}
.deck-title {
  font-size: 7.4cqw;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-white);
}
.deck-title .script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.22em;
  letter-spacing: 0;
  color: var(--color-purple-soft);
}
.deck-chart {
  height: 25cqw;
  display: flex;
  align-items: flex-end;
  gap: 1.8cqw;
}
.deck-chart .bar {
  flex: 1;
  height: var(--h);
  border-radius: 1cqw 1cqw 0 0;
  background: rgba(255, 255, 255, 0.16);
}
.deck-chart .bar.hi {
  background: linear-gradient(180deg, var(--color-purple-soft), var(--color-purple));
}

/* Poster (5:7) */
.piece-poster {
  right: 0; bottom: 0;
  width: 46%;
  aspect-ratio: 5 / 7;
  z-index: 2;
  rotate: 5deg;
  border-radius: 8px;
  background: var(--gradient-purple);
  color: var(--color-white);
}
.piece-poster .piece-inner {
  padding: 8cqw 7cqw;
  justify-content: space-between;
}
.poster-ring {
  position: absolute;
  width: 68%; aspect-ratio: 1;
  right: -16%; top: 28%;
  border: 1cqw solid var(--color-gold);
  border-radius: 50%;
  opacity: 0.85;
}
.poster-date,
.poster-foot {
  position: relative;
  font-family: var(--font-display);
  font-size: 5cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.poster-type {
  position: relative;
  font-family: var(--font-display);
  font-size: 19cqw;
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* Visitekaartje (85 x 55 mm) */
.piece-card {
  left: 0; top: 55%;
  width: 56%;
  aspect-ratio: 85 / 55;
  z-index: 3;
  rotate: -7deg;
  border-radius: 6px;
  background: var(--color-cream);
}
.piece-card .piece-inner {
  padding: 9cqw 9cqw 8cqw;
}
.card-mark {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17cqw; height: 17cqw;
  border-radius: 50%;
  background: var(--color-purple);
  font-family: var(--font-display);
  font-size: 6.6cqw;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-white);
}
.card-name {
  position: relative;
  margin-top: auto;          /* naam + functie blijven als blok onderaan */
  font-family: var(--font-display);
  font-size: 9.4cqw;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-navy);
}
.card-role {
  position: relative;
  margin-top: 1.6cqw;
  font-family: var(--font-display);
  font-size: 4.4cqw;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* De stapel waaiert licht open bij hover */
.hero-showcase:hover .showpiece { box-shadow: 0 40px 90px rgba(15, 27, 61, 0.18); }
.hero-showcase:hover .piece-deck { translate: 0 -1.8%; rotate: -4.4deg; }
.hero-showcase:hover .piece-poster { translate: 2.5% 1%; rotate: 7deg; }
.hero-showcase:hover .piece-card { translate: -3.5% 1.5%; rotate: -9.5deg; }

/* Marquee ================================================= */

.marquee {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 22px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 56px;
  color: rgba(255, 255, 255, 0.85);
}
.marquee-track span::after {
  content: "";
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Section header ========================================== */

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 70px;
}
.section-head .intro h2 { margin-bottom: 0; }
.section-head .meta { color: var(--color-muted); }
.section-head.center {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Services ================================================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.service-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: 0.5s var(--easing);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-navy);
  box-shadow: var(--shadow);
}

.service-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy);
  transition: 0.4s var(--easing);
}
.service-card:hover .service-icon {
  background: var(--color-navy);
  color: var(--color-white);
}

.service-card h3 { margin-bottom: 4px; }
.service-card p { color: var(--color-muted); }
.service-card .price {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-soft);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service-card .price small {
  font-weight: 400;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Service detail ========================================= */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 80px 0;
  border-top: 1px solid var(--color-border);
}
.service-detail:first-child { border-top: none; padding-top: 0; }
.service-detail.reverse > .visual { order: -1; }
.service-detail .visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  background: var(--color-navy);
  position: relative;
}
.service-detail .visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: 1s var(--easing);
}
.service-detail:hover .visual img { transform: scale(1.04); }
.service-detail .visual .corner-tag {
  position: absolute;
  top: 22px; left: 22px;
  background: var(--color-white);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  box-shadow: var(--shadow-sm);
}

.service-detail .info h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 14px; }
.service-detail .info .lead { margin-bottom: 24px; }
.service-detail .info ul {
  list-style: none;
  margin: 18px 0 28px;
}
.service-detail .info ul li {
  padding: 10px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 0.95rem;
}
.service-detail .info ul li svg {
  color: var(--color-purple);
  flex-shrink: 0;
  margin-top: 4px;
}
.service-detail .info .price-line {
  display: flex;
  align-items: center;
  gap: 14px;
}
.service-detail .info .price-line .price-tag {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-navy);
}

/* Process ========================================= */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.process-step {
  position: relative;
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: 0.5s var(--easing);
}
.process-step:hover {
  transform: translateY(-3px);
  border-color: var(--color-navy);
  box-shadow: var(--shadow);
}
.process-step .num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-navy);
  margin-bottom: 18px;
  display: block;
  line-height: 1;
}
.process-step .num small { color: var(--color-purple); font-weight: 700; }
.process-step h3 { font-size: 1.3rem; margin-bottom: 10px; }
.process-step p { color: var(--color-muted); font-size: 0.93rem; }

/* Pricing ================================================ */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pricing-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 42px 36px;
  transition: 0.5s var(--easing);
}
.pricing-card.featured {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
  transform: scale(1.02);
}
.pricing-card.featured h3,
.pricing-card.featured .price { color: var(--color-white); }
.pricing-card .badge {
  position: absolute;
  top: 22px; right: 22px;
  background: var(--color-purple);
  color: var(--color-white);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pricing-card h3 { margin-bottom: 8px; }
.pricing-card .desc { color: var(--color-muted); font-size: 0.94rem; margin-bottom: 22px; }
.pricing-card.featured .desc { color: rgba(255,255,255,0.65); }
.pricing-card .price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
  color: var(--color-navy);
}
.pricing-card .price small {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-muted);
  margin-left: 4px;
}
.pricing-card.featured .price small { color: rgba(255,255,255,0.5); }
.pricing-card .price-note {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 28px;
}
.pricing-card.featured .price-note { color: rgba(255,255,255,0.5); }

.pricing-card ul {
  list-style: none;
  margin-bottom: 30px;
}
.pricing-card ul li {
  padding: 11px 0;
  font-size: 0.93rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--color-border-soft);
}
.pricing-card.featured ul li { border-color: rgba(255,255,255,0.08); }
.pricing-card ul li svg {
  color: var(--color-purple);
  flex-shrink: 0;
  margin-top: 2px;
}
.pricing-card.featured ul li svg { color: var(--color-purple-soft); }

.pricing-card:hover:not(.featured) {
  border-color: var(--color-navy);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* CTA Banner ============================================== */

.cta-banner {
  position: relative;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: clamp(50px, 7vw, 90px);
  overflow: hidden;
  margin: 0 28px;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}
.cta-banner::before {
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18), transparent 70%);
  top: -250px; right: -150px;
  filter: blur(60px);
  pointer-events: none;
}
.cta-banner > * { position: relative; }
.cta-banner h2 {
  color: var(--color-white);
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(1.9rem, 4vw, 3rem);
}
.cta-banner h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-purple-soft);
}
.cta-banner p { color: rgba(255,255,255,0.65); max-width: 580px; margin-bottom: 32px; font-size: 1rem; }
.cta-banner .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-banner .btn-ghost { color: var(--color-white); border-color: rgba(255,255,255,0.25); }
.cta-banner .btn-ghost:hover { background: var(--color-white); color: var(--color-navy); border-color: var(--color-white); }
.cta-banner .eyebrow { color: var(--color-purple-soft); }

/* Page hero (sub-pages) =================================== */

.page-hero {
  padding: 200px 0 80px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--color-purple-glow), transparent 70%);
  top: -300px; right: -200px;
  filter: blur(60px);
  pointer-events: none;
}
.page-hero > * { position: relative; }
.page-hero h1 { max-width: 1000px; margin-bottom: 22px; }
.page-hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-purple);
}
.page-hero .lead { font-size: 1.12rem; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-muted);
  margin-bottom: 28px;
}
.breadcrumb a:hover { color: var(--color-purple); }
.breadcrumb .sep { color: var(--color-border); }

/* Forms =================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.contact-info { position: sticky; top: 110px; }
.contact-info h2 { margin-bottom: 18px; }
.contact-info p { color: var(--color-muted); margin-bottom: 36px; }
.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-channel {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: 0.4s var(--easing);
}
.contact-channel:hover {
  border-color: var(--color-navy);
  transform: translateX(4px);
}
.contact-channel .icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-bg-2);
  color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: 0.4s var(--easing);
}
.contact-channel:hover .icon {
  background: var(--color-navy);
  color: var(--color-white);
}
.contact-channel .info .label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2px;
  display: block;
  font-weight: 600;
}
.contact-channel .info .value {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-navy);
}

.contact-form {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 44px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { margin-bottom: 22px; position: relative; }
.form-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-navy);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: 0.3s var(--easing);
  outline: none;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-navy);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(15, 27, 61, 0.06);
}
.form-field textarea { resize: vertical; min-height: 130px; }

.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.option-pill {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s var(--easing);
  user-select: none;
}
.option-pill:hover { border-color: var(--color-navy); }
.option-pill.active {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

/* Footer ================================================== */

.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 100px 0 40px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 70%);
  bottom: -300px; left: -200px;
  filter: blur(80px);
  pointer-events: none;
}
.site-footer > * { position: relative; }

.footer-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 60px;
  margin-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 40px;
  flex-wrap: wrap;
}
.footer-cta h2 {
  color: var(--color-white);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  margin: 0;
  max-width: 640px;
}
.footer-cta h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-purple-soft);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* logo-footer.png is voor de donkere achtergrond gemaakt: witte letters met de
   'lev' in de echte logokleur #6B2FB3. Dus geen invert-filter en geen licht
   vlak eronder, het logo staat direct op het navy.
   width:auto is niet optioneel: het width-attribuut op de <img> telt als een
   opgegeven breedte van 2000px, die door max-width:100% wordt teruggezet naar
   de kolombreedte. Het logo werd daardoor plat uitgerekt. */
.footer-brand img { height: 50px; width: auto; margin-bottom: 22px; }
.footer-brand p { color: rgba(255,255,255,0.6); max-width: 320px; line-height: 1.7; font-size: 0.94rem; }

.footer-col h4 {
  color: var(--color-white);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 600;
  opacity: 0.5;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
  color: rgba(255,255,255,0.85);
  font-size: 0.94rem;
  transition: 0.3s var(--easing);
}
.footer-col ul a:hover { color: var(--color-purple-soft); padding-left: 4px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.45);
}
.footer-bottom .social {
  display: flex;
  gap: 10px;
}
.footer-bottom .social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: 0.3s var(--easing);
}
.footer-bottom .social a:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}

/* Bento — clean version ================================= */
/* =========================================================
   Waarom wij: één uitgelicht blok met de belofte, de rest als
   tekst ernaast. Geen raster van gelijke kaarten, zodat korte
   punten geen lege ruimte hoeven op te vullen.
   ========================================================= */

.voordelen {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.voordeel-uitgelicht {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  /* met vijf voordelen ernaast oogde 340px te gedrongen; volledig meerekken
     maakte het blok juist een leeg vlak, dus hier ergens tussenin. */
  min-height: 430px;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-navy);
  color: var(--color-white);
}
.voordeel-uitgelicht .eyebrow { color: rgba(255, 255, 255, 0.5); margin: 0; }
.voordeel-uitgelicht h3 { color: var(--color-white); font-size: 1.4rem; margin-bottom: 10px; }
.voordeel-uitgelicht p { color: rgba(255, 255, 255, 0.65); font-size: 0.93rem; }

.big-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--color-purple-soft);
}

.voordeel-lijst { list-style: none; margin: 0; padding: 0; }
.voordeel-lijst li {
  padding: 28px 0;
  border-top: 1px solid var(--color-border);
}
.voordeel-lijst li:first-child { border-top: 0; padding-top: 4px; }
.voordeel-lijst .eyebrow { margin-bottom: 10px; }
.voordeel-lijst h3 { font-size: 1.35rem; margin-bottom: 8px; }
.voordeel-lijst p { color: var(--color-muted); font-size: 0.95rem; }

@media (max-width: 880px) {
  .voordelen { grid-template-columns: 1fr; gap: 40px; }
  .voordeel-uitgelicht { min-height: 0; padding: 32px; }
}

/* FAQ ===================================================== */
.faq-list {
  max-width: 860px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 24px 0;
  cursor: pointer;
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-bg-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy);
  transition: 0.3s var(--easing);
  flex-shrink: 0;
  margin-left: 20px;
}
.faq-item[open] summary .toggle {
  background: var(--color-navy);
  color: var(--color-white);
  transform: rotate(45deg);
}
.faq-item p {
  margin-top: 14px;
  color: var(--color-muted);
  max-width: 680px;
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Big Quote ================================================ */
.big-quote {
  position: relative;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}
.big-quote .quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-navy);
  margin-bottom: 36px;
}
.big-quote .quote em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-purple);
}
.big-quote .person {
  display: inline-flex;
  align-items: center;
  gap: 17px;
}
.big-quote .person img {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;   /* portret loopt tot borsthoogte: gezicht bovenaan houden */
  background: var(--color-bg-2);
}
.big-quote .person .name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-navy);
}
.big-quote .person .role { font-size: 0.96rem; color: var(--color-muted); }

/* Stats band on navy ====================================== */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.stats-band .stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-white);
}
.stats-band .stat-label {
  color: rgba(255,255,255,0.55);
  margin-top: 12px;
  font-size: 0.92rem;
}

/* Section variants ======================================= */
.section-cream { background: var(--color-cream); }
.section-navy { background: var(--color-navy); color: var(--color-white); }
.section-navy h2 { color: var(--color-white); }
.section-navy .lead { color: rgba(255,255,255,0.65); }
.section-navy .eyebrow { color: rgba(255,255,255,0.55); }

/* Timeline ============================================== */
.timeline {
  position: relative;
  padding-left: 40px;
  max-width: 880px;
  margin: 0 auto;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-purple), transparent);
}
.timeline-item {
  position: relative;
  padding: 0 0 60px 30px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-purple);
  box-shadow: 0 0 0 5px var(--color-bg);
}
.timeline-item .step-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-purple);
  margin-bottom: 10px;
}
.timeline-item h3 { margin-bottom: 12px; }
.timeline-item p { color: var(--color-muted); max-width: 540px; }

/* Reveal animations ====================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Responsive =============================================== */

@media (max-width: 1024px) {
  .section-head { grid-template-columns: 1fr; gap: 30px; }
  .services-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .pricing-card.featured { transform: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { position: static; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .service-detail { grid-template-columns: 1fr; gap: 30px; padding: 50px 0; }
  .service-detail.reverse > .visual { order: 0; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
}

/* Pas hier valt de hero terug naar één kolom en zakt de showcase onder de tekst */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
  .hero-copy { max-width: none; }
  .hero-showcase { max-width: 420px; margin: 0 auto; }
}

/* Logo + menu + knop + tussenruimtes passen onder deze breedte niet meer
   naast elkaar; daaronder klapt de balk in naar het hamburgermenu. */
/* Zes menu-items, het logo en de knop hebben samen 1070px nodig. Daaronder
   past het niet meer naast elkaar en gaan we over op het hamburgermenu. */
@media (max-width: 1080px) {
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 768px) {
  .brand img { height: 54px; }
  .site-header.scrolled .brand img { height: 46px; }
  .hero { padding: 160px 0 80px; }
  .hero-meta { flex-wrap: wrap; gap: 24px; }
  .hero-showcase { max-width: 340px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .options-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-form { padding: 28px; }
  .cta-banner { padding: 50px 28px; }
}

/* =========================================================
   Diensten als redactionele lijst: genummerde rijen met een
   dunne scheidslijn. Rijen groeien mee met hun inhoud, zodat
   een korte dienst niet kunstmatig wordt opgevuld.
   ========================================================= */

.dienstenlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.dl-rij {
  display: grid;
  grid-template-columns: 84px minmax(170px, 0.9fr) 1.6fr;
  gap: 24px 34px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--color-border);
}

.dl-nummer {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-purple);
}

.dl-naam {
  margin: 0;
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  letter-spacing: -0.02em;
}

.dl-items {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* opsommingstekens: klein paars bolletje, uitgelijnd buiten de tekst */
.dl-items li {
  position: relative;
  padding-left: 20px;
}
.dl-items li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-purple);
}
.dl-items li {
  color: var(--color-muted);
  line-height: 1.6;
}

@media (max-width: 720px) {
  /* nummer en naam op één regel, opsomming eronder */
  .dl-rij {
    grid-template-columns: 58px 1fr;
    gap: 12px 16px;
    padding: 28px 0;
  }
  .dl-items { grid-column: 1 / -1; padding-top: 0; }
}

/* =========================================================
   Bengelmedia-geïnspireerde laag
   Handgeschreven accenten · stevige koppen · kleurtegels ·
   fellere CTA — eigen navy/paars palet, speelse energie
   ========================================================= */

/* Handgeschreven script voor accent-woorden (i.p.v. serif-italic) */
.text-italic,
.hero h1 .accent,
.cta-banner h2 em,
.page-hero h1 em,
.footer-cta h2 em,
.big-quote .quote em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 700;
  font-size: 1.18em;
  letter-spacing: 0;
  line-height: 0.9;
}

/* Koppen iets steviger voor meer punch */
h2 { font-weight: 700; }

/* Fellere CTA-band: levendig paars-gradient i.p.v. vlak navy */
.cta-banner {
  background: linear-gradient(140deg, var(--color-purple) 0%, var(--color-purple-3) 100%);
}
.cta-banner .eyebrow { color: rgba(255, 255, 255, 0.82); }
.cta-banner h2 em { color: var(--color-teal-soft); }
.cta-banner .btn-purple { background: var(--color-white); color: var(--color-purple-2); }
.cta-banner .btn-purple:hover { background: var(--color-navy); color: var(--color-white); }

/* Kleurrijke diensttegels (homepage) — massieve kleurblokken */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.dienst-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 290px;
  padding: 36px 32px 30px;
  border-radius: var(--radius-lg);
  color: var(--color-white);
  overflow: hidden;
  transition: transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
}
.dienst-tile::after {
  content: "";
  position: absolute;
  right: -45px; bottom: -45px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  transition: transform 0.6s var(--easing);
}
.dienst-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.dienst-tile:hover::after { transform: scale(1.3); }
.dienst-tile > * { position: relative; }
.dienst-tile .tile-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.16);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.dienst-tile h3 { color: #fff; font-size: 1.5rem; margin-top: 2px; }
.dienst-tile p { color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; flex-grow: 1; }
.dienst-tile .tile-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}

.tile-purple { background: linear-gradient(160deg, #8B5CF6, #6D28D9); }
.tile-teal   { background: linear-gradient(160deg, #2DB8C4, #1C8C97); }
.tile-gold   { background: linear-gradient(160deg, #F6BE4B, #E89A1C); }

/* Gouden tegel: donkere tekst voor leesbaarheid */
.tile-gold, .tile-gold h3 { color: var(--color-navy); }
.tile-gold p { color: rgba(15, 27, 61, 0.72); }
.tile-gold .tile-icon { background: rgba(15, 27, 61, 0.14); color: var(--color-navy); }
.tile-gold .tile-price { color: var(--color-navy); border-top-color: rgba(15, 27, 61, 0.22); }
.tile-gold::after { background: rgba(15, 27, 61, 0.08); }

@media (max-width: 1024px) {
  .tile-grid { grid-template-columns: 1fr; }
}

/* Interactieve tijdlijn — zigzaggende licht-sliert ======== */

.timeline-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: sliertWobble 2.6s ease-in-out infinite;
}
/* Het gloeiende segment dat door het golvende pad reist = de sliert */
.timeline-svg path {
  fill: none;
  stroke: var(--color-purple-soft);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.9)) drop-shadow(0 0 12px rgba(124, 58, 237, 0.6));
  opacity: 0;
  transition: opacity 0.3s var(--easing);
}
/* Lichte shimmy zodat-ie ook stil blijft leven */
@keyframes sliertWobble {
  0%, 100% { transform: translateX(-2px); }
  50%      { transform: translateX(2px); }
}
/* Stippen lichten op zodra de sliert ze passeert */
.timeline-item::before {
  transition: transform 0.4s var(--easing), background 0.4s var(--easing), box-shadow 0.4s var(--easing);
}
.timeline-item.is-lit::before {
  background: var(--color-white);
  transform: scale(1.3);
  box-shadow: 0 0 0 5px var(--color-bg), 0 0 16px 3px rgba(124, 58, 237, 0.85);
}
@media (prefers-reduced-motion: reduce) {
  .timeline-svg { animation: none; }
  .showpiece { transition: none; }
  .hero-showcase:hover .piece-deck,
  .hero-showcase:hover .piece-poster,
  .hero-showcase:hover .piece-card { translate: none; }
}

/* =========================================================
   Omdraaibaar drukwerk — echte ontwerpen in 3D
   Klik draait het stuk om, muisbeweging geeft een lichte kanteling
   ========================================================= */

.flipwork-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 48px;
  align-items: start;
}

.flip-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.flip-item--card .flip-stage { max-width: 520px; }
.flip-item--poster .flip-stage { max-width: 370px; }

.flip-stage {
  perspective: 1500px;
  width: 100%;
}

/* Kantelt mee met de muis — korte transitie zodat het direct aanvoelt */
.flip-tilt {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 0.4s var(--easing);
}
.flip-tilt:focus-visible {
  outline: 2px solid var(--color-purple);
  outline-offset: 14px;
  border-radius: 12px;
}

/* De daadwerkelijke omslag — trager, want dat is de hoofdbeweging */
.flip-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 85 / 55);
  transform-style: preserve-3d;
  transition: transform 0.9s var(--easing);
}
.flip-item.is-flipped .flip-card { transform: rotateY(180deg); }

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
}
.flip-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flip-back { transform: rotateY(180deg); }

.flip-caption { display: flex; flex-direction: column; gap: 6px; }
.flip-caption h3 { margin: 0; }
.flip-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--color-muted);
}
.flip-hint svg { flex: none; }
.flip-hint .hint-terug { display: none; }
.flip-item.is-flipped .flip-hint .hint-voor { display: none; }
.flip-item.is-flipped .flip-hint .hint-terug { display: inline; }

@media (max-width: 880px) {
  .flipwork-grid { grid-template-columns: 1fr; gap: 56px; }
  .flip-item--card .flip-stage,
  .flip-item--poster .flip-stage { max-width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .flip-tilt { transition: none; transform: none; }
  .flip-card { transition: none; }
}

/* =========================================================
   Presentatie-voorvertoning — drie slides als stapel
   Klik legt de bovenste achteraan, zo blader je door de drie
   ========================================================= */

.deckwork-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 56px;
  align-items: start;
}

.deck-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.deck-stage {
  perspective: 1400px;
  width: 100%;
}

.deck-fan {
  position: relative;
  display: block;
  width: 100%;
  /* ruimte voor de uitwaaierende slides eronder en ernaast */
  aspect-ratio: 1400 / 950;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.deck-fan:focus-visible {
  outline: 2px solid var(--color-purple);
  outline-offset: 14px;
  border-radius: 12px;
}

.deck-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 88%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  transform-origin: 50% 100%;
  translate: calc(var(--i, 0) * 6.5%) calc(var(--i, 0) * 11%);
  rotate: calc(var(--i, 0) * -1.6deg);
  z-index: calc(10 - var(--i, 0));
  transition: translate 0.6s var(--easing), rotate 0.6s var(--easing),
              filter 0.6s var(--easing);
}
/* achterste slides iets terugtrekken zodat de voorste leidt */
.deck-slide:not([data-pos="0"]) { filter: brightness(0.94); }

.deck-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deck-fan:hover .deck-slide {
  translate: calc(var(--i, 0) * 7.6%) calc(var(--i, 0) * 12.6%);
  rotate: calc(var(--i, 0) * -2.2deg);
}

.deck-caption { display: flex; flex-direction: column; gap: 6px; }
.deck-caption h3 { margin: 0; }
.deck-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--color-muted);
}
.deck-hint svg { flex: none; }

@media (max-width: 880px) {
  .deckwork-grid { grid-template-columns: 1fr; gap: 56px; }
  /* width:100% is nodig — met alleen margin:auto krimpt het item
     naar zijn tekstbreedte in plaats van de kolom te vullen */
  .deck-item { width: 100%; max-width: 460px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-slide { transition: none; }
  .deck-fan:hover .deck-slide {
    translate: calc(var(--i, 0) * 6.5%) calc(var(--i, 0) * 11%);
    rotate: calc(var(--i, 0) * -1.6deg);
  }
}

/* Live ingesloten deck — staat over de volle breedte boven de stapels */
.deck-item--live { grid-column: 1 / -1; }

.live-frame {
  width: 100%;
  max-width: 940px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-navy);
  box-shadow: var(--shadow-lg);
}

/* browserbalkje, zodat het als een live site leest en niet als plaatje */
.live-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
}
.live-bar i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.live-bar .live-url {
  margin-left: 10px;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}

.live-viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-navy);
}
.live-viewport iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Het deck vangt anders het muiswiel af en blokkeert het scrollen van
     de pagina. Pas na een klik neemt het frame de muis over. */
  pointer-events: none;
}
.live-viewport.is-actief iframe { pointer-events: auto; }

.live-activeer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 22px;
  background: none;
  cursor: pointer;
}
.live-activeer span {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15, 27, 61, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s var(--easing);
}
.live-activeer:focus-visible span { opacity: 1; outline: 2px solid var(--color-purple); outline-offset: 3px; }
.live-viewport.is-actief .live-activeer { display: none; }

.deck-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
}

@media (max-width: 880px) {
  .deck-item--live { max-width: none; }
  .live-viewport { aspect-ratio: 4 / 3; }
}

/* Uitgeklapte stand — de stapel spreidt over de volle breedte zodat
   alle drie de pagina's naast elkaar leesbaar zijn */
.deck-item.is-spread { grid-column: 1 / -1; }

.deck-item.is-spread .deck-fan {
  aspect-ratio: auto;
  /* hoogte volgt uit de slidebreedte: 31% van de stage op 16:9 */
  padding-top: 17.5%;
}
.deck-item.is-spread .deck-slide {
  width: 31%;
  translate: calc(var(--i, 0) * 111.5%) 0;
  rotate: 0deg;
  filter: none;
}
.deck-item.is-spread .deck-fan:hover .deck-slide {
  translate: calc(var(--i, 0) * 111.5%) 0;
  rotate: 0deg;
}
.deck-slide { transition: translate 0.6s var(--easing), rotate 0.6s var(--easing),
                          width 0.6s var(--easing), filter 0.6s var(--easing); }

/* hint wisselt mee met de stand */
.deck-hint .hint-uit { display: none; }
.deck-item.is-spread .deck-hint .hint-op { display: none; }
.deck-item.is-spread .deck-hint .hint-uit { display: inline; }

@media (max-width: 880px) {
  /* op smal scherm onder elkaar in plaats van naast elkaar */
  .deck-item.is-spread .deck-fan { padding-top: 0; height: auto; }
  .deck-item.is-spread .deck-slide {
    position: relative;
    display: block;      /* span blijft anders inline en negeert de marge */
    width: 100%;
    translate: none;
    margin-bottom: 14px;
  }
}

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

/* =========================================================
   Over mij — foto zweeft linksboven, tekst loopt eromheen
   ========================================================= */

.verhaal { max-width: 800px; }


/* Uitgeknipte foto: geen kader of schaduw, hij staat los op de achtergrond */
.verhaal-foto {
  float: left;
  width: 300px;
  margin: 0 34px 18px 0;
}
.verhaal-foto img {
  display: block;
  width: 100%;
  height: auto;
}

.verhaal p {
  margin-bottom: 20px;
  line-height: 1.75;
  color: var(--color-muted);
}
.verhaal p:first-of-type {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 24px;
}
.verhaal p:last-child { margin-bottom: 0; }

/* onder deze breedte wordt zwevende tekst te smal om te lezen */
@media (max-width: 720px) {
  .verhaal-foto {
    float: none;
    width: 220px;
    margin: 0 0 24px;
  }
}

/* Labeltje boven een werktitel (drukwerk, presentaties).
   Stond eerder alleen binnen .work-card in portfolio.html; nu gedeeld. */
.meta-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-purple);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 4px;
}

/* Het verhaal sluit direct aan op de paginakop: samen met de 80px
   onderruimte van .page-hero was 100px erbovenop te veel lucht. */
.verhaal-sectie { padding-top: 8px; }

/* Portfolio-uitnodiging op de homepage: geen raster met werk, maar
   één blok dat doorverwijst naar de portfoliopagina */
.portfolio-cta {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.portfolio-cta h2 { margin-bottom: 18px; }
.portfolio-cta p {
  color: var(--color-muted);
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  margin: 0 auto 32px;
  max-width: 56ch;
}

/* Uurtarief (prijzenpagina) ================================
   Zelfde redactionele opzet als de dienstenlijst: geen kaartjes met
   schaduwen, maar rustige regels met lijnen ertussen. */
.tarief {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1.15fr;
  gap: 60px;
  align-items: start;
}

.tarief-bedrag {
  padding: 44px 40px 38px;
  border-radius: var(--radius-lg);
  background: var(--color-navy);
  color: var(--color-white);
}
.tarief-bedrag .euro {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 600;
  color: var(--color-purple-soft);
  vertical-align: top;
  line-height: 1.5;
}
.tarief-bedrag .cijfer {
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 8vw, 6.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-white);
}
.tarief-bedrag .per {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-purple-soft);
}
.tarief-bedrag .btw {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.tarief-punten { list-style: none; margin: 0; padding: 0; }
.tarief-punten li {
  padding: 26px 0;
  border-top: 1px solid var(--color-border);
}
.tarief-punten li:first-child { border-top: 0; padding-top: 4px; }
.tarief-punten h3 { font-size: 1.25rem; margin-bottom: 8px; }
.tarief-punten p { color: var(--color-muted); font-size: 0.95rem; line-height: 1.7; }

/* Urenindicatie per soort opdracht */
.uren-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.uren-rij {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 20px 30px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
}
.uren-naam {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--color-navy);
}
.uren-tijd { color: var(--color-muted); font-size: 0.97rem; }
.uren-bedrag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-purple);
  text-align: right;
  white-space: nowrap;
}
.uren-noot {
  margin-top: 26px;
  color: var(--color-muted);
  font-size: 0.9rem;
}

@media (max-width: 860px) {
  .tarief { grid-template-columns: 1fr; gap: 40px; }
  .tarief-bedrag { padding: 34px 30px 28px; }
}
@media (max-width: 620px) {
  /* op smal scherm onder elkaar: naam boven, uren en bedrag op één regel eronder */
  .uren-rij {
    grid-template-columns: 1fr auto;
    gap: 6px 20px;
  }
  .uren-naam { grid-column: 1 / -1; }
}

/* Extra's op de prijzenpagina: dezelfde regels, maar zonder urenkolom.
   Lisa wil geen aantal uren beloven, dus staat er een omschrijving. */
.extra-lijst .uren-rij { grid-template-columns: minmax(190px, 0.7fr) 1fr; }
.extra-lijst .uren-tijd { line-height: 1.6; }
@media (max-width: 620px) {
  .extra-lijst .uren-rij { grid-template-columns: 1fr; }
}

/* Lopende tekstblokken, voor de inleidingen die uitleggen wat er te zien is */
.intro-tekst { max-width: 68ch; }
.intro-tekst h2 { margin-bottom: 20px; }
.intro-tekst p {
  color: var(--color-muted);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.8;
}
.intro-tekst p + p { margin-top: 18px; }

/* Telefoon: losse fouten in de mobiele bediening ==========
   1. De hamburger zit binnen .site-header, en .mobile-nav (z-index 99) is
      een broertje dat erover heen schildert. Het kruisje was dus wel te
      zien maar niet aan te tikken, en het menu was niet meer te sluiten. */
.menu-toggle { position: relative; z-index: 101; }

/* 2. De pagina scrolde vrolijk door achter het open menu. */
body.menu-open { overflow: hidden; }

/* 4. Na het scrollen kreeg .site-header een backdrop-filter. Een element met
      een backdrop-filter wordt containing block voor fixed-gepositioneerde
      kinderen, en .mobile-nav is een kind van de header. Het menu rekende
      zijn inset: 0 daardoor niet meer af tegen het scherm maar tegen de
      smalle headerbalk: het navy vlak kromp tot die balk en je keek dwars
      door het open menu heen. Bovenaan de pagina heeft de header geen filter,
      vandaar dat het daar wel goed ging.
      Zolang het menu openstaat zetten we het filter uit. De blur heeft dan
      toch geen functie, want het menu dekt het hele scherm af. */
body.menu-open .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: none;
}

/* Sinds Prijzen erbij kwam staan er zeven links in het menu; de zevende had
   nog geen vertraging en kwam daardoor los van de rij binnenvallen. */
.menu-open .mobile-nav a:nth-child(7) { transition-delay: 0.4s; }

/* 5. Met het menu open was het logo helemaal weg, niet alleen onleesbaar.
      Twee dingen tegelijk: .brand is niet gepositioneerd, dus binnen de
      stacking context van de header schildert .mobile-nav (z-index 99) er
      overheen. Dat is dezelfde reden waarom het kruisje bij punt 1 z-index
      101 kreeg. En zodra het logo weer bovenop ligt, staat de donkere versie
      op een donkerblauw vlak. Dus allebei: omhoog tillen en de lichte variant
      uit de footer lenen. Het pad is relatief aan deze stylesheet, niet aan
      de pagina. Beide logo's zijn 2000x800, dus de hoogteregels blijven kloppen. */
body.menu-open .brand { position: relative; z-index: 101; }
body.menu-open .brand img { content: url("../logo-footer.png"); }

/* 3. Op een telefoon bestaat hover niet, dus de hint over het ingesloten
      deck bleef onzichtbaar. Alleen tonen bij hover waar hover bestaat. */
@media (hover: hover) {
  .live-viewport:hover .live-activeer span { opacity: 1; }
}
@media (hover: none) {
  .live-activeer span { opacity: 1; }
}

/* Twee rasters bleven op een telefoon naast elkaar staan, waardoor de pagina
   horizontaal ging schuiven. Op werkwijze zelfs tot 516px op een scherm van 375. */
.spelregels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) {
  .spelregels-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* de vier processtappen naast elkaar werden smaller dan hun eigen inhoud */
  .process-grid { grid-template-columns: 1fr; }
}

/* Rasteritems mogen standaard niet kleiner worden dan hun inhoud, waardoor ze
   uit hun kolom groeien. Op smalle schermen willen we juist wel dat ze krimpen. */
.process-grid > *, .spelregels-grid > * { min-width: 0; }

/* Inleiding die direct onder een paginakop staat: de 80px onderruimte van
   .page-hero plus 100px bovenruimte van de sectie gaf een gat van 180px.
   De negatieve marge trekt de onderruimte van de kop grotendeels terug, zodat
   de inleiding als vervolg op de lead leest en niet als losse sectie. */
.intro-sectie {
  padding-top: 0;
  margin-top: -48px;
}

/* Contactformulier: melding na versturen ==================
   Het formulier gaf vroeger een nepbevestiging zonder iets te versturen.
   Deze regel toont wat er echt gebeurd is. */
.form-melding {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.6;
}
.form-melding.is-ok {
  background: var(--color-purple-pale);
  color: var(--color-purple-3);
}
.form-melding.is-fout {
  background: #FDECEC;
  color: #9B1C1C;
}

/* Valstrik voor spambots: onzichtbaar, maar niet display:none,
   want sommige bots vullen alleen velden in die in de DOM staan. */
.verborgen-veld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}