/* ==========================================================
   Identiteitslab · donkerblauw + zilver
   ========================================================== */

:root {
  --navy-950: #050B1C;
  --navy-900: #0A1430;
  --navy-800: #111E42;
  --navy-700: #1A2A57;
  --silver-100: #F2F4F7;
  --silver-200: #E3E7ED;
  --silver-300: #CBD2DC;
  --silver-400: #A3ACBA;
  --silver-500: #7C8697;
  --paper: #F5F6F8;
  --silver-grad: linear-gradient(135deg, #F4F6F9 0%, #C3CAD5 35%, #EEF1F5 55%, #9EA7B5 100%);
  --navy-grad: linear-gradient(135deg, #1A2A57, #6E7A92);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --radius: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--silver-200);
  background: var(--navy-950);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
h1 em, h2 em, h3 em, .statement em {
  font-style: italic;
  background: var(--silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }

.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--silver-400);
  margin: 0 0 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--silver-grad);
}

section { position: relative; padding: clamp(5rem, 11vw, 9rem) clamp(1rem, 5vw, 4rem); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: .92rem; letter-spacing: .02em;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.btn-silver {
  background: var(--silver-grad);
  background-size: 200% 200%;
  color: var(--navy-900);
  box-shadow: 0 10px 30px -10px rgba(203, 210, 220, .45), inset 0 1px 0 rgba(255,255,255,.8);
}
.btn-silver:hover { transform: translateY(-2px); background-position: 100% 100%; }
.btn-ghost { border: 1px solid rgba(203, 210, 220, .3); color: var(--silver-200); }
.btn-ghost:hover { border-color: var(--silver-300); background: rgba(255,255,255,.04); }
.btn-lg { padding: 1.15rem 2.2rem; font-size: 1rem; }

.text-link {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem;
  font-weight: 600; font-size: .92rem; letter-spacing: .02em;
  border-bottom: 1px solid currentColor; padding-bottom: .2rem;
}
.text-link span { transition: transform .3s var(--ease); }
.text-link:hover span { transform: translateX(5px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem clamp(1rem, 5vw, 4rem);
  transition: background .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(5, 11, 28, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: .8rem; padding-bottom: .8rem;
  border-color: rgba(203, 210, 220, .08);
}
.logo { display: flex; align-items: center; gap: .65rem; }
.logo-mark svg {
  width: 30px; height: 30px;
  fill: none; stroke: var(--silver-300); stroke-width: 1.6; stroke-linecap: round;
}
.logo-text {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--silver-100);
}
.logo-text em { font-style: italic; color: var(--silver-400); }
.nav-links { display: flex; align-items: center; gap: 2rem; font-size: .9rem; }
.nav-links a { color: var(--silver-300); transition: color .2s; }
.nav-links a:hover { color: #fff; }
.nav-links .nav-cta {
  padding: .6rem 1.2rem; border-radius: 999px;
  background: var(--silver-grad); color: var(--navy-900); font-weight: 600;
}
.nav-links .nav-cta:hover { color: var(--navy-900); box-shadow: 0 8px 24px -8px rgba(203,210,220,.6); }
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; height: 1.5px; background: var(--silver-200); margin: 6px 0; transition: transform .3s; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 8rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(26, 42, 87, .9), transparent 60%),
    var(--navy-950);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; }
.orb-1 { width: 520px; height: 520px; background: #22366E; top: -120px; right: -80px; animation: float 14s ease-in-out infinite; }
.orb-2 { width: 380px; height: 380px; background: #3B4A6E; bottom: -140px; left: -120px; opacity: .35; animation: float 18s ease-in-out infinite reverse; }
@keyframes float { 50% { transform: translate(30px, 40px); } }
.rings {
  position: absolute; width: min(1100px, 140vw);
  top: 50%; left: 62%; transform: translate(-50%, -50%);
  fill: none; stroke: rgba(203, 210, 220, .07); stroke-width: 1;
  animation: spin 120s linear infinite;
}
.rings circle:nth-child(2) { stroke-dasharray: 2 10; stroke: rgba(203,210,220,.14); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.hero-inner {
  position: relative; width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.hero h1 { font-size: clamp(2.7rem, 6.2vw, 5.2rem); color: var(--silver-100); }
.lead { font-size: 1.12rem; color: var(--silver-300); max-width: 34rem; font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.hero-tracks {
  list-style: none; padding: 0; margin: 3rem 0 0;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  font-size: .85rem; color: var(--silver-300);
}
.hero-tracks li { display: flex; align-items: center; gap: .6rem; }
.hero-tracks span { font-family: var(--serif); font-style: italic; color: var(--silver-500); }

.hero-photo { margin: 0; position: relative; }
.hero-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 200px 200px var(--radius) var(--radius);
  filter: grayscale(.35) contrast(1.05);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
}
.hero-photo::before {
  content: ""; position: absolute; inset: -14px;
  border-radius: 214px 214px 30px 30px;
  border: 1px solid rgba(203, 210, 220, .22);
  pointer-events: none;
}
.hero-photo figcaption {
  position: absolute; left: -1.5rem; bottom: 2.2rem;
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1.2rem; border-radius: 14px;
  background: rgba(10, 20, 48, .78); backdrop-filter: blur(10px);
  border: 1px solid rgba(203, 210, 220, .18);
  font-size: .85rem; color: var(--silver-200);
}
.key-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--silver-grad); box-shadow: 0 0 12px rgba(227,231,237,.8); }

.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  width: 24px; height: 38px; border: 1px solid rgba(203,210,220,.35); border-radius: 12px;
}
.scroll-hint span {
  position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: var(--silver-300); animation: scrolly 2s infinite;
}
@keyframes scrolly { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- Statement ---------- */
.statement {
  background: var(--navy-900);
  text-align: center;
  padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid rgba(203,210,220,.06);
  border-bottom: 1px solid rgba(203,210,220,.06);
}
.statement p {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.35;
  max-width: 52rem; margin: 0 auto; color: var(--silver-200);
}

/* ---------- Feature (ondernemers / teams) ---------- */
.feature { background: var(--navy-950); }
.feature-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.feature-inner.reverse .feature-photo { order: 2; }
.feature-photo { margin: 0; position: relative; }
.feature-photo img {
  width: 100%; aspect-ratio: 5 / 6; object-fit: cover;
  border-radius: var(--radius); filter: grayscale(.3) contrast(1.05);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.feature-badge {
  position: absolute; left: 1.2rem; bottom: 1.2rem;
  padding: .55rem 1rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(10,20,48,.8); color: var(--silver-100); backdrop-filter: blur(8px);
  border: 1px solid rgba(203,210,220,.2);
}
.feature-copy h2 { color: var(--silver-100); }
.feature-lead { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--silver-200); font-weight: 300; }
.feature-copy p { color: var(--silver-300); font-weight: 300; }
.feature-copy .text-link { color: var(--silver-100); }

.feature-light { background: var(--paper); color: var(--navy-800); }
.feature-light .eyebrow { color: var(--silver-500); }
.feature-light .eyebrow::before { background: var(--navy-700); }
.feature-light h2 { color: var(--navy-900); }
.feature-light h2 em { background: var(--navy-grad); -webkit-background-clip: text; background-clip: text; }
.feature-light .feature-lead { color: var(--navy-800); }
.feature-light .feature-copy p { color: #3B4660; }
.feature-light .text-link { color: var(--navy-900); }
.feature-light .feature-photo img { box-shadow: 0 40px 80px -40px rgba(10,20,48,.5); }

.ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; font-size: .95rem; }
.ticks li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--navy-700);
}

.compass-grid {
  max-width: 1240px; margin: clamp(3rem, 7vw, 5rem) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.compass-item {
  padding: 1.6rem; border-radius: 18px;
  border: 1px solid rgba(203,210,220,.14);
  background: rgba(255,255,255,.025);
  transition: border-color .3s, background .3s, transform .4s var(--ease);
}
.compass-item:hover { border-color: rgba(203,210,220,.4); background: rgba(255,255,255,.05); transform: translateY(-4px); }
.ci-icon {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--silver-grad); color: var(--navy-900); font-size: 1.1rem; margin-bottom: 1rem;
}
.compass-item h4 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; margin: 0 0 .3rem; color: var(--silver-100); }
.compass-item p { margin: 0; font-size: .9rem; color: var(--silver-400); }

/* Review */
.review {
  margin: 2rem 0 0; padding: 1.6rem 1.8rem;
  border-radius: 18px; background: #fff;
  border: 1px solid rgba(10,20,48,.08);
  box-shadow: 0 20px 40px -30px rgba(10,20,48,.4);
  position: relative;
}
.review-photo {
  display: block; width: calc(100% + 3.6rem); max-width: none; margin: -1.6rem -1.8rem 1.8rem;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%;
  border-radius: 18px 18px 0 0;
}
.review:has(.review-photo)::before { content: none; }
.review::before {
  content: "“"; position: absolute; top: -.35em; left: 1.2rem;
  font-family: var(--serif); font-size: 4.5rem; line-height: 1;
  background: var(--navy-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.review blockquote { margin: 0; }
.review blockquote p {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.12rem; line-height: 1.55; color: var(--navy-800) !important;
}
.review figcaption { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; font-size: .88rem; color: var(--silver-500); }
.review figcaption strong { color: var(--navy-900); font-weight: 600; }
.review-avatar {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: var(--navy-900); display: grid; place-items: center;
}
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-avatar.no-photo img { display: none; }
.review-avatar.no-photo::after {
  content: attr(data-initials); font-family: var(--serif); font-size: 1.2rem; color: var(--silver-100);
}

/* Team Inspire sfeerbeeld */
.team-banner {
  position: relative; max-width: 1240px; margin: clamp(3rem, 7vw, 5rem) auto 0;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(10,20,48,.55);
}
.team-banner img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; filter: brightness(.82) saturate(.9); }
.team-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,11,28,0) 45%, rgba(5,11,28,.85) 100%);
}
.team-banner figcaption {
  position: absolute; z-index: 1; left: clamp(1.4rem, 4vw, 3.5rem); bottom: clamp(1.4rem, 4vw, 3rem);
  max-width: 34rem;
}
.team-banner .eyebrow { color: var(--silver-300); margin-bottom: .8rem; }
.team-banner-line {
  display: block; font-family: var(--serif); font-weight: 300; line-height: 1.15;
  font-size: clamp(1.5rem, 3vw, 2.4rem); color: #fff;
}
.team-banner-line em { font-style: italic; background: var(--silver-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Uit de praktijk ---------- */
.practice { background: var(--paper); color: var(--navy-800); }
.practice .eyebrow { color: var(--silver-500); }
.practice .eyebrow::before { background: var(--navy-700); }
.practice .section-head h2 { color: var(--navy-900); }
.practice h2 em { background: var(--navy-grad); -webkit-background-clip: text; background-clip: text; }
.practice-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.practice-item { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; }
.practice-item.wide { grid-column: 1 / -1; }
.practice-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.practice-item.wide img { aspect-ratio: 21 / 9; }
.practice-item:hover img { transform: scale(1.04); }
.practice-item figcaption {
  position: absolute; left: 1rem; bottom: 1rem;
  padding: .45rem .9rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  background: rgba(10,20,48,.78); color: var(--silver-100); backdrop-filter: blur(6px);
}

.events-teaser {
  max-width: 1240px; margin: 1.6rem auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.6rem 2rem; border-radius: var(--radius);
  background: var(--navy-900); color: var(--silver-100);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.events-teaser:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(10,20,48,.7); }
.events-teaser .eyebrow { color: var(--silver-400); margin-bottom: .4rem; }
.events-teaser .eyebrow::before { background: var(--silver-grad); }
.events-teaser strong { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.3; }
.events-teaser-cta { font-weight: 600; font-size: .92rem; white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: .2rem; }
.events-teaser-cta span { display: inline-block; transition: transform .3s var(--ease); }
.events-teaser:hover .events-teaser-cta span { transform: translateX(5px); }

.not-coach {
  margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: 14px;
  border: 1px solid rgba(203,210,220,.2); background: rgba(255,255,255,.04);
}
.not-coach strong { color: var(--silver-100); font-weight: 600; }

/* ---------- Eventspagina ---------- */
.ev-hero {
  min-height: 92vh; display: flex; align-items: flex-end;
  padding-top: 8rem; padding-bottom: clamp(4rem, 9vw, 7rem);
  background:
    linear-gradient(180deg, rgba(5,11,28,.55) 0%, rgba(5,11,28,0) 18%, rgba(5,11,28,.15) 38%, rgba(5,11,28,.85) 58%, var(--navy-950) 72%),
    url("images/helikopter.jpg") center top / 100% auto no-repeat,
    var(--navy-950);
}
.ev-hero-inner { max-width: 1240px; width: 100%; margin: 0 auto; }
.ev-hero h1 { font-size: clamp(2.7rem, 6.2vw, 5.4rem); color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,.4); }
.ev-hero .lead { color: var(--silver-200); max-width: 38rem; }
.ev-hero .eyebrow { color: var(--silver-200); }

.ev-for { background: var(--navy-950); }
.ev-for-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ev-for-card {
  position: relative; padding: 2.2rem 2rem 2rem; border-radius: 18px;
  border: 1px solid rgba(203,210,220,.14); background: rgba(255,255,255,.03);
}
.ev-for-card .card-num {
  font-family: var(--serif); font-size: 2.6rem; font-weight: 300; line-height: 1; display: block; margin-bottom: 1rem;
  background: var(--silver-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ev-for-card h3 { font-size: 1.8rem; color: var(--silver-100); margin-bottom: .4rem; }
.ev-for-card p { margin: 0; color: var(--silver-400); font-weight: 300; }

.ev-formats { background: var(--paper); color: var(--navy-800); }
.ev-formats .eyebrow { color: var(--silver-500); }
.ev-formats .eyebrow::before { background: var(--navy-700); }
.ev-formats .section-head h2 { color: var(--navy-900); }
.ev-formats h2 em { background: var(--navy-grad); -webkit-background-clip: text; background-clip: text; }
.ev-formats .section-sub { color: #3B4660; }
.ev-formats-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.ev-format {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,20,48,.04), 0 30px 60px -40px rgba(10,20,48,.35);
  transition: transform .5s var(--ease);
}
.ev-format:hover { transform: translateY(-5px); }
.ev-format img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: brightness(.92) saturate(.92); }
.ev-format-body { padding: 1.6rem 1.8rem 1.9rem; }
.ev-format h3 { font-size: 1.7rem; color: var(--navy-900); margin-bottom: .3rem; }
.ev-format p { margin: 0; color: #3B4660; font-size: .98rem; }
.ev-keys-note { max-width: 1240px; margin: 2.4rem auto 0; color: #3B4660; font-family: var(--serif); font-size: 1.15rem; font-weight: 300; }
.ev-keys-note a { border-bottom: 1px solid currentColor; color: var(--navy-900); }

.liftoff.events-cta {
  min-height: 70vh; align-items: center;
  background: radial-gradient(ellipse at 50% 20%, var(--navy-700), var(--navy-950) 70%);
}
.ev-cta-text { color: var(--silver-200); max-width: 32rem; margin: -1rem auto 2rem; font-weight: 300; }

/* ---------- Over Harro ---------- */
.about { background: var(--navy-900); }
.about-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.about-photo { margin: 0; }
.about-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.about-copy h2 { color: var(--silver-100); }
.about-copy p { color: var(--silver-300); font-weight: 300; max-width: 34rem; }

/* ---------- Lift-off ---------- */
.liftoff {
  min-height: 88vh; display: flex; align-items: flex-end; justify-content: center; text-align: center;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  background:
    linear-gradient(180deg, rgba(5,11,28,.35) 0%, rgba(5,11,28,.05) 30%, rgba(5,11,28,.55) 62%, rgba(5,11,28,.95) 100%),
    url("images/helikopter.jpg") center 35% / cover no-repeat,
    radial-gradient(ellipse at 50% 30%, var(--navy-700), var(--navy-950) 70%);
}
.liftoff-inner { max-width: 48rem; }
.liftoff .eyebrow { justify-content: center; color: var(--silver-200); }
.liftoff h2 {
  font-size: clamp(2.8rem, 7.5vw, 6rem); color: #fff; margin-bottom: 2rem;
  text-shadow: 0 4px 40px rgba(0,0,0,.45);
}

/* ---------- 1-op-1 ---------- */
.solo {
  background:
    radial-gradient(ellipse at 85% 50%, rgba(34,54,110,.55), transparent 55%),
    var(--navy-900);
}
.solo-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.solo-copy h2 { color: var(--silver-100); }
.solo-copy p { color: var(--silver-300); font-weight: 300; max-width: 32rem; }
.solo-photo { margin: 2rem 0 0; }
.solo-photo img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius);
  filter: saturate(.9); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.solo-options { display: grid; gap: 1rem; }
.solo-card {
  padding: 1.8rem 2rem; border-radius: 18px;
  border: 1px solid rgba(203,210,220,.16);
  background: rgba(255,255,255,.03);
  transition: border-color .3s, transform .4s var(--ease);
}
.solo-card:hover { border-color: rgba(203,210,220,.45); transform: translateX(6px); }
.solo-for { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; color: var(--silver-100); }
.solo-card p { margin: .3rem 0 0; color: var(--silver-400); font-size: .95rem; }
.solo-card .text-link { margin-top: 1rem; color: var(--silver-200); }

/* ---------- Keys explorer ---------- */
.keys { background: var(--navy-950); }
.section-head { max-width: 1240px; margin: 0 auto 4rem; }
.section-head h2 { color: var(--silver-100); }
.section-sub { max-width: 38rem; color: var(--silver-400); font-weight: 300; }
.keys-explorer {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.keys-wheel { position: relative; width: min(440px, 100%); aspect-ratio: 1; margin: 0 auto; }
.wheel-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(203,210,220,.18); }
.wheel-lines .inner { stroke-dasharray: 3 7; stroke: rgba(203,210,220,.3); }
.wheel-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.wheel-num {
  display: block; font-family: var(--serif); font-size: 3rem; font-weight: 300; line-height: 1;
  background: var(--silver-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wheel-label { font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--silver-500); }

.key-node {
  --angle: calc(var(--i) * 72deg - 90deg);
  position: absolute; top: 50%; left: 50%;
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  transform: rotate(var(--angle)) translate(min(150px, 34vw)) rotate(calc(-1 * var(--angle)));
  border-radius: 50%;
  border: 1px solid rgba(203,210,220,.25);
  background: var(--navy-900);
  color: var(--silver-300);
  font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  padding: 0 6px; hyphens: manual;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s, box-shadow .35s, border-color .35s;
}
.key-node:hover { border-color: var(--silver-300); color: #fff; }
.key-node.active {
  background: var(--silver-grad); color: var(--navy-900); border-color: transparent;
  box-shadow: 0 0 0 8px rgba(203,210,220,.08), 0 18px 40px -12px rgba(203,210,220,.5);
}
.key-node:focus-visible { outline: 2px solid var(--silver-200); outline-offset: 4px; }

.key-panel {
  padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(26,42,87,.55), rgba(10,20,48,.4));
  border: 1px solid rgba(203,210,220,.12);
  min-height: 360px;
}
.key-panel.swap { animation: swap .5s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(10px); } }
.key-kicker { color: var(--silver-400); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .6rem; }
.key-panel h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--silver-100); }
.key-panel p { color: var(--silver-300); font-weight: 300; }
.chips { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  padding: .4rem .9rem; border-radius: 999px; font-size: .82rem;
  border: 1px solid rgba(203,210,220,.22); color: var(--silver-200);
  background: rgba(255,255,255,.03);
}

/* Werkwijze-stappen */
.steps {
  list-style: none; padding: 0; max-width: 1240px; margin: clamp(4rem, 9vw, 7rem) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  counter-reset: step;
}
.step { position: relative; padding-top: 2.4rem; border-top: 1px solid rgba(203,210,220,.18); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: -.8rem; left: 0;
  padding-right: .8rem; background: var(--navy-950);
  font-size: .8rem; letter-spacing: .2em; color: var(--silver-400);
}
.step-word {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1;
  background: var(--silver-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 1rem;
}
.step h3 { font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--silver-200); }
.step p { color: var(--silver-400); font-weight: 300; }

/* ---------- Contact + wizard ---------- */
.contact { background: var(--paper); color: var(--navy-800); }
.contact-wrap {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.contact .eyebrow { color: var(--silver-500); }
.contact .eyebrow::before { background: var(--navy-700); }
.contact h2 { color: var(--navy-900); }
.contact h2 em { background: var(--navy-grad); -webkit-background-clip: text; background-clip: text; }
.contact-intro p { color: #3B4660; font-weight: 300; max-width: 30rem; }
.contact-person { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.contact-person img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; filter: grayscale(.3);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--silver-300);
}
.contact-person strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--navy-900); }
.contact-person span { font-size: .85rem; color: var(--silver-500); }

.wizard {
  position: relative;
  background: var(--navy-900); color: var(--silver-200);
  border-radius: 28px; padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: 0 40px 80px -40px rgba(10,20,48,.6);
  overflow: hidden;
}
.wizard-progress { height: 2px; background: rgba(203,210,220,.12); border-radius: 2px; margin-bottom: 2rem; }
.wizard-progress span { display: block; height: 100%; width: 0; background: var(--silver-grad); border-radius: 2px; transition: width .5s var(--ease); }
.wstep { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.wstep.active { display: block; animation: swap .45s var(--ease); }
.wstep legend {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2;
  color: var(--silver-100); margin-bottom: 1.4rem; padding: 0;
}
.wnum { display: block; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .2em; color: var(--silver-500); margin-bottom: .5rem; }
.options { display: grid; gap: .6rem; }
.options button {
  text-align: left; cursor: pointer;
  padding: 1rem 1.2rem; border-radius: 14px;
  background: rgba(255,255,255,.03); color: var(--silver-200);
  border: 1px solid rgba(203,210,220,.18);
  font-family: var(--sans); font-size: .98rem;
  display: flex; justify-content: space-between; align-items: center;
  transition: border-color .25s, background .25s, transform .3s var(--ease);
}
.options button::after { content: "→"; opacity: .35; transition: opacity .25s, transform .3s var(--ease); }
.options button:hover { border-color: rgba(203,210,220,.5); background: rgba(255,255,255,.06); }
.options button:hover::after { opacity: 1; transform: translateX(4px); }
.options button.selected { background: var(--silver-grad); color: var(--navy-900); border-color: transparent; font-weight: 600; }
.options button.selected::after { content: "✓"; opacity: 1; }

.field { display: block; margin-bottom: 1rem; }
.field span { display: block; font-size: .82rem; color: var(--silver-400); margin-bottom: .35rem; }
.field em { font-style: normal; color: var(--silver-500); }
.field input, .field textarea {
  width: 100%; padding: .9rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,.04); color: var(--silver-100);
  border: 1px solid rgba(203,210,220,.2);
  font-family: var(--sans); font-size: 1rem; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--silver-300); background: rgba(255,255,255,.07); }
.field-error { color: #F3B4B4; font-size: .85rem; margin: 0; }

.handoff {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem; border-radius: 16px;
  background: rgba(37, 211, 102, .08); border: 1px solid rgba(37, 211, 102, .3);
}
.handoff strong { display: block; color: var(--silver-100); font-weight: 600; margin-bottom: .2rem; }
.handoff span { font-size: .88rem; color: var(--silver-400); }
.wa-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #25D366; display: grid; place-items: center; }
.wa-icon svg { width: 22px; height: 22px; fill: #fff; }
.preview {
  margin: 1.2rem 0 1.6rem; padding: 1.2rem 1.3rem;
  border-radius: 4px 16px 16px 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(203,210,220,.12);
  font-family: var(--sans); font-size: .9rem; line-height: 1.6; color: var(--silver-200);
  white-space: pre-wrap; word-break: break-word;
}
.btn-wa { width: 100%; }

.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.6rem; min-height: 0; }
.wizard-nav:has(> [hidden] + [hidden]) { margin-top: 0; }
.wbtn-back {
  background: none; border: 0; cursor: pointer; padding: .5rem 0;
  font-family: var(--sans); font-size: .9rem; color: var(--silver-400);
}
.wbtn-back:hover { color: var(--silver-100); }
#wNext { margin-left: auto; }

/* Zwevende CTA (mobiel) */
.float-cta {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  padding: .85rem 1.3rem; border-radius: 999px;
  background: var(--silver-grad); color: var(--navy-900);
  font-weight: 600; font-size: .9rem;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .35s, transform .35s var(--ease);
  display: none;
}
.float-cta.show { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Footer ---------- */
.footer {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  padding: 2.4rem clamp(1rem, 5vw, 4rem) 5rem;
  border-top: 1px solid rgba(203,210,220,.08);
  font-size: .82rem; color: var(--silver-500);
  background: var(--navy-950);
}
.footer .logo-text { font-size: 1.1rem; }
.footer-note { width: 100%; font-size: .75rem; opacity: .7; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .orb, .rings, .scroll-hint span { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .compass-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .hero-inner, .keys-explorer, .feature-inner, .solo-inner, .contact-wrap, .about-inner { grid-template-columns: 1fr; }
  .about-photo { max-width: 420px; }
  .feature-inner.reverse .feature-photo { order: 0; }
  .hero-photo { max-width: 420px; justify-self: center; width: 100%; }
  .hero-photo figcaption { left: 1rem; }
  .feature-photo { max-width: 560px; }
  .feature-photo img { aspect-ratio: 4 / 3; }
  .steps { grid-template-columns: 1fr; gap: 3rem; }
  .nav-links { gap: 1.4rem; }
}
@media (max-width: 760px) {
  .nav-toggle { display: block; position: relative; z-index: 2; }
  .nav-links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 2rem;
    background: rgba(5,11,28,.97); font-size: 1.3rem;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .nav.open .nav-links { opacity: 1; pointer-events: auto; }
  .nav.open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav.open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  section { padding: 4.2rem 1rem; }
  .hero { padding-top: 6.5rem; min-height: auto; }
  .hero-inner { gap: 3rem; }
  .hero-photo img { aspect-ratio: 1; border-radius: 160px 160px var(--radius) var(--radius); }
  .hero-photo::before { border-radius: 172px 172px 30px 30px; inset: -10px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .statement { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .feature-lead { font-size: 1.15rem; }
  .compass-grid { grid-template-columns: 1fr; gap: .7rem; margin-top: 3rem; }
  .compass-item { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.1rem 1.2rem; }
  .compass-item .ci-icon { grid-row: span 2; margin: 0; width: 38px; height: 38px; }
  .compass-item h4 { font-size: 1.1rem; }
  .solo-card { padding: 1.4rem 1.4rem; }
  .solo-card:hover { transform: none; }
  .section-head { margin-bottom: 2.5rem; }
  .key-panel { min-height: 0; }
  .steps { margin-top: 4rem; }
  .wizard { border-radius: 22px; padding: 1.5rem 1.2rem; }
  .options button { padding: .95rem 1rem; }
  .field input, .field textarea { font-size: 16px; }
  .key-node { width: 76px; height: 76px; margin: -38px 0 0 -38px; font-size: .66rem; }
  .scroll-hint { display: none; }
  .float-cta { display: block; }
  .liftoff { min-height: 92vh; background-position: 0 0, 42% 30%, 0 0; }
  .practice-grid { gap: .5rem; }
  .practice-item { border-radius: 14px; }
  .practice-item.wide img { aspect-ratio: 4 / 3; }
  .team-banner img { aspect-ratio: 4 / 5; object-position: 30% center; }
  .ev-for-grid, .ev-formats-grid { grid-template-columns: 1fr; }
  .ev-hero {
    min-height: auto; align-items: flex-start; padding-top: 19.5rem;
    background:
      linear-gradient(180deg, rgba(5,11,28,.5) 0%, rgba(5,11,28,0) 15%, rgba(5,11,28,.1) 50%, var(--navy-950) 66%),
      url("images/helikopter.jpg") 42% 3.5rem / 165% auto no-repeat,
      var(--navy-950);
  }
  .liftoff.events-cta { min-height: 60vh; }
  .events-teaser { padding: 1.4rem; }
  .team-banner::after { background: linear-gradient(180deg, rgba(5,11,28,0) 30%, rgba(5,11,28,.88) 100%); }
  .practice-item:not(.wide) figcaption { display: none; }
}