/* ============================================================
   De AI Loods · deailoods.nl
   Donker, chique, nuchter. Van ruis naar koers.
   ============================================================ */

/* ------------------------------------------------------------
   Lettertypes staan in de site zelf, niet bij een externe dienst.
   Zo blijft de pagina bij iedere weergave identiek en is de
   visuele regressiecontrole betrouwbaar.
   ------------------------------------------------------------ */
@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:        #04102A;
  --bg-deep:   #020A1C;
  --panel:     #081A38;
  --panel-2:   #0C2246;
  --line:      rgba(150,180,220,.13);
  --line-soft: rgba(150,180,220,.07);
  --azure:     #3FA9E8;
  --azure-hi:  #6FC3F5;
  --azure-dim: rgba(63,169,232,.13);
  --brass:     #C9A468;
  --cream:     #F3F0E7;
  --text:      #E8EDF6;
  --muted:     #9CAEC9;
  --radius:    3px;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.btn[data-cookie-settings][hidden],
.footer-legal-link[data-cookie-settings][hidden]{ display:none !important; }

.skip-link{
  position:absolute; top:.8rem; left:.8rem; z-index:2000;
  padding:.7rem 1rem; border:1px solid var(--brass); border-radius:3px;
  background:var(--cream); color:var(--bg-deep); font-weight:700;
  transform:translateY(-180%); transition:transform .2s var(--ease-act);
}
.skip-link:focus{ transform:translateY(0); outline:3px solid var(--azure); outline-offset:3px; }

::selection{ background:var(--azure); color:var(--bg-deep); }

/* ---------- typografie ---------- */
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.008em;
  line-height:1.1;
  color:var(--cream);
}
h1{ font-size:clamp(2.8rem, 6.4vw, 5.2rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); }
h3{ font-size:clamp(1.2rem, 2vw, 1.45rem); line-height:1.3; }
p{ color:var(--muted); max-width:62ch; }
strong{ color:var(--text); font-weight:600; }
a{ color:var(--azure); text-decoration:none; }
em{ font-family:var(--font-display); font-style:italic; color:var(--brass); letter-spacing:0; }
/* Heading accents are quiet; only the homepage opening keeps its signature. */
:where(h1,h2,h3,h4,h5,h6) em{ font-style:normal; color:inherit; letter-spacing:inherit; }
.home h1 em{ font-style:italic; color:var(--brass); letter-spacing:0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--azure-hi);
  outline-offset:4px;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.78rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--azure);
}
.eyebrow::before{
  content:""; width:2.2rem; height:1px;
  background:linear-gradient(90deg, var(--brass), transparent);
}
.eyebrow--brass{ color:var(--brass); }

.lead{ font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--muted); }

/* ---------- layout ---------- */
.wrap{ width:min(1180px, 92vw); margin:0 auto; }
section{ padding:clamp(3.25rem, 5.5vw, 4.75rem) 0; position:relative; }
.pad-b-s{ padding-bottom:clamp(2.75rem, 5vw, 4.25rem); }
.pad-t-s{ padding-top:clamp(2.75rem, 5vw, 4.25rem); }
.section-head{ max-width:720px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head .eyebrow{ margin-bottom:1.1rem; }
.section-head p{ margin-top:1.1rem; }

/* ---------- navigatie ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
  padding:1.35rem 0;
}
.nav.is-scrolled{
  background:rgba(3,11,29,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--lift-nav);
  padding:.8rem 0;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand{ display:flex; align-items:center; gap:.8rem; }
.brand .mark{ height:36px; width:auto; display:block; flex:0 0 auto; }
.wordmark{
  font-family:var(--font-display);
  font-size:1.3rem; letter-spacing:.01em; color:var(--cream);
  display:flex; align-items:baseline; gap:.45rem; white-space:nowrap;
}
.wordmark .ai{ color:var(--azure); }
.wordmark small{
  font-family:var(--font-body); font-size:.62rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.nav-links{ display:flex; align-items:center; gap:2.1rem; list-style:none; }
.nav-links a:not(.btn){
  color:var(--muted); font-size:.92rem; font-weight:500;
  position:relative; transition:color .3s;
}
.nav-links a:not(.btn):hover, .nav-links a.is-active:not(.btn){ color:var(--cream); }
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--azure); transition:width .35s var(--ease);
}
.nav-links a:not(.btn):hover::after, .nav-links a.is-active:not(.btn)::after{ width:100%; }

.nav-toggle{ display:none; background:none; border:0; border-radius:8px; cursor:pointer; padding:.4rem; }

/* Op mobiel zat de primaire actie in het hamburgermenu. Na de hero had een
   bezoeker daardoor duizenden pixels lang geen zichtbare actie meer, terwijl
   die op desktop de hele tijd in de balk staat. Dit is geen plakbalk onderaan
   maar dezelfde knop, teruggezet waar hij hoort. Boven 760 px bestaat hij niet.

   Twee klassen diep, want `.btn` staat verderop in de cascade en zou een enkele
   klasse hier gewoon overrulen. */
.nav .nav-cta-mobiel{ display:none; }
.nav-toggle span{
  display:block; width:24px; height:2px; background:var(--cream);
  margin:5px 0; transition:transform .35s var(--ease), opacity .3s;
}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(7rem,12vh,9rem) 0 4rem;
  position:relative;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 600px at 82% 12%, rgba(63,169,232,.13), transparent 60%),
    radial-gradient(700px 500px at 8% 90%, rgba(201,164,104,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg) 45%);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 60% at 70% 30%, black, transparent);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%, black, transparent);
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem,5vw,5rem); align-items:center;
}
.hero h1{ margin:1.4rem 0 1.5rem; }
.hero .lead{ max-width:34rem; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.3rem; }
.hero-note{
  margin-top:2.6rem; display:flex; align-items:center; gap:.8rem;
  font-size:.85rem; color:var(--muted);
}
.hero-note .dot{ width:6px; height:6px; border-radius:50%; background:var(--brass); box-shadow:0 0 12px var(--brass); }

.hero-visual{ position:relative; }
.hero-photo{
  position:relative; border-radius:calc(var(--radius) + 6px); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--lift-2);
}
.hero-photo img{ display:block; width:100%; aspect-ratio:4/4.6; object-fit:cover; }
/* ingangen-diagram (uit de PPT): lichte figuur naast de tekst */
.ingangen-block{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.ingangen-copy h2{ margin-top:1rem; }
.ingangen-copy p{ margin-top:1.2rem; }
.ingangen-figure{
  margin:1.6rem 0 0;
  background:linear-gradient(170deg, var(--panel), var(--bg-deep));
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 8px);
  padding:clamp(.9rem, 2vw, 1.5rem);
  box-shadow:var(--lift-1);
}
.ingangen-figure img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius);
  box-shadow:var(--lift-0);
  border:1px solid var(--line-soft);
}

.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:1px; height:52px; overflow:hidden; opacity:.6;
}
.scroll-cue::after{
  content:""; position:absolute; top:-50%; left:0; width:1px; height:50%;
  background:linear-gradient(180deg, transparent, var(--azure));
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{top:-50%} 100%{top:110%} }

/* ---------- fotografie in natuurlijke kleur ---------- */
.photo{ position:relative; border-radius:var(--radius); overflow:hidden; border:0; }
.photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:none;
  transition:transform .48s var(--ease-act);
  background:var(--panel-2);
}
.photo::before{
  content:""; position:absolute; inset:0; z-index:1;
  box-shadow:var(--lift-ring);
  border-radius:inherit; pointer-events:none;
}

/* ---------- bewijs ---------- */
.proof-note{
  margin-top:clamp(2.2rem,4vw,3rem); padding-top:1.5rem;
  border-top:1px solid var(--line-soft);
  font-size:.93rem; color:var(--muted); max-width:62ch;
}
.proof-note em{ color:var(--brass); }

/* ---------- herkenning ---------- */
.signals{ list-style:none; display:flex; flex-direction:column; }
.signals li{
  padding:1.15rem 0; border-bottom:1px solid var(--line-soft);
  color:var(--muted); font-size:1rem;
  display:flex; gap:1rem; align-items:baseline;
  transition:color .35s, padding-left .35s var(--ease);
}
.signals li:first-child{ border-top:1px solid var(--line-soft); }
.signals li::before{ content:"›"; color:var(--brass); font-family:var(--font-display); }
.signals li:hover{ color:var(--text); padding-left:.5rem; }

.pull{
  font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.45; color:var(--cream); font-weight:380;
  border-left:2px solid var(--brass); padding-left:1.4rem; margin-top:2rem;
}

/* ---------- focusgebieden ---------- */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card{
  border:1px solid var(--line); border-radius:calc(var(--radius) + 4px);
  background:var(--panel); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), border-color .5s, box-shadow .5s var(--ease);
}
.card:hover{
  transform:translateY(-8px);
  border-color:rgba(63,169,232,.35);
  box-shadow:var(--lift-1-hi), 0 0 0 1px rgba(63,169,232,.12);
}
.card .photo{ border:0; border-radius:0; height:200px; }
.card:hover .photo img{ transform:scale(1.05); }
.card-body{ padding:1.7rem 1.6rem 1.8rem; display:flex; flex-direction:column; gap:.8rem; flex:1; }
.card-body .kicker{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
}
.card-body h3{ font-family:var(--font-body); font-weight:600; letter-spacing:0; color:var(--cream); font-size:1.18rem; }
.card-body p{ font-size:.93rem; line-height:1.65; flex:1; }
.card-link{
  font-size:.9rem; font-weight:600; color:var(--azure);
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.4rem;
}
.card-link svg{ transition:transform .35s var(--ease); }
.card:hover .card-link svg{ transform:translateX(5px); }

/* ---------- werkwijze / stappen ---------- */
.steps{ list-style:none; counter-reset:step; max-width:760px; }
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:4.4rem 1fr; gap:1.6rem;
  padding:1.9rem 0; border-bottom:1px solid var(--line-soft);
  align-items:start;
}
.steps li:last-child{ border-bottom:0; }
.steps li::before{
  content:"0" counter(step);
  font-family:var(--font-display); font-style:italic;
  font-size:1.7rem; color:var(--brass); opacity:.9; line-height:1.2;
}
.steps h3{ font-family:var(--font-body); font-weight:600; font-size:1.08rem; color:var(--cream); margin-bottom:.35rem; letter-spacing:0; }
.steps p{ font-size:.95rem; }

/* ---------- founder ---------- */
.founder{ background:linear-gradient(180deg, var(--bg-deep), var(--bg)); }
.founder-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.founder-photo{ max-width:420px; }
.founder-photo .photo img{ aspect-ratio:3/3.8; }
.founder-quote{
  font-family:var(--font-display); font-weight:380;
  font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.5; color:var(--cream);
  margin:1.4rem 0 1.6rem;
}
.founder-meta{ display:flex; flex-direction:column; gap:.2rem; margin-top:1.8rem; }
.founder-meta b{ color:var(--cream); font-size:1.02rem; }
.founder-meta span{ color:var(--muted); font-size:.9rem; }

/* ---------- cta-blok ---------- */
.cta-block{
  border:1px solid var(--line); border-radius:calc(var(--radius) + 10px);
  padding:clamp(2.8rem,6vw,4.8rem);
  text-align:left; position:relative; overflow:hidden;
  background:
    radial-gradient(600px 300px at 50% -20%, rgba(63,169,232,.16), transparent 70%),
    linear-gradient(180deg, var(--panel), var(--bg-deep));
}
.cta-block::before{
  content:""; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(63,169,232,.6), transparent);
}
.cta-block h2{ max-width:620px; margin:0 0 1.2rem; }
.cta-block p{ margin:0 0 2.2rem; max-width:56ch; }
.cta-block .hero-cta{ justify-content:flex-start; margin-top:0; }

/* ---------- pagina-hero (subpagina's) ---------- */
.page-hero{
  padding:clamp(7.5rem,13vh,10rem) 0 clamp(2rem,4vw,3rem);
  position:relative; overflow:hidden;
}
.page-hero .hero-bg{ opacity:.85; }
.page-hero h1{ font-size:clamp(2.3rem,4.6vw,3.6rem); margin:1.3rem 0 1.4rem; max-width:18ch; }
.page-hero .lead{ max-width:58ch; }

/* ---------- focus detail (aanpak) ---------- */
.focus-detail{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center; padding:clamp(2.25rem,4vw,3.25rem) 0;
  border-bottom:1px solid var(--line-soft);
}
.focus-detail:last-of-type{ border-bottom:0; }
.focus-detail:nth-child(even) .focus-media{ order:2; }
.focus-media .photo img{ aspect-ratio:4/3; }
.focus-copy h2{ font-size:clamp(1.6rem,2.8vw,2.2rem); margin:.9rem 0 1rem; }
.focus-copy .kicker{ font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
.mini-list{ list-style:none; margin-top:1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.mini-list li{ font-size:.93rem; color:var(--muted); display:flex; gap:.7rem; align-items:baseline; }
.mini-list li::before{ content:"›"; color:var(--azure); }
.mini-label{ font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:1.6rem; }

/* ---------- footer ---------- */
footer{
  background:var(--bg-deep);
  border-top:1px solid var(--line-soft);
  padding:clamp(3.5rem,7vw,5.5rem) 0 2.5rem;
  margin-top:clamp(3rem,6vw,5rem);
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; align-items:start; }
.footer-brand .brand{ margin-bottom:1.2rem; }
.footer-brand .brand .mark{ height:46px; }
.footer-brand p{ font-size:.92rem; max-width:34ch; }
.footer-col h2, .footer-col h4{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.2rem; font-weight:600;
}
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ color:var(--text); font-size:.95rem; transition:color .3s; }
.footer-col a:hover{ color:var(--azure); }
.footer-bottom{
  margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.82rem; color:var(--muted);
}

/* ---------- reveal-animaties ---------- */
[data-reveal]{
  opacity:0; transform:translateY(30px);
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease);
  transition-delay:var(--d, 0s);
}
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- responsief ---------- */
/* ---------- premium beeld-reveal (grote foto's) ---------- */
.hero-visual[data-reveal] .photo img,
.focus-media[data-reveal] .photo img,
.founder-photo[data-reveal] .photo img{
  transform:scale(1.08);
  transition:transform 1.6s var(--ease), filter .8s;
}
.hero-visual[data-reveal].is-in .photo img,
.focus-media[data-reveal].is-in .photo img,
.founder-photo[data-reveal].is-in .photo img{
  transform:scale(1);
}

/* ---------- responsief ---------- */
@media (max-width: 980px){
  .hero-grid, .founder-grid, .focus-detail, .ingangen-block{ grid-template-columns:1fr; }
  .focus-detail:nth-child(even) .focus-media{ order:0; }
  .cards-3{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .hero-visual{ max-width:520px; }
  .founder-photo{ max-width:340px; }
}
@media (max-width: 760px){
  body{ font-size:16px; }
  .nav-links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; gap:2rem;
    background:rgba(2,8,22,.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  }
  .nav-links a:not(.btn){ font-size:1.3rem; }
  .nav.is-open .nav-links{ opacity:1; pointer-events:auto; z-index:999; }
  .nav-toggle{ display:block; position:relative; z-index:1001; }
  .nav-inner{ gap:.7rem; }
  .nav .nav-cta-mobiel{
    display:inline-flex; margin-left:auto;
    font-size:.72rem; padding:.62rem .9rem; white-space:nowrap;
  }
  /* Het menu ligt eroverheen zodra het open staat; dan is de knop eronder ruis. */
  .nav.is-open .nav-cta-mobiel{ opacity:0; pointer-events:none; }
  .nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .hero{ min-height:auto; padding-top:7.5rem; }
  .steps li{ grid-template-columns:3rem 1fr; gap:1rem; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  .scroll-cue{ display:none; }
}
@media (max-width: 480px){
  .wordmark small{ display:none; }
  .brand .mark{ height:30px; }
  .wrap{ width:92vw; }
  h1{ font-size:clamp(2.1rem, 9vw, 2.5rem); }
}

/* Op smalle telefoons passen woordmerk, extra CTA en menuknop niet naast elkaar.
   Dezelfde CTA staat direct in de hero en in het menu, dus hier gaat alleen de
   dubbele navigatieknop weg. Zo blijft het merk volledig zichtbaar. */
@media (max-width: 400px){
  .nav .nav-cta-mobiel{ display:none; }
  .nav-toggle{ margin-left:auto; }
}

/* ---------- verticale verhaallijn: een boodschap per scherm ----------
   Zelfde linkerkantlijn als .wrap; alleen de leesbreedte is smaller. */
.wrap-n{ width:min(1180px, 92vw); margin:0 auto; }
.wrap-n > *{ max-width:820px; }
.wrap-n .signals{ margin-top:3rem; }
.wrap-n .steps{ margin-top:3.5rem; max-width:none; }
.pull-solo{
  border:0; padding:0;
  font-size:clamp(1.6rem, 3.2vw, 2.4rem);
  line-height:1.35; margin-top:3.5rem;
}
.pull-solo::after{
  content:""; display:block;
  width:4.5rem; height:1px; margin-top:2rem;
  background:linear-gradient(90deg, var(--brass), transparent);
}
.chapter + .chapter{ margin-top:clamp(3.5rem, 7vw, 6rem); }

.cta-note{ font-size:.88rem; color:var(--muted); margin-top:1.6rem; max-width:48ch; }

/* ---------- luxe-accenten (subtiel, in de lijn van The Row/Aesop) ---------- */
/* 1. choreografeerde cascade: elementen komen net na elkaar in beeld */
.hero-grid > div:first-child > *:nth-child(2){ transition-delay:.07s; }
.hero-grid > div:first-child > *:nth-child(3){ transition-delay:.14s; }
.hero-grid > div:first-child > *:nth-child(4){ transition-delay:.21s; }
.hero-grid > div:first-child > *:nth-child(5){ transition-delay:.28s; }
.cards-3 .card:nth-child(2){ transition-delay:.1s; }
.cards-3 .card:nth-child(3){ transition-delay:.2s; }

/* 2. bronzen haarlijn die op kaart-hover bovenaan verschijnt */
.card{ position:relative; }
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--brass), transparent);
  opacity:0; transition:opacity .55s var(--ease); pointer-events:none;
}
.card:hover::before{ opacity:.8; }

/* 3. iets meer editorial adem */
.lead{ line-height:1.65; }

/* 4. hero-detail: fijne bronzen rand */
.hero-photo::before{ box-shadow:var(--lift-ring-hi); }

/* ---------- nav-ruimte op tabletbreedte (vijf items sinds de Kansencheck-pagina) ---------- */
@media (min-width: 761px) and (max-width: 1120px){
  .wordmark small{ display:none; }
  .nav-links{ gap:1.3rem; }
}

/* ---------- PDF-weergave: volledige site op A4 zonder runtime-afhankelijkheden ---------- */
@media print{
  @page{ size:A4 portrait; margin:10mm 8mm 12mm; }
  html, body{
    background:var(--navy) !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .nav{ position:relative; }
  .hero{ min-height:auto; padding-top:2.4rem; }
  .page-hero{ padding-top:2.4rem; }
  section{ padding-top:2.8rem; padding-bottom:2.8rem; }
  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .photo img, .hero-photo img{ transform:none !important; }
  .card, .focus-detail, .cta-block, .founder-grid, .footer-grid{
    break-inside:avoid;
  }
  .nav, .hero, .page-hero, footer{ break-inside:avoid; }
}


/* ============================================================
   CALIBRATIE 2026-08-02 — geborgd, canoniek. Zie WEBSITE_VISUAL_STANDARD.md
   ============================================================ */
/* ============================================================
   De AI Loods · visuele calibratie · canonieke stijllaag
   Geborgd in style.css op 2 augustus 2026.
   Donker navy blijft de basis, zoals in de originele site.
   Wat verandert is de kwaliteit: natuurlijke fotografie,
   geen kaartenwand, rustiger typografie, hoger contrast.
   ============================================================ */

:root{
  --bg:        #04102A;   /* basis, ongewijzigd */
  --bg-deep:   #020A1C;   /* ankerband en footer */
  --bg-lift:   #071634;   /* tonale afwisseling, vervangt de gradients */
  --panel:     #08193A;   /* panelen, vlak */
  --line:      rgba(150,180,220,.16);
  --line-soft: rgba(150,180,220,.09);
  --body:      #B7C5DA;   /* lopende tekst, was #9CAEC9 */
  --body-dim:  #93A4BF;   /* noten en onderregels */

  --radius:     3px;
  --radius-btn: 2px;
  --wrap:       min(1220px, 90vw);
}

/* ---------- basis ---------- */
body{ background:var(--bg); font-size:17px; line-height:1.66; }
h1,h2,h3,.display{ color:var(--cream); letter-spacing:-.012em; }
h1{ font-size:clamp(2.5rem, 5.2vw, 4.3rem); line-height:1.05; }
h2{ font-size:clamp(1.75rem, 3.1vw, 2.5rem); line-height:1.12; }
h3{ font-size:clamp(1.1rem, 1.7vw, 1.3rem); }
p{ color:var(--body); max-width:64ch; }
strong{ color:var(--cream); }
.lead{ color:var(--body); font-size:clamp(1.06rem, 1.5vw, 1.2rem); line-height:1.62; }
.eyebrow{ font-size:.74rem; letter-spacing:.2em; }
.pull{ color:var(--cream); }

/* ---------- ritme en breedte ---------- */
.wrap, .wrap-n{ width:var(--wrap); }
section{ padding:clamp(3.9rem, 6.2vw, 6.2rem) 0; }
.pad-t-s{ padding-top:clamp(3.2rem, 5vw, 5rem); }
.section-head{ max-width:760px; margin-bottom:clamp(2.4rem, 4.4vw, 3.6rem); }
.section-head:last-child{ margin-bottom:0; }
.wrap-n > *{ max-width:780px; }
.wrap-n .signals, .wrap-n .steps{ max-width:none; }

/* ---------- tonale ankersecties in plaats van gradients ---------- */
.sec-light{ background:var(--bg); }        /* rustvlak */
.sec-dark{ background:var(--bg-lift); }    /* iets opgetild, geeft ritme zonder kleurbreuk */
.sec-dark::before, .sec-light::before{ display:none; }

/* ---------- navigatie ---------- */
.nav{ padding:1.15rem 0; }
.nav.is-scrolled{
  background:rgba(4,16,42,.9);
  box-shadow:0 1px 0 var(--line-soft);
  padding:.7rem 0;
}
.nav-links a:not(.btn){ font-size:.9rem; color:var(--body); }
.wordmark{ font-size:1.22rem; }

/* ---------- fotografie: natuurlijke kleur, geen wash ---------- */
.photo{ border-radius:var(--radius); border:0; }
.photo img{ filter:none; background:#0A1730; }
.photo::before{ box-shadow:var(--lift-ring); }

/* ---------- hero ---------- */
.hero{
  min-height:auto;
  padding:clamp(8rem,13vh,10.5rem) 0 clamp(4.5rem,7vw,6.5rem);
}
.hero-bg{ background:linear-gradient(178deg, #061530 0%, var(--bg) 58%, #030C20 100%); }
.hero-bg::after{ display:none; }            /* rasteroverlay eruit */
.hero h1{ margin:1.25rem 0 1.35rem; }
.hero .lead{ max-width:33rem; }
.hero-note{ margin-top:2.2rem; color:var(--body); }
.hero-grid{ grid-template-columns:1.02fr .98fr; align-items:center; }
.hero-photo{
  border:0; border-radius:var(--radius);
  box-shadow:var(--lift-2);
}
.hero-photo img{ aspect-ratio:16/11; }
.scroll-cue{ display:none; }

/* ---------- signalen: vullen het grid ---------- */
.signals li{ color:var(--body); border-bottom-color:var(--line-soft); padding:1.05rem 0; font-size:.98rem; }
.signals li:first-child{ border-top-color:var(--line-soft); }
.signals li:hover{ color:var(--text); }
@media (min-width: 900px){
  .signals{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:clamp(2rem,4vw,3.6rem); row-gap:0;
    border-top:1px solid var(--line-soft);
  }
  .signals li:first-child, .signals li:nth-child(2){ border-top:0; }
}

/* ---------- ingangen-figuur: lichte figuur, geen zwaar paneel ---------- */
.ingangen-block{ grid-template-columns:1fr 1.04fr; align-items:center; }
.ingangen-figure{
  background:transparent; border:1px solid var(--line);
  border-radius:var(--radius); padding:0; box-shadow:none;
}
.ingangen-figure img{ border-radius:0; border:0; box-shadow:none; }

/* ---------- Lezen. Kiezen. Organiseren. Bewaken. ---------- */
@media (min-width: 900px){
  .steps{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(2.4rem,5vw,4.5rem); row-gap:0; }
  .steps li{ border-bottom:1px solid var(--line-soft); }
  .steps li:nth-last-child(-n+2){ border-bottom:0; }
}
.steps li{ grid-template-columns:3.6rem 1fr; gap:1.2rem; }
.steps li::before{ font-size:1.5rem; }
.steps p{ color:var(--body); }

/* ---------- drie gebieden: redactionele kolommen, geen kaartenwand ---------- */
.cards-3{ grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.2vw,2.8rem); }
.card{ background:transparent; border:0; border-radius:0; box-shadow:none !important; overflow:visible; }
.card::before{ display:none; }
.card:hover{ transform:none; border-color:transparent; box-shadow:none; }
.card .photo{ height:auto; border-radius:var(--radius); overflow:hidden; }
.card .photo img{ aspect-ratio:4/3; }
.card:hover .photo img{ transform:scale(1.02); }
.card-body{ padding:1.25rem 0 0; gap:.55rem; }
.card-body .kicker{ font-size:.7rem; }
.card-body h3{ font-size:1.12rem; line-height:1.35; }
.card-body p{ color:var(--body); font-size:.92rem; }
.card-link{ font-size:.87rem; margin-top:.6rem; }

/* ---------- bewijs ---------- */
.proof-note{ color:var(--body); border-top-color:var(--line-soft); }

/* ---------- founder ---------- */
.founder{ background:var(--bg-lift); }
.founder-grid{ grid-template-columns:.8fr 1.2fr; align-items:start; }
.founder-photo{ max-width:none; }
.founder-photo .photo img{ aspect-ratio:3/3.6; }
.founder-quote{ font-size:clamp(1.2rem,2vw,1.5rem); }
.founder-meta span{ color:var(--body); }

/* ---------- panelen: vlak, geen gloed ---------- */
.cta-block{
  border:0; border-radius:var(--radius);
  background:var(--panel);
  padding:clamp(2.6rem,5vw,4.2rem);
}
.cta-block::before{
  left:0; right:0;
  background:linear-gradient(90deg, var(--brass), rgba(201,164,104,.15) 45%, transparent);
}
.cta-block h2{ max-width:18ch; }
.cta-block p{ color:var(--body); max-width:52ch; }
.cta-block .mini-list li{ color:var(--body); }
.cta-note{ color:var(--body-dim); }

/* ---------- prijs ---------- */
.kc-price{
  display:inline-flex; align-items:baseline; gap:.5rem;
  font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--brass); margin-top:.2rem;
}
.kc-price small{ font-family:var(--font-body); font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--body-dim); }

/* ---------- footer ---------- */
footer{ margin-top:0; border-top:0; background:var(--bg-deep); }
.footer-brand p{ color:var(--body); }
.footer-bottom{ color:var(--body-dim); }

/* ---------- subpagina-hero ---------- */
.page-hero .lead{ color:var(--body); }

/* ---------- reveal: kort en functioneel ---------- */
[data-reveal]{ transform:translateY(8px); transition-duration:.46s; }

/* ---------- responsief ---------- */
@media (max-width: 980px){
  .hero-grid, .ingangen-block, .founder-grid{ grid-template-columns:1fr; }
  .cards-3{ grid-template-columns:1fr; gap:clamp(2rem,4vw,2.8rem); }
  .card .photo img{ aspect-ratio:16/9; }
  .hero-visual{ max-width:none; }
}
@media (max-width: 760px){
  body{ font-size:16.5px; }
  h1{ font-size:clamp(2.05rem, 8.2vw, 2.45rem); }
  h2{ font-size:clamp(1.55rem, 6vw, 1.95rem); }
  .card .photo img{ aspect-ratio:4/3; }
  .hero{ padding-top:7rem; }
  .hero-cta .btn{ width:100%; justify-content:center; min-height:48px; }
  .nav .btn-sm{ min-height:44px; }
  .steps li{ grid-template-columns:2.6rem 1fr; }
  .founder-photo{ max-width:none; }
}
@media (max-width: 480px){
  :root{ --wrap:min(1220px, 91vw); }
}


/* ---------- bewijsblok: getallen als anker ---------- */
.proofrow{
  display:grid; grid-template-columns:repeat(3,auto); gap:clamp(1.6rem,4vw,3.2rem);
  justify-content:start; align-items:start;
  margin:1.8rem 0 .4rem; padding:1.4rem 0 1.5rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line-soft);
}
.proofrow b{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1; color:var(--cream); letter-spacing:-.01em;
}
.proofrow span{ display:block; margin-top:.5rem; font-size:.8rem; line-height:1.4; color:var(--body); max-width:16ch; }

/* ---------- productspread: rapport is het anker ---------- */
.kc-sec{ background:var(--bg-deep); }
.kc-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2.4rem,5vw,4.5rem); align-items:center; }
.kc-copy h2{ margin-top:.9rem; }
.kc-copy > p{ margin-top:1.1rem; }
.kc-copy .mini-list{ margin-top:1.4rem; }
.kc-copy .hero-cta{ margin-top:1.9rem; }
.kc-spread{ margin:0; }

@media (max-width: 980px){
  .kc-grid{ grid-template-columns:1fr; }
  .kc-spread{ order:-1; margin-bottom:.5rem; }
  .proofrow{ grid-template-columns:repeat(3,1fr); gap:1.2rem; }
  .proofrow span{ max-width:none; }
}
@media (max-width: 560px){
  .proofrow{ grid-template-columns:1fr; gap:1rem; padding:1.1rem 0 1.2rem; }
  .proofrow > div{ display:flex; align-items:baseline; gap:.9rem; }
  .proofrow b{ font-size:1.4rem; min-width:5.2rem; }
  .proofrow span{ margin-top:0; }
}

/* ============================================================
   PREMIUM INTERACTIELAAG · 2026-08-03
   Een familie voor knoppen, links, CTA-banden en contactacties.
   Zacht, precies, tastbaar. Geen verloop, glans of glassmorphism.
   ============================================================ */

:root{
  /* oppervlak van een actie */
  --act-face:       #F4EFE2;   /* warme ivory */
  --act-face-hi:    #FBF6EA;
  --act-face-lo:    #EAE3D2;
  --act-ink:        #061127;
  --act-key:        rgba(201,164,104,.40);   /* bronzen keyline, primair */
  --act-key-hi:     rgba(201,164,104,.78);
  --act-key-soft:   rgba(233,238,246,.20);   /* keyline, secundair */
  --act-key-soft-hi:rgba(233,238,246,.42);
  --act-fill-soft:  rgba(233,238,246,.045);  /* nauwelijks zichtbare vulling */
  --act-fill-soft-h:rgba(233,238,246,.085);

  /* maten */
  --act-r:      9px;      /* verfijnde radius, geen pill, geen scherpe hoek */
  --act-h:      50px;
  --act-h-sm:   42px;
  --act-h-mob:  54px;
  --act-pad:    1.7rem;

  /* beweging */
  --ease-act:   var(--ease);
  --t-hover:    .30s;
  --t-active:   .12s;
}

/* ============================================================
   RELIËF
   Afgeleid van soft_shadow() in de Kansencheck-renderer: meerdere lagen die
   naar beneden smaller worden, warm getint in plaats van zwart. Het rapport
   staat op crème, waar een schaduw het werk doet. Deze site staat op navy,
   waar donker op donker verdwijnt; daar komt het reliëf van de lichtvangst op
   de bovenrand, met de schaduw eronder als contact met de pagina.

   Drie niveaus. Rust voor wat op de pagina ligt, verhoogd voor wat je kunt
   aanraken, zwevend voor het ene beeld per sectie dat de aandacht mag pakken.
   Reliëf bestaat uit lichtvangst, schaduw en keyline; geen onderdeel staat op zichzelf.

   Tweede ronde, 28 augustus. Het reliëf was correct maar te voorzichtig. Op
   navy loopt donkerder maken vast: zwart op bijna-zwart levert niets meer op.
   De winst zit in de twee randen die het oog wel leest.

   1. De lichtvangst op de bovenrand is ongeveer verdubbeld. Dat is op een
      donkere ondergrond de sterkste aanwijzing dat een vlak een dikte heeft.
   2. Er is een korte contactschaduw bijgekomen, vlak onder de rand en met
      weinig vervaging. Die laat een vlak op de pagina rusten in plaats van er
      vaag boven te hangen. Kort en zacht, dus geen slagschaduw.
   3. De keyline is een echte kant geworden: licht bovenop, donker onderaan.
   4. Het verschil tussen de niveaus is groter. Drie herkenbare vlakken lezen
      als een keuze; alles half opgetild leest als een effect.
   ============================================================ */

:root{
  --lift-ink:   12, 8, 3;        /* warme schaduw, nooit puur zwart */
  --lift-catch: 255, 252, 245;   /* licht dat de bovenrand vangt */

  --lift-0:
    0 1px 0 rgba(var(--lift-catch), .10) inset,
    0 1px 1px 0 rgba(var(--lift-ink), .50),
    0 2px 4px -1px rgba(var(--lift-ink), .62),
    0 8px 16px -6px rgba(var(--lift-ink), .60),
    0 20px 32px -16px rgba(var(--lift-ink), .52);

  --lift-1:
    0 1px 0 rgba(var(--lift-catch), .14) inset,
    0 1px 1px 0 rgba(var(--lift-ink), .55),
    0 3px 6px -1px rgba(var(--lift-ink), .66),
    0 12px 24px -8px rgba(var(--lift-ink), .66),
    0 30px 48px -20px rgba(var(--lift-ink), .60),
    0 54px 84px -36px rgba(var(--lift-ink), .52);

  --lift-1-hi:
    0 1px 0 rgba(var(--lift-catch), .21) inset,
    0 1px 1px 0 rgba(var(--lift-ink), .58),
    0 4px 8px -1px rgba(var(--lift-ink), .68),
    0 17px 32px -9px rgba(var(--lift-ink), .68),
    0 38px 60px -22px rgba(var(--lift-ink), .62),
    0 68px 104px -38px rgba(var(--lift-ink), .56);

  --lift-2:
    0 1px 0 rgba(var(--lift-catch), .19) inset,
    0 1px 1px 0 rgba(var(--lift-ink), .58),
    0 4px 9px -1px rgba(var(--lift-ink), .68),
    0 18px 34px -8px rgba(var(--lift-ink), .68),
    0 42px 66px -22px rgba(var(--lift-ink), .62),
    0 80px 118px -40px rgba(var(--lift-ink), .58);

  --lift-2-hi:
    0 1px 0 rgba(var(--lift-catch), .24) inset,
    0 1px 1px 0 rgba(var(--lift-ink), .60),
    0 5px 11px -1px rgba(var(--lift-ink), .70),
    0 23px 42px -9px rgba(var(--lift-ink), .70),
    0 52px 80px -23px rgba(var(--lift-ink), .64),
    0 94px 138px -42px rgba(var(--lift-ink), .60);

  /* ingedrukt: het vlak zakt terug naar de pagina. Het verschil met de ruststand
     moet voelbaar zijn, anders is de klik niet beantwoord. */
  --lift-druk:
    0 1px 0 rgba(var(--lift-catch), .03) inset,
    0 1px 1px 0 rgba(var(--lift-ink), .45),
    0 2px 5px -3px rgba(var(--lift-ink), .55);

  /* De keyline. Op een foto valt de schaduw eronder grotendeels weg, dus doet de
     rand het werk: licht waar het licht op valt, donker waar het vlak afsluit.
     Die twee samen maken een kant. Los van elkaar maken ze een gloed of lijn.
     Deze ring ligt over de inhoud heen. */
  --lift-ring:
    inset 0 1px 0 rgba(var(--lift-catch), .32),
    inset 0 0 0 1px rgba(243,240,231,.17),
    inset 0 -1px 0 rgba(var(--lift-ink), .50);

  --lift-ring-hi:
    inset 0 1px 0 rgba(var(--lift-catch), .46),
    inset 0 0 0 1px rgba(201,164,104,.34),
    inset 0 -1px 0 rgba(var(--lift-ink), .58);

  /* de balk bovenaan is geen object maar een rand; alleen contact, geen zweving */
  --lift-nav:
    0 1px 0 var(--line-soft),
    0 2px 6px -3px rgba(var(--lift-ink), .58),
    0 18px 38px -26px rgba(var(--lift-ink), .72);
}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  min-height:var(--act-h); padding:0 var(--act-pad);
  border-radius:var(--act-r); border:1px solid transparent;
  font-family:var(--font-body); font-size:.94rem; font-weight:600;
  letter-spacing:.004em; line-height:1; white-space:nowrap; cursor:pointer;
  position:relative; isolation:isolate;
  transition:background-color var(--t-hover) var(--ease-act),
             border-color var(--t-hover) var(--ease-act),
             box-shadow var(--t-hover) var(--ease-act),
             transform var(--t-hover) var(--ease-act),
             color var(--t-hover) var(--ease-act);
}
.btn svg{ flex:0 0 auto; transition:transform var(--t-hover) var(--ease-act); }
.btn:hover svg{ transform:translateX(3px); }

/* primair: ivory met bronzen keyline en zeer beheerste diepte */
.btn-primary{
  background:var(--act-face); color:var(--act-ink);
  border-color:var(--act-key);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 2px 6px -2px rgba(0,0,0,.34), 0 10px 22px -16px rgba(0,0,0,.55);
}
.btn-primary::after{ display:none; }
.btn-primary:hover{
  background:var(--act-face-hi); border-color:var(--act-key-hi);
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 4px 10px -3px rgba(0,0,0,.36), 0 16px 30px -18px rgba(0,0,0,.6);
}
.btn-primary:active{
  transform:translateY(0); background:var(--act-face-lo);
  border-color:var(--act-key-hi);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 1px 3px -1px rgba(0,0,0,.32);
  transition-duration:var(--t-active);
}

/* secundair: getinte navy met warme keyline, nooit een kale draadomlijning */
.btn-ghost{
  background:var(--act-fill-soft); color:var(--cream);
  border-color:var(--act-key-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.btn-ghost:hover{
  background:var(--act-fill-soft-h); border-color:var(--act-key-soft-hi);
  color:#FFFCF4; transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 10px 22px -18px rgba(0,0,0,.6);
}
.btn-ghost:active{
  transform:translateY(0); background:rgba(233,238,246,.03);
  transition-duration:var(--t-active);
}

/* header-CTA: zelfde familie, compacter en zachter */
.nav .btn-sm{
  min-height:var(--act-h-sm); padding:0 1.25rem; font-size:.86rem;
  border-radius:calc(var(--act-r) - 1px);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 2px 6px -3px rgba(0,0,0,.35);
}
.nav .btn-sm:hover{ box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 5px 12px -5px rgba(0,0,0,.4); }
.btn-sm{ min-height:var(--act-h-sm); padding:0 1.25rem; font-size:.86rem; }

/* focus: warm goud, geen browserblauw */
.btn:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px;
  box-shadow:0 0 0 5px rgba(201,164,104,.18);
}

/* ---------- tekstlinks ---------- */
.card-link, .textlink{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:36px; padding:.35rem 0 .25rem;
  color:var(--cream); font-size:.9rem; font-weight:600; letter-spacing:.004em;
  position:relative; transition:color .25s var(--ease-act);
}
.card-link::after, .textlink::after{
  content:""; position:absolute; left:0; right:0; bottom:.1rem; height:1px;
  background:var(--act-key); transition:background-color .25s var(--ease-act), right .3s var(--ease-act);
}
.card-link svg, .textlink svg{ transition:transform var(--t-hover) var(--ease-act); }
.card-link:hover, .textlink:hover{ color:#FFFCF4; }
.card-link:hover::after, .textlink:hover::after,
.card:hover .card-link::after{ background:var(--act-key-hi); }
.card-link:hover svg, .textlink:hover svg, .card:hover .card-link svg{ transform:translateX(3px); }
.card-link:focus-visible, .textlink:focus-visible{ outline:2px solid var(--brass); outline-offset:4px; }
p a:not(.btn):not(.card-link):not(.textlink){
  color:var(--azure-hi); text-decoration:none;
  border-bottom:1px solid rgba(111,195,245,.3);
  padding-bottom:1px; transition:border-color .25s var(--ease-act);
}
p a:not(.btn):not(.card-link):not(.textlink):hover{ border-bottom-color:var(--azure-hi); }
p a:not(.btn):focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ---------- navigatie ---------- */
.nav-links{ gap:1.85rem; }
.nav-links a:not(.btn){ min-height:34px; display:inline-flex; align-items:center;
  font-size:.9rem; font-weight:500; color:var(--body); }
.nav-links a:not(.btn)::after{ bottom:3px; height:1px; background:var(--brass); }
.nav-links a.is-active:not(.btn){ color:var(--cream); }
.nav-links a.is-active:not(.btn)::after{ width:100%; opacity:.9; }
.nav .btn-primary{ margin-left:.5rem; }

/* ---------- hero-acties ---------- */
.hero-cta{ gap:.9rem; margin-top:2.3rem; align-items:center; }

/* ---------- CTA-band ---------- */
.cta-block{
  border:1px solid rgba(233,238,246,.07); border-radius:var(--act-r);
  background:var(--bg-lift);
  padding:clamp(3.15rem,5.4vw,4.7rem) clamp(2.2rem,4.2vw,3.65rem);
  position:relative; overflow:hidden;
  box-shadow:var(--lift-0);
  display:grid; grid-template-columns:1.4fr .6fr; gap:0 clamp(2rem,4vw,3.4rem);
  align-items:center;
}
.cta-block::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--brass) 0, rgba(201,164,104,.2) 30%, transparent 58%);
}
.cta-block > *{ grid-column:1; }
.cta-block .hero-cta{
  grid-column:2; grid-row:1 / span 20; align-self:center; justify-self:end;
  margin:0; flex-direction:column; align-items:stretch; gap:.8rem;
}
.cta-block h2{ margin:.9rem 0 1rem; max-width:20ch; }
.cta-block p{ margin:0 0 .2rem; max-width:54ch; }
.cta-block .cta-note{ margin-top:1.05rem; max-width:52ch; font-size:.86rem; }

/* ---------- speelveld en beeld ---------- */
.ingangen-figure{ border:0; background:transparent; padding:0; box-shadow:none; }
.ingangen-figure img{ width:100%; height:auto; display:block; border:0; border-radius:0; box-shadow:none; }
.ingangen-block{ gap:clamp(2rem,4.5vw,4rem); }
.card .photo{ border-radius:var(--radius); }
.card .photo img{ transition:transform 1.1s var(--ease-act); }
.card:hover .photo img{ transform:scale(1.018); }
.card a:focus-visible, .card:focus-visible{ outline:2px solid var(--brass); outline-offset:5px; }

/* ---------- footer ---------- */
footer .footer-col a{ min-height:32px; display:inline-flex; align-items:center;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease-act), color .25s; }
footer .footer-col a:hover{ color:var(--cream); border-bottom-color:var(--act-key); }
footer .footer-col a:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
.footer-bottom{ border-top:1px solid var(--line-soft); }
.footer-bottom a{ display:inline-flex; align-items:center; min-height:32px; padding:0 .1rem;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease-act), color .25s; }
.footer-bottom a:hover{ color:var(--cream); border-bottom-color:var(--act-key); }
.footer-bottom a:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ---------- responsief ---------- */
@media (max-width: 900px){
  .cta-block{ grid-template-columns:1fr; align-items:start; }
  .cta-block > *{ grid-column:1; }
  .cta-block .hero-cta{
    grid-column:1; grid-row:auto; justify-self:stretch;
    flex-direction:column; align-items:stretch; margin-top:1.7rem;
  }
  .cta-block .cta-note{ order:99; margin-top:1.2rem; }
}
@media (max-width: 760px){
  .btn{ min-height:var(--act-h-mob); }
  .hero-cta{ gap:.8rem; margin-top:2rem; }
  .hero-cta .btn, .cta-block .btn{ width:100%; }
  .nav .btn-sm{ min-height:46px; }
}
@media (prefers-reduced-motion: reduce){
  .btn, .btn svg, .card-link, .card-link::after, .textlink, .textlink::after,
  .card .photo img, .nav-links a::after{
    transition:none !important;
  }
  .btn:hover, .btn:active, .btn-primary:hover, .btn-ghost:hover,
  .card:hover .photo img, .btn:hover svg, .card-link:hover svg{ transform:none !important; }
}

/* ============================================================
   AFRONDING 2026-08-03 · leesbaarheid en productspread
   ============================================================ */

/* ---------- leesbaarheid: iets groter, iets meer lucht, meer contrast ---------- */
:root{ --body: #C2CEE0; }              /* was #B7C5DA */
body{ font-size:17.5px; line-height:1.72; }
p{ max-width:66ch; }
.lead{ font-size:clamp(1.08rem,1.5vw,1.22rem); line-height:1.66; }
.signals li{ font-size:1rem; line-height:1.62; }
/* Een register voor lopende tekst. Alles wat hier niet in staat valt terug op de
   volle bodymaat en leest daardoor groter en witter dan de rest van de site.
   De Kansencheck-pagina stond er per ongeluk buiten; die staat er nu in. */
.steps p, .card-body p, .mini-list li, .focus-copy p,
.kc-practical p, .fit-column li{
  font-size:.96rem; line-height:1.68;
}
.cta-block p{ font-size:.98rem; line-height:1.7; }
.proof-note{ font-size:.95rem; line-height:1.68; }
.cta-note{ font-size:.88rem; line-height:1.62; color:#A9B8CD; }
.footer-brand p, .footer-col a{ font-size:.95rem; }
.footer-bottom{ font-size:.85rem; }
@media (max-width: 760px){ body{ font-size:17px; line-height:1.7; } }

/* ---------- productspread: een beeld, met diepte uit de PPT ---------- */
.kc-spread{ margin:0; }

/* ---------- Kansencheck-hero: product direct in beeld ---------- */
.kc-hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,4.5vw,4rem); align-items:center; }
.kc-hero-copy{ min-width:0; }
.kc-hero-copy .lead{ max-width:38rem; }
@media (max-width: 980px){
  .kc-hero-grid{ grid-template-columns:1fr; }
}


/* ============================================================
   HOMEPAGE CORRECTIERONDE 2026-08-13
   Strakker ritme, minder tekst en directe optische feedback.
   ============================================================ */

.scroll-progress{
  position:fixed; inset:0 0 auto; height:2px; z-index:1200;
  background:transparent; pointer-events:none;
}
.scroll-progress span{
  display:block; width:100%; height:100%; transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg, var(--brass), var(--azure));
  box-shadow:0 0 12px rgba(63,169,232,.24);
  will-change:transform;
}

.home section{ padding:clamp(3.25rem, 4.8vw, 4.7rem) 0; }
.home .pad-t-s{ padding-top:clamp(2.9rem, 4.2vw, 4.2rem); }
.home .hero{
  padding:clamp(7.5rem, 11vh, 9rem) 0 clamp(3.7rem, 5.5vw, 5.2rem);
}
.home .hero-grid{ gap:clamp(2.4rem, 4.6vw, 4.4rem); }
.home .hero-photo img{
  aspect-ratio:4/3; object-position:center 58%;
}
.home .hero-cta{ margin-top:2rem; }
.hero-cta-note{
  margin-top:.8rem; max-width:49ch;
  color:var(--body-dim); font-size:.86rem; line-height:1.55;
}
.home .hero-note{
  max-width:64ch; margin-top:1.7rem; padding-top:1.25rem;
  border-top:1px solid var(--line-soft); line-height:1.5;
  display:grid; grid-template-columns:auto repeat(3,1fr);
  gap:.45rem 1rem; align-items:start;
}
.home .hero-note .dot{ transform:translateY(.5rem); }
.hero-proof-item{
  font-size:.79rem; color:var(--body);
  padding-right:.85rem; border-right:1px solid var(--line-soft);
}
.hero-proof-item:last-child{ padding-right:0; border-right:0; }

.home .section-intro{ margin-top:1.2rem; }
.home .wrap-n .signals{ margin-top:2.15rem; }
.home .pull-solo{ margin-top:2.35rem; }
.home .pull-solo::after{ margin-top:1.45rem; }
.home .ingangen-copy > p:not(.pull){ margin-top:1.2rem; }
.home .ingangen-copy .pull{ margin-top:1.65rem; }
.home .wrap-n .steps{ margin-top:2.15rem; }
.home .steps li{ padding:1.55rem 0; }
.home .section-head{ margin-bottom:clamp(2rem, 3.3vw, 2.8rem); }
.home .outcomes{ margin-top:2rem; }

.home .kc-grid{ gap:clamp(2.6rem, 5vw, 5rem); }
.home .kc-copy h2{ max-width:16ch; }
.home .kc-copy .mini-list{ gap:.58rem; }
.home .kc-copy .mini-list li{ color:var(--body); }
.home .kc-copy .hero-cta{ margin-top:1.65rem; }

.founder--compact .founder-grid{
  grid-template-columns:.62fr 1.38fr; align-items:center;
  gap:clamp(2.4rem, 5vw, 5rem);
}
.founder--compact .founder-photo{ max-width:320px; }
.founder--compact .founder-photo .photo img{ aspect-ratio:4/5; object-position:center 20%; }
.founder--compact h2{ margin:.8rem 0 1rem; }
.founder-intro{ max-width:54ch; }

.home .cta-block{ padding-block:clamp(2.6rem,4.3vw,3.9rem); }
.home .cta-block h2{ margin:.9rem 0 1rem; }
.home .cta-block p{ margin-bottom:0; }
.home footer{ padding-top:clamp(3.2rem,5.5vw,4.8rem); }

/* Kort en voelbaar: opacity/transform, geen trage blur of parallax. */
.home [data-reveal]{
  transform:translateY(8px); filter:none;
  transition:opacity .46s var(--ease-act), transform .46s var(--ease-act);
}
.home .hero-visual[data-reveal] .photo img,
.home .founder-photo[data-reveal] .photo img{
  transform:scale(1.025);
  transition:transform .85s var(--ease-act);
}
.home .hero-visual[data-reveal].is-in .photo img,
.home .founder-photo[data-reveal].is-in .photo img{ transform:scale(1); }
.home .btn:active{ transform:translateY(1px) scale(.995); }

@media (max-width:980px){
  .founder--compact .founder-grid{ grid-template-columns:.58fr 1.42fr; }
  .founder--compact .founder-photo{ max-width:280px; }
}
@media (max-width:860px){
  .home .nav-links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; gap:2rem;
    background:rgba(2,8,22,.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  }
  .home .nav-links a:not(.btn){ font-size:1.3rem; }
  .home .nav.is-open .nav-links{ opacity:1; pointer-events:auto; z-index:999; }
  .home .nav-toggle{ display:block; position:relative; z-index:1001; }
  .home .nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .home .nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
  .home .nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:760px){
  .home section{ padding:3.1rem 0; }
  .home .hero{ padding-top:6.7rem; padding-bottom:3.5rem; }
  .home .hero-grid{ row-gap:0; }
  .home .hero-grid > div:first-child{ display:contents; }
  .home .hero-grid > div:first-child > .eyebrow{ order:1; }
  .home .hero-grid > div:first-child > h1{ order:2; }
  .home .hero-grid > div:first-child > .lead{ order:3; }
  .home .hero-grid > div:first-child > .hero-cta{ order:4; }
  .home .hero-grid > div:first-child > .hero-cta-note{ order:5; }
  .home .hero-visual{ order:6; margin-top:1.55rem; }
  .home .hero-grid > div:first-child > .hero-note{ order:7; }
  .home .hero-note{ margin-top:1.45rem; grid-template-columns:auto 1fr; gap:.65rem .8rem; }
  .home .hero-note .dot{ grid-row:1 / span 3; }
  .hero-proof-item{ padding-right:0; padding-bottom:.55rem; border-right:0; border-bottom:1px solid var(--line-soft); }
  .hero-proof-item:last-child{ padding-bottom:0; border-bottom:0; }
  .founder--compact .founder-grid{ grid-template-columns:1fr; }
  .founder--compact .founder-photo{ max-width:250px; }
}
@media (prefers-reduced-motion:reduce){
  .scroll-progress{ display:none; }
  .home [data-reveal], .home .hero-visual[data-reveal] .photo img,
  .home .founder-photo[data-reveal] .photo img{
    transition:none !important; transform:none !important;
  }
}

/* ============================================================
   HOMEPAGE POLISH 2026-08-14
   Precisie in eerste scherm, bewijs en Kansencheck-presentatie.
   ============================================================ */

/* De foto blijft het visuele tegenwicht, met een stillere luxe afwerking. */
.home .hero-photo{
  box-shadow:var(--lift-2);
}
.home .hero-photo::before{
  box-shadow:var(--lift-ring-hi);
}

/* Elk bewijs krijgt hetzelfde kleine beginpunt. */
.home .hero-note{
  grid-template-columns:repeat(3,1fr);
}
.home .hero-proof-item{
  position:relative;
  padding-left:.82rem;
}
.home .hero-proof-item::before{
  content:"";
  position:absolute; left:0; top:.53em;
  width:4px; height:4px; border-radius:50%;
  background:var(--brass);
}

/* Alleen de twee besproken overgangen worden iets compacter. */
.home .hero{ padding-bottom:clamp(3.45rem,5.15vw,4.95rem); }
.home .sec-light{ padding-bottom:clamp(3.05rem,4.35vw,4.4rem); }
.home .sec-light + section{ padding-top:clamp(3.05rem,4.35vw,4.4rem); }

/* De productkop gebruikt de beschikbare tekstkolom. */
.home .kc-copy h2{ max-width:23ch; }

/* Echte rapportpagina's. De pagina en alle tekst draaien als een geheel. */
.home .kc-spread{
  position:relative;
  min-height:clamp(300px,34vw,430px);
  isolation:isolate;
}
.home .kc-sheet{
  position:absolute;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#F3F0E7;
  outline:1px solid rgba(243,240,231,.24);
  outline-offset:-1px;
  box-shadow:var(--lift-1);
  transform-origin:center;
}
.home .kc-sheet img{ display:block; width:100%; height:100%; object-fit:cover; }
.home .kc-sheet--summary{ width:72%; top:2%; right:7%; z-index:1; transform:rotate(2.2deg); }
.home .kc-sheet--choices{ width:76%; top:23%; right:0; z-index:2; transform:rotate(4deg); }
.home .kc-sheet--cover{ width:80%; left:1%; top:29%; z-index:3; transform:rotate(-2.2deg); }
/* Lage laptops: dezelfde hiërarchie maar de hoofdactie in het eerste scherm. */
@media (min-width:861px) and (max-height:680px){
  .home .hero{ padding-top:clamp(5.7rem,14vh,6.4rem); padding-bottom:2.7rem; }
  .home .hero h1{ margin:.8rem 0 .85rem; }
  .home .hero .lead{ font-size:1.02rem; line-height:1.52; }
  .home .hero-cta{ margin-top:1.25rem; }
  .home .hero-cta-note{ margin-top:.55rem; }
  .home .hero-note{ margin-top:1rem; padding-top:.9rem; }
  .home .hero-photo img{ aspect-ratio:16/11; }
}

@media (max-width:980px){
  .home .kc-spread{ min-height:clamp(310px,55vw,460px); width:min(100%,720px); }
}
@media (max-width:760px){
  .home .hero{ padding-bottom:2rem; }
  .home main > .sec-light:first-child{ padding-top:2.5rem; }
  .home .hero-note{ grid-template-columns:1fr; gap:.72rem; }
  .home .hero-proof-item{
    padding:.05rem 0 .62rem .82rem;
    border-right:0; border-bottom:1px solid var(--line-soft);
  }
  .home .hero-proof-item:last-child{ padding-bottom:0; border-bottom:0; }
  .home .kc-spread{ min-height:clamp(225px,62vw,340px); }
  .home .kc-sheet--summary{ width:76%; top:2%; right:4%; transform:rotate(1.2deg); }
  .home .kc-sheet--choices{ width:79%; top:23%; right:0; transform:rotate(2deg); }
  .home .kc-sheet--cover{ width:84%; left:0; top:29%; transform:rotate(-1.2deg); }
}

/* ============================================================
   HOMEPAGE DETAILPOLISH 2026-08-14
   Voelbare precisie zonder scrolltrucs of extra effecten.
   ============================================================ */

/* De goedgekeurde hero blijft onaangeraakt; vervolgsecties reageren net sneller. */
.home section [data-reveal]{
  transform:translateY(8px);
  transition:opacity .46s var(--ease-act), transform .46s var(--ease-act);
}
.home section [data-reveal].is-in{ transform:none; }

/* Focusbeelden krijgen dezelfde stille keyline en directe drukrespons. */
.home .card .photo{
  box-shadow:var(--lift-0);
  transition:transform .12s var(--ease-act), box-shadow .3s var(--ease-act);
}
.home .card .photo::before{
  box-shadow:var(--lift-ring);
}
.home .card .photo img{
  transition:transform .44s var(--ease-act);
}
.home .card:hover .photo{
  box-shadow:var(--lift-1);
}
.home .card:hover .photo img{ transform:scale(1.014); }
.home .card:active .photo{ transform:translateY(1px); }

/* Het bronportret is scherp genoeg; de presentatie laat het sneller tot rust komen. */
.home .founder-photo .photo{
  box-shadow:var(--lift-1);
}
.home .founder-photo .photo::before{
  box-shadow:var(--lift-ring-hi);
}
.home .founder-photo[data-reveal] .photo img{
  transform:scale(1.012);
  transition:transform .48s var(--ease-act);
}
.home .founder-photo[data-reveal].is-in .photo img{ transform:scale(1); }

/* Ondersteunende beelden krijgen dezelfde subtiele reactie als de kaarten. */
.home .ingangen-figure img,
.home .kc-spread{
  transition:transform .44s var(--ease-act);
}

@media (hover:hover) and (pointer:fine){
  .home .ingangen-figure:hover img{ transform:scale(1.012); }
  .home .kc-spread[data-reveal].is-in:hover{ transform:translateY(-2px); }
  .home .founder-photo[data-reveal].is-in:hover .photo img{ transform:scale(1.01); }
}

@media (prefers-reduced-motion:reduce){
  .home section [data-reveal], .home .card .photo,
  .home .card .photo img, .home .founder-photo[data-reveal] .photo img,
  .home .ingangen-figure img{
    transition:none !important;
    transform:none !important;
  }
}

/* ============================================================
   SUBPAGINA'S V3 · 2026-08-14
   Kanaaleigen vertaling van de gelockte homepagekwaliteit.
   Alle selectors zijn pagina-afgeschermd; de homepage blijft onaangeraakt.
   ============================================================ */

.section-rule{
  width:min(1220px,90vw); height:1px; margin:0 auto; border:0;
  background:var(--line-soft);
}
.subpage-first{ padding-top:clamp(2.7rem,4vw,3.7rem); }

/* Kansencheck: praktische koopinformatie volgt hetzelfde ritme als de overige tekstblokken. */
.page-kansencheck .kc-practical .eyebrow{ margin-bottom:1rem; }
.page-kansencheck .kc-practical h2{ margin-bottom:1.25rem; }
.page-kansencheck .kc-practical p + p{ margin-top:.85rem; }

/* Dezelfde korte, beheerste beweging als op de golden reference. */
body:not(.home) main [data-reveal],
body:not(.home) .page-hero [data-reveal]{
  transform:translateY(8px); filter:none;
  transition:opacity .46s var(--ease-act), transform .46s var(--ease-act);
}
body:not(.home) main [data-reveal].is-in,
body:not(.home) .page-hero [data-reveal].is-in{ transform:none; }

/* Aanpak: drie redactionele hoofdstukken en een vertrouwensblok. */
.page-aanpak .focus-detail{
  padding:clamp(2.9rem,4.6vw,4.4rem) 0;
  gap:clamp(2.6rem,4.8vw,4.6rem);
}
.page-aanpak .focus-media .photo{
  box-shadow:var(--lift-1);
}
.page-aanpak .focus-media .photo::before{
  box-shadow:var(--lift-ring);
}
.page-aanpak .focus-media .photo img{
  transform:scale(1.012);
  transition:transform .48s var(--ease-act);
}
.page-aanpak .focus-media.is-in .photo img{ transform:scale(1); }
.page-aanpak .focus-copy h2{
  max-width:none;
  font-size:clamp(1.85rem,3vw,2.55rem);
  line-height:1.08;
  margin:.75rem 0 .85rem;
  text-wrap:balance;
}
.page-aanpak .focus-copy .focus-intent{
  max-width:58ch;
  color:var(--body);
  font-size:clamp(1rem,1.25vw,1.1rem);
  line-height:1.6;
}
.page-aanpak .focus-copy .focus-route{
  max-width:58ch;
  margin-top:.7rem;
  color:var(--muted);
  line-height:1.6;
}
.page-aanpak .mini-label{ margin-top:1.45rem; }
.page-aanpak .mini-list{ margin-top:1rem; gap:.52rem; }
.page-aanpak .mini-list li{ color:var(--body); line-height:1.5; }
.page-aanpak .approach-steps .steps{
  max-width:none;
  margin-top:clamp(2rem,3vw,2.6rem);
}
.page-aanpak .approach-steps .steps li{ padding:1.3rem 0; }
.trust-block{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(3rem,6vw,6rem); align-items:start;
}
.trust-block h2{ margin-top:1rem; max-width:16ch; }
.trust-list{ list-style:none; border-top:1px solid var(--line); }
.trust-list li{
  display:grid; grid-template-columns:1.2rem 1fr; gap:.8rem;
  padding:1.25rem 0; border-bottom:1px solid var(--line-soft);
  color:var(--cream); font-size:1rem; line-height:1.62;
}
.trust-list li::before{ content:""; width:5px; height:5px; margin-top:.65rem; border-radius:50%; background:var(--brass); }

/* Kansencheck: een lichte rapporttaal en vier werkelijk verschillende uitkomsten. */
.page-kansencheck .kc-hero-grid{ grid-template-columns:.96fr 1.04fr; }
.page-kansencheck .kc-hero-copy h1{ max-width:15ch; }
.page-kansencheck .kc-hero-copy .hero-cta{ margin-top:1.7rem; }
.page-kansencheck .kc-hero-copy .hero-note{ margin-top:1.3rem; }
.page-kansencheck .kc-spread--product{
  position:relative; width:100%; min-width:0; min-height:clamp(315px,31vw,430px); margin:0; isolation:isolate;
  transition:transform .44s var(--ease-act);
}
.page-kansencheck .kc-sheet{
  position:absolute; aspect-ratio:16/9; overflow:hidden; background:#F3F0E7;
  outline:1px solid rgba(243,240,231,.30); outline-offset:-1px;
  box-shadow:var(--lift-1); transform-origin:center;
}
.page-kansencheck .kc-sheet img{ display:block; width:100%; height:100%; object-fit:cover; }
.page-kansencheck .kc-sheet--summary{ width:72%; top:2%; right:7%; z-index:1; transform:rotate(2.2deg); }
.page-kansencheck .kc-sheet--choices{ width:76%; top:23%; right:0; z-index:2; transform:rotate(4deg); }
.page-kansencheck .kc-sheet--cover{ width:80%; left:1%; top:29%; z-index:3; transform:rotate(-2.2deg); }
.page-kansencheck .fit-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.5rem);
  border:0;
}
.page-kansencheck .fit-column{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(1.8rem,3vw,2.5rem) clamp(1.4rem,2.4vw,2rem);
  border:1px solid var(--line); border-radius:9px;
  background-color:#0F2A52;
  background-image:linear-gradient(145deg,rgba(15,42,82,.78),rgba(4,16,42,.88));
}
.page-kansencheck .fit-column:first-child{
  border-top:2px solid rgba(63,169,232,.66);
}
.page-kansencheck .fit-column + .fit-column{
  border-top:2px solid rgba(201,164,104,.68);
  padding-left:clamp(1.4rem,2.4vw,2rem);
}
.page-kansencheck .fit-column::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; border:1px solid rgba(255,255,255,.025);
  background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 44%);
}
.page-kansencheck .fit-column h3{ font-family:var(--font-body); font-size:1.08rem; font-weight:600; letter-spacing:0; margin-bottom:1rem; }
.page-kansencheck .fit-column ul{ list-style:none; }
.page-kansencheck .fit-column li{
  display:grid; grid-template-columns:1rem 1fr; gap:.65rem;
  padding:.65rem 0; color:var(--body); font-size:.96rem; line-height:1.68;
}
.page-kansencheck .fit-column li::before{ content:""; width:4px; height:4px; margin-top:.62rem; border-radius:50%; background:var(--brass); }
.page-kansencheck .fit-column:first-child li::before{ background:var(--azure); }
.report-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(3rem,6vw,6rem); align-items:center; }
.report-copy h2{ margin:.9rem 0 1.4rem; }
.page-kansencheck .report-page{
  position:relative; margin:0; overflow:hidden; border-radius:4px;
  background:#F3F0E7; outline:1px solid rgba(243,240,231,.28); outline-offset:-1px;
  box-shadow:var(--lift-2);
  transform:rotate(-1deg); transition:transform .44s var(--ease-act);
}
.page-kansencheck .report-page img{ display:block; width:100%; height:auto; }
.page-kansencheck .report-page.is-in{ transform:rotate(0); }
.report-outcomes{ list-style:none; counter-reset:outcome; border-top:1px solid var(--line); }
.report-outcomes li{
  counter-increment:outcome; display:grid; grid-template-columns:2.5rem 1fr; gap:1rem;
  padding:1.05rem 0; border-bottom:1px solid var(--line-soft);
}
.report-outcomes li::before{
  content:"0" counter(outcome); color:var(--brass); font-family:var(--font-display); font-style:italic;
}
.report-outcomes h3{ font-family:var(--font-body); font-size:1rem; font-weight:600; letter-spacing:0; margin-bottom:.2rem; }
.report-outcomes p{ font-size:.92rem; line-height:1.55; }
.report-copy .proof-note{ margin-top:1.5rem; }

/* Over: een bewijsblok en drie principes. */
.page-over .page-hero h1{ max-width:38ch; }
.founder--story{ background:var(--bg-lift); }
.founder--story .founder-grid{ grid-template-columns:.72fr 1.28fr; align-items:center; }
.founder--story .founder-photo{ max-width:390px; }
.founder--story .founder-photo .photo{
  box-shadow:var(--lift-1);
}
.founder--story .founder-photo .photo::before{ box-shadow:var(--lift-ring-hi); }
.founder--story .founder-photo .photo img{ aspect-ratio:4/5; object-position:center 20%; transform:scale(1.012); transition:transform .48s var(--ease-act); }
.founder--story .founder-photo.is-in .photo img{ transform:scale(1); }
.founder--story .founder-copy h2{ margin:.85rem 0 1.1rem; }
.founder--story .founder-copy > p + p{ margin-top:.8rem; }
.principles-list{ list-style:none; border-top:1px solid var(--line); }
.principles-list li{
  display:grid; grid-template-columns:3.4rem minmax(0,1fr); gap:1.5rem;
  padding:clamp(1.5rem,2.5vw,2rem) 0; border-bottom:1px solid var(--line-soft);
}
.principles-list > li > span{ color:var(--brass); font-family:var(--font-display); font-style:italic; font-size:1.25rem; }
.principles-list h3{ font-family:var(--font-body); font-weight:600; font-size:1.08rem; letter-spacing:0; margin-bottom:.35rem; }
.principles-list p{ max-width:70ch; }

/* Contact: kennismaken en direct betaald onderzoek zijn gelijkwaardige ingangen. */
.contact-routes{
  display:grid; grid-template-columns:1fr 1fr;
  position:relative; gap:clamp(1rem,2vw,1.4rem); overflow:visible;
  border:0; border-radius:0;
  background:transparent;
  box-shadow:none;
}
.contact-route{
  display:flex; flex-direction:column; overflow:hidden;
  padding:clamp(2.4rem,4vw,3.8rem);
  border:1px solid var(--line); border-radius:9px;
  box-shadow:var(--lift-1);
}
.contact-route--featured{
  position:relative; background:var(--bg-lift);
  border-color:rgba(63,169,232,.22);
}
.contact-route--featured::before{
  content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:var(--azure); opacity:.68;
}
.contact-route--direct{
  background:var(--panel);
  border-color:rgba(201,164,104,.30);
}
.contact-route + .contact-route{ border-left:1px solid rgba(201,164,104,.30); }
.contact-route h2{ margin:.9rem 0 .85rem; font-size:clamp(1.55rem,2.6vw,2.1rem); }
.contact-route p{ max-width:44ch; }
.contact-route .actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:auto; padding-top:1.6rem; }
.contact-route-points{
  display:flex; flex-wrap:wrap; gap:.45rem 1rem; list-style:none;
  margin:1.35rem 0 .2rem; padding-top:1.15rem; border-top:1px solid var(--line-soft);
}
.contact-route-points li{ display:flex; align-items:center; gap:.48rem; color:var(--body); font-size:.86rem; }
.contact-route-points li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--azure); flex:0 0 auto; }
.contact-route .kc-line{ display:flex; align-items:baseline; gap:.65rem; margin-top:1.25rem; }
.contact-route .kc-line b{ font-family:var(--font-display); font-size:1.7rem; font-weight:400; color:var(--brass); }
.contact-route .kc-line span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--body-dim); }
.contact-route .contact-micro{ margin-top:1rem; max-width:48ch; color:var(--body-dim); font-size:.8rem; line-height:1.55; }
.contact-actions{ align-items:center; }
.contact-call{
  display:flex; flex-direction:column; justify-content:center; gap:.12rem;
  min-height:48px; padding:.2rem .2rem .2rem .8rem;
  border-left:1px solid var(--line); color:var(--cream);
}
.contact-call span{ color:var(--body-dim); font-size:.68rem; line-height:1.2; letter-spacing:.14em; text-transform:uppercase; }
.contact-call strong{ font-size:.98rem; line-height:1.4; font-weight:600; }
.company-line{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem .65rem;
  margin:1.35rem auto 0; color:var(--body-dim); font-size:.75rem; line-height:1.5; text-align:center;
}

.error-page{
  min-height:100svh; display:flex; align-items:center;
  padding:clamp(8rem,15vh,11rem) 0 clamp(4rem,8vh,7rem);
  background:var(--bg);
}
.error-page h1{ margin:.8rem 0 1rem; max-width:12ch; }
.error-page .lead{ max-width:48ch; }

/* Footer: een rustig merkslot met precieze uitlijning. */
footer{ border-top:1px solid rgba(201,164,104,.16); padding-top:clamp(3.8rem,6vw,5.2rem); }
footer .footer-grid{ grid-template-columns:1.65fr .72fr 1fr; gap:clamp(2.4rem,5vw,5rem); }
footer .footer-brand .brand{ width:max-content; margin-bottom:1.35rem; }
footer .footer-brand .brand .mark{ height:52px; }
footer .footer-brand p{ max-width:30ch; line-height:1.65; }
footer .footer-col h2, footer .footer-col h4{ color:var(--brass); margin-bottom:1rem; }
footer .footer-col ul{ gap:.5rem; }
footer .footer-bottom{ margin-top:clamp(2.8rem,5vw,4.2rem); padding-top:1.35rem; align-items:center; }

@media (hover:hover) and (pointer:fine){
  .page-aanpak .focus-media.is-in:hover .photo img,
  .founder--story .founder-photo.is-in:hover .photo img{ transform:scale(1.01); }
  .page-kansencheck .kc-spread--product.is-in:hover{ transform:translateY(-2px); }
}

@media (min-width:1180px){
  .page-aanpak .focus-detail{ align-items:stretch; }
  .page-aanpak .focus-media,
  .page-aanpak .focus-media .photo{ height:100%; }
  .page-aanpak .focus-media .photo img{
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
  }
}

@media (max-width:980px){
  .trust-block, .report-grid, .founder--story .founder-grid,
  .page-kansencheck .kc-hero-grid{ grid-template-columns:1fr; }
  .trust-block h2{ max-width:20ch; }
  .report-visual{ order:2; }
  .founder--story .founder-photo{ max-width:300px; }
  .page-kansencheck .page-hero .kc-spread--product{ order:0; margin-top:1.2rem; }
  .page-kansencheck .kc-spread--product{ width:min(100%,720px); min-height:clamp(310px,55vw,460px); }
  footer .footer-grid{ grid-template-columns:1fr 1fr; }
  footer .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:860px){
  body:not(.home) .nav-links{
    position:fixed; inset:0; z-index:-1; flex-direction:column; justify-content:center; gap:2rem;
    background:rgba(2,8,22,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  }
  body:not(.home) .nav-links a:not(.btn){ font-size:1.3rem; }
  body:not(.home) .nav.is-open .nav-links{ opacity:1; pointer-events:auto; z-index:999; }
  body:not(.home) .nav-toggle{ display:block; position:relative; z-index:1001; }
  body:not(.home) .nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body:not(.home) .nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
  body:not(.home) .nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

@media (min-width:861px) and (max-height:680px){
  .page-kansencheck .page-hero{ padding-top:5.45rem; padding-bottom:2.2rem; }
  .page-kansencheck .kc-hero-copy h1{
    font-size:3rem; line-height:1.03; margin:.7rem 0 .75rem;
  }
  .page-kansencheck .kc-hero-copy .lead{ font-size:1rem; line-height:1.5; }
  .page-kansencheck .kc-hero-copy .hero-cta{ margin-top:1.05rem; }
  .page-kansencheck .kc-hero-copy .hero-note{ margin-top:.8rem; }
}

@media (max-width:760px){
  .page-kansencheck .fit-grid{ grid-template-columns:1fr; }
  .page-kansencheck .fit-column + .fit-column{
    border-top:2px solid rgba(201,164,104,.68);
    padding-left:clamp(1.4rem,2.4vw,2rem);
  }
  .contact-route{ padding:clamp(2rem,8vw,2.7rem); }
  .contact-route--featured::before{ inset:0 0 auto; width:auto; height:2px; }
  .contact-call{ padding-left:.75rem; }
  .page-kansencheck .kc-spread--product{ min-height:clamp(225px,62vw,340px); }
  .page-kansencheck .kc-sheet--summary{ width:76%; top:2%; right:4%; transform:rotate(1.2deg); }
  .page-kansencheck .kc-sheet--choices{ width:79%; top:23%; right:0; transform:rotate(2deg); }
  .page-kansencheck .kc-sheet--cover{ width:84%; left:0; top:29%; transform:rotate(-1.2deg); }
  .principles-list li{ grid-template-columns:2.5rem minmax(0,1fr); gap:1rem; }
}

@media (max-width:900px){
  .page-contact .contact-routes{ grid-template-columns:1fr; }
  .page-contact .contact-route + .contact-route{
    border-left:1px solid rgba(201,164,104,.30);
  }
  /* Op een korte liggende telefoon mogen de drie routekenmerken niet naast
     elkaar worden geperst. Ieder punt blijft een eigen, rustig leesbare regel. */
  .page-contact .contact-route-points{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
  .page-contact .contact-route-points li{ width:100%; }
  .contact-route--featured::before{ inset:0 0 auto; width:auto; height:2px; }
}

@media (max-width:560px){
  footer .footer-grid{ grid-template-columns:1fr; }
  footer .footer-brand{ grid-column:auto; }
}

@media (prefers-reduced-motion:reduce){
  .skip-link{ transition:none !important; }
  body:not(.home) main [data-reveal],
  body:not(.home) .page-hero [data-reveal],
  .page-aanpak .focus-media .photo img,
  .founder--story .founder-photo .photo img,
  .page-kansencheck .kc-spread--product{
    transition:none !important; transform:none !important;
  }
}

/* ------------------------------------------------------------
   Contactpagina: bellen, appen of mailen, alle drie met een tik.
   Geen formulier en geen script: minder dat stuk kan gaan.
   Afgeschermd op .page-contact zodat de gelockte homepage niet meebeweegt.
   ------------------------------------------------------------ */
.page-contact .page-hero{
  padding-top:clamp(5.6rem,8.5vh,6.5rem);
  padding-bottom:clamp(1.2rem,2vw,1.65rem);
}
.page-contact .page-hero h1{
  max-width:32ch;
  margin:.85rem 0 .7rem;
  font-size:clamp(2.2rem,4.1vw,3.25rem);
}
.page-contact .page-hero .lead{
  max-width:76ch;
  font-size:clamp(.94rem,1.15vw,1rem);
  line-height:1.55;
}
.page-contact .subpage-first{ padding-top:clamp(1.1rem,1.7vw,1.65rem); }
.page-contact .contact-route{
  position:relative;
  padding:clamp(2rem,2.6vw,2.65rem) clamp(2rem,3.2vw,3rem);
  scroll-margin-top:clamp(17rem,45vh,22rem);
}
.page-contact .contact-route .actions{ padding-top:1.1rem; }
.page-contact .btn-kc{ background:var(--brass); border-color:var(--brass); color:#150F03; }
.page-contact .btn-kc:hover{ filter:brightness(1.06); }

@media (min-width:761px) and (max-height:700px){
  .page-contact .page-hero{ padding-top:5.2rem; padding-bottom:1.2rem; }
  .page-contact .page-hero h1{ margin:.65rem 0 .6rem; font-size:clamp(2rem,3.6vw,2.7rem); }
  .page-contact .page-hero .lead{ font-size:.94rem; line-height:1.5; }
  .page-contact .subpage-first{ padding-top:1.3rem; }
  .page-contact .contact-route{ padding:1.55rem 2rem; }
  .page-contact .contact-route h2{ margin:.55rem 0 .65rem; font-size:1.55rem; }
  .page-contact .contact-route p{ font-size:.92rem; line-height:1.5; }
  .page-contact .contact-route-points{ margin:.85rem 0 0; padding-top:.75rem; gap:.35rem .8rem; }
  .page-contact .contact-route-points li{ font-size:.82rem; line-height:1.4; }
  .page-contact .contact-route .kc-line{ margin-top:.75rem; }
  .page-contact .contact-route .kc-line b{ font-size:1.5rem; }
  .page-contact .contact-route .contact-micro{ margin-top:.6rem; }
  .page-contact .contact-route .actions{ padding-top:.95rem; }
}

/* De nadruk volgt de route waar de bezoeker vandaan komt. */
.page-contact #kansencheck:target{
  background:var(--panel-2);
  border-color:rgba(201,164,104,.52);
  box-shadow:var(--lift-1), inset 0 0 0 1px rgba(201,164,104,.12);
}
.page-contact #kansencheck:target::before{
  content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--brass);
}
.page-contact .contact-routes:has(#kansencheck:target) .contact-route--featured{ background:rgba(2,8,22,.72); }
.page-contact .contact-routes:has(#kansencheck:target) .contact-route--featured::before{ opacity:0; }

@media (max-width:900px){
  .page-contact #kansencheck:target::before{ inset:0 0 auto; width:auto; height:2px; }
}

.page-contact .direct{
  margin-top:clamp(2.4rem,4vw,3.4rem);
  padding-top:clamp(2.2rem,3.6vw,3rem);
  padding-bottom:clamp(.4rem,1vw,.8rem);
  border-top:1px solid var(--line-soft);
}
.page-contact .direct h2{ margin:0 0 1.4rem; font-size:clamp(1.4rem,2.3vw,1.8rem); }
.page-contact .direct-routes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem;
}
.page-contact .direct-routes a{
  display:flex; flex-direction:column; gap:.15rem; text-decoration:none;
  padding:1rem 1.15rem; border:1px solid var(--line-soft); border-radius:9px;
  background:rgba(2,8,22,.42); transition:border-color .18s cubic-bezier(.22,1,.36,1);
}
.page-contact .direct-routes a:hover{ border-color:var(--line); }
.page-contact .direct-routes span{
  color:var(--body-dim); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.page-contact .direct-routes strong{ font-size:1rem; font-weight:600; color:var(--cream); overflow-wrap:anywhere; }

.page-contact .contact-send-help{
  flex:1 0 100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.45rem .8rem;
  margin-top:.25rem;
  padding:.78rem .9rem;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:rgba(2,8,22,.45);
  color:var(--body-dim);
  font-size:.76rem;
  line-height:1.45;
}
.page-contact .contact-send-help[hidden]{ display:none; }
.page-contact .contact-send-help a,
.page-contact .contact-send-help button{
  appearance:none;
  border:0;
  padding:0;
  background:none;
  color:var(--cream);
  font:inherit;
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:rgba(201,164,104,.46);
  text-underline-offset:3px;
  cursor:pointer;
}
.page-contact .contact-send-help a:hover,
.page-contact .contact-send-help button:hover{ text-decoration-color:var(--brass); }
.page-contact .contact-send-help :is(a,button):focus-visible{
  outline:2px solid var(--azure);
  outline-offset:4px;
  border-radius:2px;
}
.page-contact .contact-send-help small{
  flex:1 0 100%;
  min-height:1em;
  color:var(--azure);
  font-size:.72rem;
}
@media (max-width:760px){
  .page-contact .direct-routes{ grid-template-columns:1fr; }
  .page-contact .contact-send-help{ align-items:flex-start; }
}

/* ------------------------------------------------------------
   Voorbeeldrapport als doorklikbaar boek. Een blad tegelijk, geen
   scrollen binnen het rapport. Lichte vellen op het navy canvas,
   zoals de standaard voor rapportpagina's voorschrijft.
   Alles afgeschermd op .page-rapport.
   ------------------------------------------------------------ */
.page-rapport{ --ink:#111C33; --ink-soft:#4A5872; --sheet:#F5F2E9; --sheet-line:rgba(17,28,51,.12); --goud:#9A7B3C; }
.page-rapport .rapport-hero .wrap{ max-width:min(880px,90vw); }
.page-rapport .rapport-main{ padding-top:clamp(1.6rem,3vw,2.6rem); }
.page-rapport .boek-sectie{ padding-bottom:clamp(3rem,5vw,4.6rem); }

.page-rapport .boek{
  position:relative; height:clamp(30rem,72vh,44rem);
  perspective:1600px;
}
.page-rapport .boek-vellen{ position:relative; height:100%; }
.page-rapport .boek-blad{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--sheet); color:var(--ink); border-radius:3px;
  padding:clamp(1.4rem,3vw,2.9rem) clamp(1.3rem,3.4vw,3.2rem) clamp(2.4rem,3.4vw,3rem);
  box-shadow:var(--lift-2);
  overflow:hidden;
}
.page-rapport .boek-blad[hidden]{ display:none; }
.page-rapport .blad-binnen{ flex:1 1 auto; min-height:0; }
.page-rapport .blad-nr{
  position:absolute; right:clamp(1.3rem,3.4vw,3.2rem); bottom:clamp(1rem,1.8vw,1.5rem);
  font-family:var(--font-display); font-size:.86rem; color:var(--goud); letter-spacing:.06em;
}
.page-rapport .boek-blad.is-nieuw{ animation:bladIn .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes bladIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* Omslag */
.page-rapport .boek-blad--omslag{ justify-content:center; }
.page-rapport .omslag{ max-width:44rem; }
.page-rapport .omslag-merk{
  font-family:var(--font-display); font-size:1.05rem; color:var(--goud); letter-spacing:.02em;
}
.page-rapport .omslag-stempel{
  display:inline-flex; flex-direction:column; gap:.1rem; margin:1.1rem 0 1.6rem;
  padding:.5rem .75rem; border:1px solid rgba(154,123,60,.45); border-radius:3px;
  background:rgba(154,123,60,.08);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--goud);
}
.page-rapport .omslag-stempel span{ letter-spacing:.02em; text-transform:none; font-size:.8rem; color:var(--ink-soft); }
.page-rapport .omslag h2{
  margin:0; color:var(--ink); font-size:clamp(1.9rem,3.6vw,2.9rem); letter-spacing:-.015em;
}
.page-rapport .omslag-klant{
  margin:.35rem 0 1.5rem; color:var(--ink); font-family:var(--font-display);
  font-size:clamp(1.15rem,2.1vw,1.5rem);
}
.page-rapport .omslag-vraag{
  margin:0 0 1.7rem; padding-left:1rem; border-left:2px solid var(--goud);
  color:var(--ink); font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.66; max-width:40rem;
}
.page-rapport .omslag-feiten{ margin:0; display:grid; gap:.5rem; }
.page-rapport .omslag-feiten > div{ display:flex; flex-wrap:wrap; gap:.25rem .9rem; }
.page-rapport .omslag-feiten dt{
  flex:0 0 8.5rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  padding-top:.15rem;
}
.page-rapport .omslag-feiten dd{ margin:0; color:var(--ink); font-size:.95rem; }
.page-rapport .omslag-hint{ margin:1.4rem 0 0; font-size:.84rem; color:var(--ink-soft); }

/* Inhoud van een blad */
.page-rapport .sheet-kop{
  display:flex; align-items:baseline; gap:.9rem;
  padding-bottom:.75rem; margin-bottom:1.05rem; border-bottom:1px solid var(--sheet-line);
}
.page-rapport .sheet-nr{ font-family:var(--font-display); font-size:1rem; color:var(--goud); }
.page-rapport .boek-blad h2{ margin:0; color:var(--ink); font-size:clamp(1.3rem,2.2vw,1.8rem); letter-spacing:-.01em; }
.page-rapport .boek-blad h3{
  margin:1.15rem 0 .45rem; color:var(--ink); font-family:var(--font-body);
  font-size:.98rem; font-weight:600; letter-spacing:0;
}
.page-rapport .boek-blad p{ color:var(--ink-soft); max-width:66ch; font-size:.96rem; line-height:1.66; }
.page-rapport .sheet-lead{ color:var(--ink); font-size:clamp(1rem,1.4vw,1.06rem); line-height:1.7; }
.page-rapport .sheet-note{
  margin-top:1.1rem; padding-top:.75rem; border-top:1px solid var(--sheet-line);
  font-size:.84rem; color:var(--ink-soft);
}
.page-rapport .sheet-list{ list-style:none; margin:.55rem 0 0; padding:0; display:grid; gap:.5rem; }
.page-rapport .sheet-list li{
  position:relative; padding-left:1.1rem; color:var(--ink-soft);
  line-height:1.62; font-size:.95rem; max-width:66ch;
}
.page-rapport .sheet-list li::before{
  content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--goud);
}
.page-rapport .sheet-list b{ color:var(--ink); font-weight:600; }
.page-rapport .sheet-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; }
.page-rapport .kans-lijst{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.9rem; }
.page-rapport .kans-lijst > li{ padding-bottom:.9rem; border-bottom:1px solid var(--sheet-line); }
.page-rapport .kans-lijst > li:last-child{ border-bottom:0; padding-bottom:0; }
.page-rapport .kans-kop{ display:flex; align-items:baseline; gap:.7rem; }
.page-rapport .kans-nr{ font-family:var(--font-display); font-size:1.25rem; color:var(--goud); flex:0 0 auto; line-height:1; }
.page-rapport .kans-kop h3{ margin:0; font-size:1rem; }
.page-rapport .kans-lijst p{ margin:.42rem 0 0; font-size:.93rem; }
.page-rapport .kans-waarom{ font-size:.9rem; }
.page-rapport .afval{ margin-top:1rem; padding-left:1rem; border-left:2px solid rgba(17,28,51,.18); }
.page-rapport .afval h3{ margin:0 0 .3rem; }
.page-rapport .afval p{ margin:0; }
.page-rapport .stap-blok{ margin-top:.9rem; }
.page-rapport .stap-rijen{ display:grid; gap:.45rem; margin-top:1.1rem; }
.page-rapport .stap-rijen > div{
  display:flex; flex-wrap:wrap; gap:.25rem 1rem; align-items:baseline;
  padding:.6rem .8rem; border:1px solid var(--sheet-line); border-radius:3px;
}
.page-rapport .stap-rijen span{
  flex:0 0 11rem; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.page-rapport .stap-rijen b{ color:var(--ink); font-weight:600; font-size:.93rem; }

/* Bladerbalk */
.page-rapport .boek-balk{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1.1rem;
}
.page-rapport .boek-knop{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.62rem 1.05rem; border-radius:9px; font:inherit; font-size:.92rem; font-weight:600;
  color:var(--cream); background:rgba(255,255,255,.05); border:1px solid var(--line);
  transition:transform .18s cubic-bezier(.22,1,.36,1), border-color .18s cubic-bezier(.22,1,.36,1);
}
.page-rapport .boek-knop:hover:not(:disabled){ transform:translateY(-1px); border-color:var(--azure); }
.page-rapport .boek-knop:disabled{ opacity:.32; cursor:default; }
.page-rapport .boek-knop--door{ background:var(--cream); color:#0B1526; border-color:var(--cream); }
.page-rapport .boek-stippen{ display:flex; gap:.45rem; flex-wrap:wrap; justify-content:center; }
.page-rapport .boek-stip{
  width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(150,180,220,.35); background:transparent;
  transition:background .18s cubic-bezier(.22,1,.36,1), border-color .18s cubic-bezier(.22,1,.36,1);
}
.page-rapport .boek-stip:hover{ border-color:var(--azure); }
.page-rapport .boek-stip[aria-current="true"]{ background:var(--brass); border-color:var(--brass); }
.page-rapport .boek-status{ margin:.7rem 0 0; font-size:.82rem; color:var(--body-dim); }
.page-rapport .rapport-slotnoot{ margin-top:1.1rem; color:var(--body-dim); font-size:.9rem; }
.page-rapport .rapport-slotnoot a{ color:var(--azure-hi); }

@media (max-height:640px){
  .page-rapport .omslag-stempel{ margin:.7rem 0 1rem; }
  .page-rapport .omslag-klant{ margin:.25rem 0 .9rem; }
  .page-rapport .omslag-vraag{ margin-bottom:1rem; font-size:1rem; }
  .page-rapport .omslag-hint{ margin-top:1rem; }
  .page-rapport .omslag-feiten{ gap:.32rem; }
  .page-rapport .boek-blad h3{ margin-top:.85rem; }
  .page-rapport .sheet-note{ margin-top:.8rem; padding-top:.55rem; }
  .page-rapport .afval{ margin-top:.75rem; }
}
@media (max-height:700px) and (min-width:761px){
  .page-rapport .boek{ height:calc(100vh - 8.5rem); min-height:24rem; }
  .page-rapport .boek-blad{ padding:1.15rem 1.6rem 2rem; }
  .page-rapport .boek-blad p,
  .page-rapport .sheet-list li,
  .page-rapport .kans-lijst p{ font-size:.88rem; line-height:1.52; }
  .page-rapport .sheet-list{ gap:.32rem; }
  .page-rapport .kans-lijst{ gap:.6rem; }
  .page-rapport .kans-lijst > li{ padding-bottom:.6rem; }
  .page-rapport .sheet-lead{ font-size:.95rem; line-height:1.58; }
  .page-rapport .afval{ margin-top:.65rem; }
  .page-rapport .sheet-kop{ margin-bottom:.7rem; padding-bottom:.5rem; }
  .page-rapport .boek-blad h3{ margin-top:.7rem; margin-bottom:.35rem; }
  .page-rapport .sheet-note{ margin-top:.65rem; padding-top:.5rem; font-size:.8rem; }
}
@media (max-width:760px){
  .page-rapport .boek{ height:clamp(30rem,80vh,44rem); }
  .page-rapport .boek-blad{ padding:1.2rem 1.25rem 2.1rem; }
  .page-rapport .boek-blad p,
  .page-rapport .sheet-list li,
  .page-rapport .kans-lijst p{ font-size:.9rem; line-height:1.58; }
  .page-rapport .sheet-list{ gap:.42rem; }
  .page-rapport .kans-lijst{ gap:.75rem; }
  .page-rapport .sheet-cols{ grid-template-columns:1fr; gap:.9rem; }
  .page-rapport .stap-rijen span{ flex:0 0 100%; }
  .page-rapport .boek-knop span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .page-rapport .boek-knop{ padding:.62rem .8rem; }
  .page-rapport .omslag-feiten dt{ flex:0 0 100%; }
}
@media (prefers-reduced-motion:reduce){
  .page-rapport .boek-blad.is-nieuw{ animation:none; }
}

/* Kansencheck: wat er vooraf vastligt. Afgeschermd op .page-kansencheck. */
.page-kansencheck .voor-je-ja-zegt{ padding:clamp(3.4rem,5.4vw,5.2rem) 0 0; }
.page-kansencheck .zekerheden{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem); margin-top:1.6rem;
}
.page-kansencheck .zekerheden > div{
  padding:clamp(1.3rem,2.4vw,1.9rem); border:1px solid var(--line-soft);
  border-radius:3px; background:rgba(2,8,22,.42);
}
.page-kansencheck .zekerheden h3{
  margin:0 0 .5rem; font-family:var(--font-body); font-size:1.02rem; font-weight:600;
  letter-spacing:0; color:var(--cream);
}
.page-kansencheck .zekerheden p{ margin:0; max-width:46ch; }
@media (max-width:760px){ .page-kansencheck .zekerheden{ grid-template-columns:1fr; } }

/* Homepage: het bestaande rapportbeeld is de deur naar het voorbeeldrapport.
   Geen nieuw blok en geen verkooptekst, alleen een bijschrift. */
.home .kc-spread-link{ display:contents; }
.home .kc-spread-link:focus-visible{ outline:none; }
.home .kc-spread-link:focus-visible ~ figcaption a{ text-decoration:underline; }
.home .kc-spread figcaption{ margin-top:1rem; text-align:center; }
.home .kc-spread figcaption a{
  font-size:.86rem; color:var(--body-dim); text-decoration:none;
  border-bottom:1px solid rgba(150,180,220,.28); padding-bottom:.12rem;
  transition:color .18s cubic-bezier(.22,1,.36,1), border-color .18s cubic-bezier(.22,1,.36,1);
}
.home .kc-spread figcaption a:hover{ color:var(--cream); border-color:var(--brass); }
@media (hover:hover) and (pointer:fine){
  .home .kc-spread-link:hover ~ figcaption a{ color:var(--cream); border-color:var(--brass); }
}

.footer-registratie{ color:var(--body-dim); }
@media (max-width:760px){ .footer-registratie{ order:3; } }

/* ============================================================
   GELUXEERDE VISUELE PROEF 2026-08-22
   Inhoud en pagina-opbouw blijven gelockt. Deze laag verwijdert alleen
   terugkerende template-signalen en borgt de sitebrede rechteruitlijning.
   ============================================================ */

/* De navigatie mag nooit breder worden dan de gedeelde contentlijn. */
.nav-inner,
.nav-links,
.nav-links li,
.nav-links a{ min-width:0; }
.nav-inner{ max-width:100%; }
.brand{ flex:0 1 auto; min-width:0; }
.nav-links{ flex:0 1 auto; justify-content:flex-end; }
.nav .btn-sm{ white-space:nowrap; }

/* Standaard menuherkenning blijft, de generieke actieve onderstreping verdwijnt. */
.nav-links a:not(.btn)::after{ display:none; }
.nav-links a.is-active:not(.btn){ color:var(--cream); font-weight:600; }

/* De labels worden typografisch, niet langer telkens label + decoratief balkje. */
.eyebrow{ gap:0; }
.eyebrow::before{ display:none; }

/* De voortgangslijn voegt op de homepage geen oriëntatie of bewijs toe. */
.scroll-progress{ display:none; }

/* Gewone tekst hoeft niet als een template-cascade binnen te komen. */
main p[data-reveal],
main .eyebrow[data-reveal],
main .signals[data-reveal],
main .steps[data-reveal],
main .mini-list[data-reveal],
main .trust-list[data-reveal],
main .fit-grid[data-reveal]{
  opacity:1;
  transform:none;
  filter:none;
  transition:none;
}

/* Opsommingen blijven scanbaar, maar verliezen de herhaalde templatepijltjes. */
.signals li{ grid-template-columns:1fr; }
.signals li::before{ display:none; }

/* Het rapportbeeld is de inhoudelijke interactie: bladen waaieren subtiel open. */
.page-kansencheck .kc-sheet{
  transition:transform .62s var(--ease-act), box-shadow .62s var(--ease-act);
}
@media (hover:hover) and (pointer:fine){
  .page-kansencheck .kc-spread--product:hover .kc-sheet--summary{
    transform:translate(-7px,-5px) rotate(1.5deg);
  }
  .page-kansencheck .kc-spread--product:hover .kc-sheet--choices{
    transform:translate(8px,2px) rotate(4.5deg);
  }
  .page-kansencheck .kc-spread--product:hover .kc-sheet--cover{
    transform:translate(-4px,4px) rotate(-1.4deg);
  }
}

/* Tussen brede desktop en tablet wordt eerst ruimte gewonnen in plaats van
   dat de aanvraagknop buiten beeld wordt gedrukt. */
@media (max-width:1380px) and (min-width:861px){
  .wordmark small{ display:none; }
  .nav-inner{ gap:clamp(.9rem,1.6vw,1.5rem); }
  .nav-links{ gap:clamp(.9rem,1.45vw,1.35rem); }
  .nav .btn-primary{ margin-left:.15rem; }
  .nav .btn-sm{ padding-inline:clamp(.9rem,1.5vw,1.15rem); font-size:.82rem; }
}

@media (max-width:1040px) and (min-width:861px){
  .brand .mark{ height:32px; }
  .wordmark{ font-size:1.08rem; }
  .nav-links a:not(.btn){ font-size:.84rem; }
}

/* ============================================================
   REDACTIONELE LUXEPROEF 2026-08-22
   Alleen vorm en beweging. De gelockte inhoud en pagina-opbouw blijven staan.
   ============================================================ */

/* De aanbodkaarten worden een redactioneel drieluik in plaats van drie
   afgeronde templatepanelen. Beeld, tekst en link blijven exact gelijk. */
.home .cards-3{
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-soft);
}
.home .cards-3 .card{
  position:relative;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  padding:clamp(1.35rem,2.4vw,2rem) clamp(1rem,2.2vw,1.65rem) clamp(1.6rem,2.8vw,2.2rem);
  transition:background-color .35s var(--ease-act);
}
.home .cards-3 .card + .card{ border-left:1px solid var(--line-soft); }
.home .cards-3 .card:hover{
  transform:none;
  border-color:transparent;
  box-shadow:none;
  background:rgba(243,240,231,.018);
}
.home .cards-3 .card .photo{
  height:clamp(170px,16vw,205px);
  border-radius:2px;
  box-shadow:none;
}
.home .cards-3 .card:hover .photo{ box-shadow:none; }
.home .cards-3 .card-body{ padding:1.35rem 0 0; }
.home .cards-3 .card-body h3{ max-width:19ch; }
.home .cards-3 .card-link{ margin-top:.8rem; }

/* De vier stappen lezen als een route. Geen vier losse blokken, wel een
   heldere volgorde en voldoende ruimte voor de bestaande zinnen. */
.home .steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:none;
  margin-top:clamp(2rem,3.5vw,3rem);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-soft);
}
.home .steps li{
  display:block;
  position:relative;
  min-width:0;
  padding:clamp(1.45rem,2.6vw,2rem) clamp(.9rem,1.8vw,1.4rem) clamp(1.7rem,3vw,2.35rem);
  border:0;
}
.home .steps li + li{ border-left:1px solid var(--line-soft); }
.home .steps li::before{
  display:block;
  margin-bottom:clamp(1.25rem,2.2vw,1.75rem);
  font-size:1.05rem;
  line-height:1;
}
.home .steps h3{ margin-bottom:.55rem; }
.home .steps p{ line-height:1.58; }

@media (max-width:980px){
  .home .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home .steps li:nth-child(3){ border-left:0; border-top:1px solid var(--line-soft); }
  .home .steps li:nth-child(4){ border-top:1px solid var(--line-soft); }
}

@media (max-width:760px){
  .home .cards-3{ grid-template-columns:1fr; }
  .home .cards-3 .card{ padding-inline:0; }
  .home .cards-3 .card + .card{ border-left:0; border-top:1px solid var(--line-soft); }
  .home .cards-3 .card .photo{ height:auto; aspect-ratio:16/10; }
  .home .steps{ grid-template-columns:1fr; }
  .home .steps li{ padding-inline:0; }
  .home .steps li + li{ border-left:0; border-top:1px solid var(--line-soft); }
}

@media (prefers-reduced-motion:reduce){
  .home .cards-3 .card{ transition:none !important; }
}

/* ============================================================
   TACTIELE LUXELAAG 2026-08-22
   Drie rustige reacties op echte inhoud. Geen extra pagina-opbouw,
   geen beeldzoom en geen permanente beweging.
   ============================================================ */

/* 1. De drie spoorbeelden blijven op hun exacte pixels staan. Diepte komt
   uitsluitend uit het beeldkader, zodat fijne lijnen tijdens hover scherp blijven. */
.home .cards-3 .card .photo{
  box-shadow:var(--lift-0);
  transform:none;
  transition:box-shadow .34s var(--ease-act);
}
.home .cards-3 .card .photo::before{
  box-shadow:var(--lift-ring);
  transition:box-shadow .34s var(--ease-act);
}
.home .cards-3 .card .photo img,
.home .cards-3 .card:hover .photo img,
.home .cards-3 .card:focus-visible .photo img{
  transform:none !important;
  transition:none !important;
}

@media (hover:hover) and (pointer:fine){
  .home .cards-3 .card:is(:hover,:focus-visible) .photo{
    box-shadow:var(--lift-1);
  }
  .home .cards-3 .card:is(:hover,:focus-visible) .photo::before{
    box-shadow:var(--lift-ring-hi);
  }
}
.home .cards-3 .card:active .photo{
  transform:none;
  box-shadow:var(--lift-druk);
}

/* 2. De vier stappen blijven een redactionele rij. De route tekent eenmaal.
   De stappen zijn niet klikbaar en krijgen daarom bewust geen kaartachtige
   hoverwash of selectiestaat. */
.home .steps{ position:relative; isolation:isolate; }
.home .steps li{
  isolation:isolate;
  overflow:hidden;
}
.home .steps li > div,
.home .steps li::before{
  position:relative;
  z-index:1;
}
.home .steps li[data-reveal]{
  opacity:1;
  transform:none;
  filter:none;
}
.home .steps li[data-reveal]::before,
.home .steps li[data-reveal] > div{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transition:
    opacity .46s var(--ease-act),
    transform .46s var(--ease-act),
    clip-path .58s var(--ease-act),
    color .3s var(--ease-act),
    text-shadow .3s var(--ease-act);
}
.home .steps li[data-reveal]::before{ transition-delay:var(--d,0s); }
.home .steps li[data-reveal] > div{ transition-delay:calc(var(--d,0s) + .07s); }
.home .steps li[data-reveal].is-in::before,
.home .steps li[data-reveal].is-in > div{
  opacity:1;
  clip-path:inset(0);
}

@media (min-width:981px){
  .home .steps::before{
    content:"";
    position:absolute;
    z-index:2;
    top:-1px;
    left:0;
    width:100%;
    height:1px;
    pointer-events:none;
    transform:scaleX(0);
    transform-origin:left center;
    background:linear-gradient(90deg, rgba(201,164,104,.82), rgba(63,169,232,.44) 58%, rgba(233,238,246,.12));
    transition:transform .82s var(--ease-act) .04s;
  }
  .home .steps:has(li.is-in)::before{ transform:scaleX(1); }
}

/* 3. De ingangenfoto voelt als hetzelfde gemonteerde, fotografische object
   als de havenfoto: een warme keyline, brede diepte en een rustige beeldinloop. */
.home .ingangen-figure{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#0A1730;
  border:0;
  border-radius:var(--radius);
  box-shadow:var(--lift-2);
  transition:
    opacity .46s var(--ease-act),
    transform .46s var(--ease-act),
    box-shadow .35s var(--ease-act);
}
.home .ingangen-figure::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  box-shadow:var(--lift-ring-hi);
  pointer-events:none;
  transition:box-shadow .35s var(--ease-act);
}
.home .ingangen-figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
  border:0;
  border-radius:inherit;
  box-shadow:none;
  transform:scale(1.018);
  backface-visibility:hidden;
  transition:transform .78s var(--ease-act);
}

/* De figuur kwam binnen als een veeg: het kader stond er na .28s, daarna schoof
   het beeld er in .82s van links in. Twee bewegingen die niet samenvielen, en
   een harde verticale rand die over dunne cirkels en lijnen liep. Dat is precies
   waar een wipe rafelig wordt. Het duurde bovendien bijna twee keer zo lang als
   de eigen norm van 460 ms.

   De foto komt nu als een geheel aan en ademt daarbij eenmaal heel licht in. */
.home .ingangen-figure[data-reveal]{
  opacity:0;
  transform:translateY(8px);
  filter:none;
  transition:
    opacity .46s var(--ease-act),
    transform .46s var(--ease-act),
    box-shadow .35s var(--ease-act);
}
.home .ingangen-figure[data-reveal].is-in{
  opacity:1;
  transform:none;
}
.home .ingangen-figure[data-reveal] img{
  clip-path:none;
  transform:scale(1.025);
}
.home .ingangen-figure[data-reveal].is-in img{
  clip-path:none;
  transform:scale(1);
}
@media (hover:hover) and (pointer:fine){
  .home .ingangen-figure[data-reveal].is-in:hover{
    box-shadow:var(--lift-2-hi);
  }
  .home .ingangen-figure[data-reveal].is-in:hover img{
    transform:scale(1.008);
  }
}

/* De bestaande CTA blijft visueel hetzelfde. Focus houdt zijn diepte en
   indrukken voelt als een korte druk, ook wanneer met toetsenbord wordt gewerkt. */
.btn-primary:focus-visible{
  box-shadow:0 1px 0 rgba(255,255,255,.62) inset, 0 2px 6px -2px rgba(0,0,0,.34), 0 10px 22px -16px rgba(0,0,0,.55), 0 0 0 5px rgba(201,164,104,.18);
}
.btn-ghost:focus-visible{
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 0 0 5px rgba(201,164,104,.18);
}
.btn:active{ transform:translateY(1px); }

@media (prefers-reduced-motion:reduce){
  .home .steps::before{ transform:scaleX(1) !important; transition:none !important; }
  .home .steps li[data-reveal]::before,
  .home .steps li[data-reveal] > div,
  .home .steps li::after,
  .home .cards-3 .card .photo,
  .home .cards-3 .card .photo::before,
  .home .ingangen-figure,
  .home .ingangen-figure img{
    opacity:1 !important;
    clip-path:none !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ============================================================
   MOTIONGRAMMATICA · 2026-08-22
   Beweging heeft drie rollen: binnenkomen, de route laten lezen en
   tastbaar reageren. Rasterbeelden zoomen niet tijdens interactie.
   ============================================================ */

/* Aanpak: ieder hoofdstuk gebruikt hetzelfde 4:3-beeldkader. De lengte van
   de tekstkolom mag het beeld niet langer uitrekken of verticaal verplaatsen. */
@media (min-width:981px){
  .page-aanpak .focus-detail{ align-items:start; }
  .page-aanpak .focus-media{
    height:auto;
    padding-top:clamp(1.35rem,1.5vw,1.5rem);
  }
  .page-aanpak .focus-media .photo{ height:auto; }
  .page-aanpak .focus-media .photo img{
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
  }
}

/* Grote redactionele beelden bewegen als gemonteerd vlak. Zo blijft de foto
   zelf scherp en ontstaat toch een voelbare reactie. */
.page-aanpak .focus-media .photo{
  transform:translateY(0);
  transition:transform .32s var(--ease-act), box-shadow .34s var(--ease-act);
}
.page-aanpak .focus-media .photo img,
.page-aanpak .focus-media.is-in .photo img{
  transform:none;
  transition:none;
}

/* De drie sporen blijven klein en redactioneel. Voor beweging krijgt elk
   beeld twaalf pixels stille overscan; alleen de uitsnede schuift. */
.home .cards-3 .card[data-reveal]{
  opacity:1;
  transform:none;
  filter:none;
  transition:background-color .35s var(--ease-act);
}
.home .cards-3 .card[data-reveal] .photo{
  opacity:0;
  clip-path:inset(0 0 8% 0);
  transform:translateY(8px);
  transition:
    opacity .36s var(--ease-act),
    clip-path .46s var(--ease-act),
    transform .32s var(--ease-act),
    box-shadow .34s var(--ease-act);
  transition-delay:var(--d,0s);
}
.home .cards-3 .card[data-reveal] .card-body{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .36s var(--ease-act), transform .36s var(--ease-act);
  transition-delay:calc(var(--d,0s) + .06s);
}
.home .cards-3 .card[data-reveal].is-in .photo,
.home .cards-3 .card[data-reveal].is-in .card-body{
  opacity:1;
  clip-path:inset(0);
  transform:translateY(0);
}
.home .cards-3 .card .photo img,
.home .cards-3 .card:hover .photo img,
.home .cards-3 .card:focus-visible .photo img{
  position:absolute;
  inset:-6px;
  width:calc(100% + 12px);
  height:calc(100% + 12px);
  max-width:none;
  aspect-ratio:auto;
  object-fit:cover;
  transform:translate3d(0,0,0) !important;
  transition:transform .42s var(--ease-act) !important;
  will-change:transform;
}
.home .cards-3 .card:nth-child(1){ --pan-x:6px; --pan-y:0px; }
.home .cards-3 .card:nth-child(2){ --pan-x:-6px; --pan-y:0px; }
.home .cards-3 .card:nth-child(3){ --pan-x:0px; --pan-y:-6px; }

/* De vier stappen starten pas wanneer de route werkelijk gelezen kan worden.
   Het korte kleurverloop in het nummer markeert de volgorde en komt tot rust. */
.home .steps li[data-reveal]::before{
  color:var(--azure);
  transform:translateY(4px);
}
.home .steps li[data-reveal].is-in::before{
  color:var(--brass);
  transform:translateY(0);
}
.home .steps li[data-reveal] > div{ transform:translateY(4px); }
.home .steps li[data-reveal].is-in > div{ transform:translateY(0); }

@media (hover:hover) and (pointer:fine){
  .home .cards-3 .card[data-reveal].is-in:is(:hover,:focus-visible) .photo{
    transform:translateY(-2px);
    transition-delay:0s;
    box-shadow:var(--lift-1);
  }
  .home .cards-3 .card:is(:hover,:focus-visible) .photo img{
    transform:translate3d(var(--pan-x),var(--pan-y),0) !important;
  }
  .page-aanpak .focus-media.is-in:hover .photo{
    transform:translateY(-2px);
    box-shadow:var(--lift-1-hi);
  }
  .page-aanpak .focus-media.is-in:hover .photo img{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .home .cards-3 .card[data-reveal] .photo,
  .home .cards-3 .card[data-reveal] .card-body,
  .home .cards-3 .card .photo img,
  .home .steps li[data-reveal]::before,
  .home .steps li[data-reveal] > div,
  .page-aanpak .focus-media .photo{
    opacity:1 !important;
    clip-path:none !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ============================================================
   MOBIELE UX-REPARATIE · 2026-08-22
   Het menu blijft ook na scrollen een volledig, ondoorzichtig scherm.
   CTA-inhoud mag op smalle telefoons nooit buiten de kaart vallen.
   ============================================================ */
@media (max-width:860px){
  html.menu-open,
  html.menu-open body{
    overflow:hidden;
    overscroll-behavior:none;
  }

  .nav-links,
  .home .nav-links,
  body:not(.home) .nav-links{
    position:absolute;
    inset:0 auto auto 0;
    width:100vw;
    height:100dvh;
    min-height:100svh;
    max-width:none;
    flex:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:clamp(1.35rem,4.2vh,2rem);
    padding:max(5.5rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left));
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#020816;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .nav-links li,
  .home .nav-links li,
  body:not(.home) .nav-links li{
    flex:0 0 auto;
    width:auto;
    max-width:100%;
  }

  .nav-links li:last-child,
  .home .nav-links li:last-child,
  body:not(.home) .nav-links li:last-child{
    width:min(100%,20rem);
  }

  .nav-links .btn,
  .home .nav-links .btn,
  body:not(.home) .nav-links .btn{
    width:100%;
    max-width:100%;
    margin-left:0;
    white-space:normal;
    text-align:center;
    line-height:1.25;
  }

  .nav-links a:focus-visible{
    outline:2px solid var(--brass);
    outline-offset:4px;
  }
}

@media (max-width:760px){
  .hero-cta,
  .hero-cta .btn{
    min-width:0;
    max-width:100%;
  }
  .hero-cta .btn{
    height:auto;
    padding-block:.72rem;
    white-space:normal;
    text-align:center;
    line-height:1.25;
  }
  .cta-block{
    padding:clamp(2.35rem,10vw,3.15rem) clamp(1.25rem,6.5vw,2rem);
  }
  .cta-block > *,
  .cta-block .hero-cta,
  .cta-block .cta-note{
    min-width:0;
    max-width:100%;
  }
  .cta-block .hero-cta{
    width:100%;
    justify-self:stretch;
  }
  .cta-block .btn{
    width:100%;
    min-width:0;
    max-width:100%;
    height:auto;
    padding:.72rem clamp(.8rem,4vw,1.2rem);
    white-space:normal;
    text-align:center;
    line-height:1.25;
  }
  .cta-block .cta-note{
    overflow-wrap:break-word;
  }

  .contact-routes{
    grid-template-columns:minmax(0,1fr);
  }
  .contact-route,
  .contact-route > *,
  .contact-route .actions,
  .contact-route .btn{
    min-width:0;
    max-width:100%;
  }
  .page-contact .contact-route{
    padding-inline:clamp(1.35rem,6.5vw,1.75rem);
  }
  .contact-route .actions,
  .contact-route .btn{
    width:100%;
  }
  .contact-route .btn{
    height:auto;
    padding:.72rem clamp(.8rem,4vw,1.2rem);
    font-size:.86rem;
    gap:.5rem;
    white-space:normal;
    text-align:center;
    line-height:1.25;
  }
}

@media (max-width:340px){
  .cta-block{ padding-inline:1.1rem; }
  .cta-block .btn{ font-size:.86rem; }
}

/* Privacy- en cookiepagina's */
.page-hero--legal{padding-bottom:72px}
.page-hero--legal h1{max-width:820px}
.legal-meta{margin-top:20px;color:var(--muted);font-size:.9rem}
.legal-section{padding-top:72px}
.legal-layout{display:grid;grid-template-columns:minmax(0,820px);justify-content:center}
.legal-content{color:var(--text-soft);font-size:1.02rem;line-height:1.75}
.legal-content h2{margin:44px 0 14px;padding-top:clamp(2rem,4vw,2.8rem);border-top:1px solid rgba(150,180,220,.13);color:var(--white);font-size:clamp(1.45rem,2.4vw,2rem)}
.legal-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-content h3{margin:30px 0 8px;color:var(--cream);font-size:1.15rem}
.legal-content p,.legal-content ul{margin:0 0 18px}
.legal-content ul{padding-left:22px}
.legal-content li+li{margin-top:7px}
.legal-content a{color:var(--brass-light);text-decoration:underline;text-underline-offset:3px}
.legal-content code{padding:.08em .3em;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:rgba(255,255,255,.04);color:var(--white)}
.inline-legal-button{padding:0;border:0;background:none;color:var(--brass-light);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cookie-declaration{min-height:180px;margin:24px 0 36px;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(255,255,255,.03);box-shadow:var(--lift-0)}
.cookie-declaration-note{margin:0;max-width:62ch;color:var(--muted)}
.footer-bottom a{color:inherit}
@media (max-width:720px){.page-hero--legal{padding-bottom:48px}.legal-section{padding-top:48px}.legal-content{font-size:1rem}.cookie-declaration{padding:16px}}
.footer-legal-link{
  appearance:none;
  border:0;
  padding:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:.18em;
}
.footer-legal-link:hover{ color:#fff; }

/* De juridische onderregel is op iedere pagina exact dezelfde component.
   Links vormen een duidelijke bedieningsgroep; registratienummers blijven
   vindbaar zonder het merkslot visueel over te nemen. */
footer .footer-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:.65rem clamp(1.15rem,3vw,2.5rem);
}
.footer-copyright{ color:var(--body); white-space:nowrap; }
.footer-legal-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.15rem 1rem;
}
.footer-legal-nav a,
.footer-legal-nav .footer-legal-link{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--cream);
  letter-spacing:.035em;
}
.footer-registratie{
  display:flex;
  justify-self:end;
  gap:.35rem 1rem;
  color:var(--body-dim);
  white-space:nowrap;
}
.footer-registratie > span + span::before{
  content:"·";
  margin-right:1rem;
  color:rgba(201,164,104,.62);
}

@media (max-width:900px){
  footer .footer-bottom{
    grid-template-columns:minmax(0,1fr) auto;
  }
  footer .footer-copyright{ grid-column:1; grid-row:1; }
  footer .footer-legal-nav{ grid-column:2; grid-row:1; justify-content:flex-end; }
  footer .footer-registratie{ grid-column:1 / -1; grid-row:2; justify-self:start; }
}

@media (max-width:560px){
  footer .footer-bottom{
    grid-template-columns:minmax(0,1fr);
    gap:.2rem;
  }
  footer .footer-copyright,
  footer .footer-legal-nav,
  footer .footer-registratie{
    grid-column:1;
    grid-row:auto;
    justify-self:start;
  }
  footer .footer-legal-nav{
    justify-content:flex-start;
    flex-wrap:wrap;
    column-gap:1.15rem;
  }
  footer .footer-legal-nav:has([data-cookie-settings]:not([hidden])) > a[href="algemene-voorwaarden.html"]{
    flex-basis:100%;
  }
  footer .footer-registratie{
    flex-wrap:wrap;
    gap:.05rem 1rem;
    margin-top:.25rem;
    font-size:.84rem;
    color:var(--body);
    flex-direction:column;
    gap:.3rem;
  }
  .footer-registratie > span + span::before{ content:none; }
}

/* ============================================================
   INZICHTEN · sobere kennislaag, afgeschermd van de gelockte kern
   ============================================================ */
.insight-hero .lead{ max-width:58ch; }
.insight-index{ background:var(--bg); }
.insight-list{ border-top:1px solid var(--line); }
.insight-row{
  display:grid;
  grid-template-columns:4rem minmax(0,1fr) auto;
  gap:clamp(1.3rem,3vw,2.6rem);
  align-items:start;
  padding:clamp(2rem,4vw,3rem) 0;
  border-bottom:1px solid var(--line);
}
.insight-number{
  font-family:var(--font-display);
  font-size:1.35rem;
  line-height:1.2;
  color:var(--brass);
}
.insight-row-copy{ max-width:760px; }
.insight-row-copy .kicker,
.article-section .kicker{
  display:block;
  margin-bottom:.65rem;
  color:var(--azure);
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.insight-row h2{ margin:0 0 .7rem; font-size:clamp(1.55rem,2.7vw,2.25rem); }
.insight-row h2 a{ color:var(--cream); }
.insight-row h2 a:hover{ color:var(--azure-hi); }
.insight-row p{ margin:0; max-width:64ch; }
.insight-arrow{
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:var(--cream);
  font-size:.86rem;
  font-weight:650;
  white-space:nowrap;
}
.insight-arrow span{ color:var(--brass); transition:transform .28s var(--ease-act); }
.insight-arrow:hover span{ transform:translateX(3px); }

.insight-article-hero{ padding-bottom:clamp(3rem,5vw,4.8rem); }
.insight-article-hero .wrap{ max-width:var(--wrap); }
.insight-article-hero h1{ max-width:850px; margin-top:1.2rem; text-wrap:balance; }
.insight-article-hero .lead{ max-width:63ch; }
.article-back{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--azure-hi);
  font-size:.76rem;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.article-back::before{ content:"←"; color:var(--brass); font-size:1rem; }
.case-label{
  display:block;
  width:max-content;
  margin-top:1.25rem;
  padding:.35rem .6rem;
  border:1px solid rgba(201,164,104,.5);
  border-radius:2px;
  color:var(--brass);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.case-label + h1{ margin-top:.8rem; }
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  margin-top:1.6rem;
  color:var(--body-dim);
  font-size:.78rem;
}
.article-meta span + span::before{ content:"·"; margin-right:1.5rem; color:var(--brass); }
.insight-article{ padding:0; background:var(--bg-lift); }
.article-shell{
  display:grid;
  grid-template-columns:minmax(0,820px) minmax(230px,280px);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
  padding-top:clamp(3.6rem,6vw,6rem);
  padding-bottom:clamp(4.5rem,8vw,7.5rem);
}
.article-main{ min-width:0; }
.article-main p{ max-width:68ch; }
.article-intro{
  margin:0 0 clamp(2.8rem,5vw,4.5rem);
  color:var(--cream);
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.3vw,1.85rem);
  line-height:1.42;
}
.article-main .article-section{
  padding:clamp(2.3rem,4vw,3.4rem) 0;
  border-top:1px solid var(--line);
}
.article-main .article-section h2{ max-width:100%; margin-bottom:1.35rem; text-wrap:balance; }
/* Brons volgt de bestaande titel-emphasis; Verder lezen markeert de leesroute. */
.article-main .article-sources h2{ color:var(--brass); }
.article-main .article-section p + p{ margin-top:1rem; }
.decision-rows{ margin:1.7rem 0; border-top:1px solid var(--line-soft); }
.decision-rows > div{
  display:grid;
  grid-template-columns:minmax(150px,.32fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.4rem);
  padding:1.45rem 0;
  border-bottom:1px solid var(--line-soft);
}
.decision-rows h3{ font-size:1.1rem; color:var(--cream); }
.decision-rows p{ margin:0 !important; font-size:.96rem; }
.article-signal{
  margin-top:1.5rem;
  padding:1.05rem 1.2rem;
  border-left:2px solid var(--brass);
  background:rgba(2,10,28,.34);
  color:var(--body);
  font-size:.9rem;
}
.article-boundary{ margin-top:.5rem; }
.article-list{ margin:1.2rem 0 0; padding-left:1.2rem; color:var(--body); }
.article-list li{ padding:.35rem 0 .35rem .4rem; }
.article-list li::marker{ color:var(--azure); }
.article-list--numbered li::marker{ color:var(--brass); font-family:var(--font-display); font-size:1.1em; }
.article-sources{ padding:clamp(2.4rem,4vw,3.4rem) 0 0; border-top:1px solid var(--line); }
.article-sources h2{ margin-bottom:1rem; font-size:1.35rem; }
.article-sources ul{ list-style:none; }
.article-sources li{ padding:.65rem 0; border-bottom:1px solid var(--line-soft); }
.article-sources a{ color:var(--azure-hi); text-decoration:underline; text-decoration-color:rgba(111,195,245,.3); text-underline-offset:.22em; }
.article-aside{
  position:sticky;
  top:7rem;
  padding:1.8rem 0 0;
  border-top:2px solid var(--brass);
}
.article-aside h2{ margin:.9rem 0 1rem; font-size:clamp(1.55rem,2.5vw,2rem); }
.article-aside p{ margin-bottom:1.5rem; font-size:.92rem; }
.article-aside .btn{ width:100%; white-space:normal; text-align:center; justify-content:center; line-height:1.35; }
.article-aside--report{ border-top-color:var(--azure); }
.case-timeline{ margin:1.8rem 0 0; list-style:none; border-top:1px solid var(--line-soft); }
.case-timeline li{
  display:grid;
  grid-template-columns:7rem minmax(0,1fr);
  gap:1.5rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line-soft);
}
.case-timeline > li > span{ color:var(--brass); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.case-timeline h3{ margin-bottom:.35rem; font-size:1.1rem; }
.case-timeline p{ margin:0 !important; font-size:.95rem; }
.case-split{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:1.6rem; background:var(--line); border:1px solid var(--line); }
.case-split > div{ padding:1.5rem; background:var(--panel); }
.case-split h3{ margin-bottom:.65rem; font-size:1.05rem; }
.case-split p{ margin:0 !important; font-size:.92rem; }

@media (max-width:1100px){
  .article-shell{ grid-template-columns:1fr; }
  .article-aside{ position:static; max-width:560px; }
}
@media (max-width:700px){
  .insight-row{ grid-template-columns:2.7rem minmax(0,1fr); }
  .insight-arrow{ grid-column:2; justify-self:start; margin-top:.2rem; }
  .decision-rows > div{ grid-template-columns:1fr; gap:.45rem; }
  .article-meta{ display:grid; gap:.25rem; }
  .article-meta span + span::before{ content:none; }
  .case-timeline li{ grid-template-columns:1fr; gap:.45rem; }
  .case-split{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .page-inzicht .insight-article-hero h1{ font-size:clamp(1.8rem,7.7vw,2.3rem); line-height:1.12; }
  .insight-row{ grid-template-columns:2.25rem minmax(0,1fr); gap:1rem; }
  .insight-number{ font-size:1.05rem; }
  .insight-row h2{ font-size:1.48rem; }
  .article-shell{ padding-top:3rem; }
}

/* ============================================================
   INTERACTIE-EINDLAAG · 2026-09-02
   Vaste, beschermde inventaris voor muis, toetsenbord en touch.
   De laag herstelt voelbare feedback zonder nieuwe beeldtaal,
   lichtfeedback op informatieblokken of beweging buiten de webnorm.
   ============================================================ */

/* Het rapportdrieluik op de homepage is een echte route. Het hele object is
   klikbaar en reageert daarom ook op toetsenbordfocus en een korte druk. */
.home .kc-spread-link{
  display:block;
  min-width:0;
  color:inherit;
  text-decoration:none;
  border-radius:4px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(201,164,104,.18);
}
.home .kc-spread-link .kc-spread{ width:100%; }
.home .kc-spread-link:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:5px;
}
.home .kc-spread-link .kc-sheet{
  transition:transform .38s var(--ease-act), box-shadow .34s var(--ease-act);
}
.home .kc-spread-link:active .kc-spread[data-reveal].is-in{
  transform:translateY(1px);
  transition-duration:var(--t-active);
}

/* De link is nu het rasterkind. Op smallere schermen neemt hij daarom ook de
   bestaande positie van het rapportbeeld over: eerst het bewijs, dan de tekst. */
@media (max-width:980px){
  .home .kc-grid > .kc-spread-link{ order:-1; }
}

/* Het beeld van Tim is het anker van de sectie. De bestaande keyline blijft;
   alleen het bestaande hoogste reliëfniveau wordt hier bewust toegepast. */
.home .founder-photo .photo{
  box-shadow:var(--lift-2);
  transition:box-shadow .34s var(--ease-act);
}

/* De eerder overschreven beeldinloop op Aanpak wordt hersteld. */
.page-aanpak .focus-media .photo img{
  transform:scale(1.012);
  transition:transform .46s var(--ease-act);
}
.page-aanpak .focus-media.is-in .photo img{ transform:scale(1); }

/* Echte drukfeedback op de drie klikbare homepagekaarten. */
.home .cards-3 .card:active .photo{
  transform:translateY(1px);
  box-shadow:var(--lift-druk);
}

@media (hover:hover) and (pointer:fine){
  /* De rapportbladen waaieren iets rustiger uit dan op de productpagina. */
  .home .kc-spread-link:is(:hover,:focus-visible) .kc-sheet--summary{
    transform:translate(-5px,-4px) rotate(1.5deg);
    box-shadow:var(--lift-1-hi);
  }
  .home .kc-spread-link:is(:hover,:focus-visible) .kc-sheet--choices{
    transform:translate(6px,2px) rotate(4.7deg);
    box-shadow:var(--lift-1-hi);
  }
  .home .kc-spread-link:is(:hover,:focus-visible) .kc-sheet--cover{
    transform:translate(-3px,3px) rotate(-2.7deg);
    box-shadow:var(--lift-1-hi);
  }

  /* De stappen blijven informatie. Een vlakbrede lichtreactie, de dunne
     bovenrand en een kleine typografische reactie geven feedback zonder
     klikbelofte. */
  .home .steps li::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    opacity:0;
    background:
      linear-gradient(90deg, var(--brass), rgba(63,169,232,.58)) top left / 100% 2px no-repeat,
      linear-gradient(180deg, rgba(201,164,104,.115), rgba(243,240,231,.038) 55%, transparent);
    transition:opacity .32s var(--ease-act);
    pointer-events:none;
  }
  .home .steps li:hover::after{ opacity:1; }
  .home .steps li h3{
    transition:color .26s var(--ease-act), transform .26s var(--ease-act);
  }
  .home .steps li:hover::before{ color:var(--cream); }
  .home .steps li:hover h3{ color:#fff; transform:translateY(-1px); }

  /* De foto reageert als compleet gemonteerd vlak; de uitsnede ademt minimaal mee. */
  .home .ingangen-figure[data-reveal].is-in:hover{
    transform:translateY(-2px);
    box-shadow:var(--lift-2-hi);
  }

  .home .founder-photo[data-reveal].is-in:hover .photo{
    box-shadow:var(--lift-2-hi);
  }

  /* Aanpak: het kader lift en de foto ademt maximaal 0,8 procent mee. */
  .page-aanpak .focus-media.is-in:hover .photo img{ transform:scale(1.008); }
}

@media (max-width:900px){
  footer .footer-bottom a,
  footer .footer-bottom > .footer-legal-link{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}

@media (prefers-reduced-motion:reduce){
  .home .kc-spread-link .kc-sheet,
  .home .kc-spread-link .kc-spread,
  .home .steps li::after,
  .home .steps li h3,
  .home .founder-photo .photo,
  .page-aanpak .focus-media .photo img{
    transition:none !important;
  }
  .home .kc-spread-link:active .kc-spread,
  .home .steps li:hover h3,
  .home .ingangen-figure[data-reveal].is-in:hover,
  .page-aanpak .focus-media .photo img,
  .page-aanpak .focus-media.is-in:hover .photo img{
    transform:none !important;
  }
  .home .kc-spread-link:is(:hover,:focus-visible) .kc-sheet--summary{ transform:rotate(2.2deg) !important; }
  .home .kc-spread-link:is(:hover,:focus-visible) .kc-sheet--choices{ transform:rotate(4deg) !important; }
  .home .kc-spread-link:is(:hover,:focus-visible) .kc-sheet--cover{ transform:rotate(-2.2deg) !important; }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .home .kc-spread-link:is(:hover,:focus-visible) .kc-sheet--summary{ transform:rotate(1.2deg) !important; }
  .home .kc-spread-link:is(:hover,:focus-visible) .kc-sheet--choices{ transform:rotate(2deg) !important; }
  .home .kc-spread-link:is(:hover,:focus-visible) .kc-sheet--cover{ transform:rotate(-1.2deg) !important; }
}

/* ============================================================
   HOMEPAGE HERO LOODSBOOT · 2026-09-04
   Gerichte heropening door Tim. Alleen beeld, crop en eyebrow.
   ============================================================ */

.home .hero{
  isolation:isolate;
  min-height:clamp(700px,84svh,820px);
  padding-bottom:0;
  background:#041329;
}
.home .hero-bg{
  z-index:0;
  background:linear-gradient(180deg,#06152f 0%,#041329 58%,#030d20 100%);
}
.home .hero-grid{
  position:static;
  grid-template-columns:minmax(0,640px);
  align-items:center;
  min-height:clamp(560px,68svh,650px);
  width:var(--wrap);
}
.home .hero-grid > div:first-child{
  position:relative;
  z-index:3;
  align-self:center;
  max-width:640px;
  padding-bottom:clamp(2rem,4vh,3.4rem);
}
.home .hero .lead{
  max-width:36rem;
}
.home .hero-note{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  align-items:stretch;
  width:100%;
  max-width:640px;
  margin-top:1.9rem;
  padding-top:1.35rem;
}
.home .hero-proof-item{
  min-width:0;
  position:relative;
  align-self:stretch;
  padding:.1rem 1.25rem .1rem 1rem;
  border-right:0;
  border-left:0;
  color:var(--cream);
  font-size:.84rem;
  font-weight:600;
  line-height:1.46;
}
.home .hero-proof-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  height:auto;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(201,164,104,.9),rgba(201,164,104,.46));
  box-shadow:0 0 10px rgba(201,164,104,.1);
}
.home .hero-visual{
  position:absolute;
  inset:0 0 0 auto;
  z-index:1;
  display:block;
  width:61vw;
  max-width:none;
  height:100%;
  min-height:0;
  margin:0;
  overflow:hidden;
  pointer-events:none;
}
.home .hero-photo{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.home .hero-photo::before,
.home .hero-photo::after{
  content:none;
  display:none;
}
.home .hero-photo img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:72% center;
  background:transparent;
  filter:none;
  transform:none;
}
.home .hero-visual::before,
.home .hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.home .hero-visual::before{
  background:
    radial-gradient(ellipse 32% 34% at 90% 10%,rgba(1,10,27,.42) 0%,rgba(1,10,27,.18) 48%,transparent 82%),
    linear-gradient(180deg,rgba(2,11,29,.16) 0%,rgba(2,11,29,.08) 48%,rgba(2,11,29,.28) 100%);
}
.home .hero-visual::after{
  background:linear-gradient(90deg,#041329 0%,#041329 18%,rgba(4,19,41,.93) 31%,rgba(4,19,41,.6) 51%,rgba(4,19,41,.16) 77%,transparent 100%);
}

.home .ingangen-explain strong{
  display:block;
  margin-bottom:.55rem;
  color:var(--cream);
  font-size:1.02rem;
  font-weight:650;
}

@media (min-width:981px) and (max-height:680px){
  .home .hero{
    min-height:575px;
    padding-top:6.5rem;
  }
  .home .hero-grid{ min-height:460px; }
}

@media (min-width:900px) and (max-width:1120px){
  .home .hero-visual{ width:64vw; }
  .home .hero-photo img{ object-position:78% center; }
  .home .hero-visual::after{
    background:linear-gradient(90deg,#041329 0%,#041329 25%,rgba(4,19,41,.94) 39%,rgba(4,19,41,.62) 58%,rgba(4,19,41,.14) 82%,transparent 100%);
  }
}

@media (max-width:899px){
  .home .hero{
    min-height:100svh;
    background:#041329;
  }
  .home .hero-grid{
    grid-template-columns:1fr;
    min-height:0;
  }
  .home .hero-grid > div:first-child{
    max-width:none;
    padding-bottom:0;
  }
  .home .hero-visual{
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
  }
  .home .hero-photo img{
    object-position:90% center;
  }
  .home .hero-visual::before{
    background:linear-gradient(180deg,rgba(2,11,29,.26) 0%,rgba(2,11,29,.48) 43%,rgba(2,11,29,.72) 76%,rgba(4,19,41,.82) 100%);
  }
  .home .hero-visual::after{
    background:linear-gradient(90deg,rgba(4,19,41,.74) 0%,rgba(4,19,41,.46) 52%,rgba(4,19,41,.16) 100%);
  }
}

@media (max-width:760px){
  .home .hero{
    min-height:auto;
    padding-top:6.25rem;
    padding-bottom:2rem;
  }
  .home .hero-grid > div:first-child{
    display:block;
  }
  .home .hero h1{
    margin:.72rem 0 .82rem;
  }
  .home .hero .lead{
    font-size:1rem;
    line-height:1.47;
  }
  .home .hero-cta{
    gap:.62rem;
    margin-top:1.15rem;
  }
  .home .hero-cta .btn{
    min-height:44px;
    padding-block:.72rem;
  }
  .home .hero-note{
    grid-template-columns:1fr;
    grid-template-rows:repeat(3,minmax(0,1fr));
    gap:.42rem;
    margin-top:.9rem;
    padding-top:.72rem;
  }
  .home .hero-proof-item{
    padding:.08rem 0 .42rem 1rem;
    border-left:0;
    border-bottom:0;
    font-size:.82rem;
  }
  .home .hero-proof-item::before{ bottom:.36rem; }
  .home .hero-proof-item:last-child{ padding-bottom:.42rem; }
}

@media (prefers-reduced-motion:reduce){
  .home .hero-photo img{
    animation:none !important;
    transition:none !important;
  }
}

/* ============================================================
   VISUELE VERFIJNING · 2026-09-06
   Alleen opmaak en timing. Geen nieuw effecttype, geen structuur,
   geen content, geen kleur. Elk bestaand effect blijft staan.

   1. Aanraking gaat sneller dan loslaten. Een knop die even snel
      terugvalt als hij reageert voelt als een schakelaar; een knop
      die snel aankomt en rustig terugvalt voelt als een object.
   2. De reveal-duur volgt het gewicht van het element. Koppen zijn
      licht en komen in .34s, beeld en kaarten houden .46s. Alles
      blijft binnen de bestaande bovengrens.
   3. Koppen breken evenwichtig, alinea's houden geen los woord over.
   ============================================================ */

/* 1. Snel aan, rustig uit. Alleen bij muisbesturing. */
@media (hover:hover) and (pointer:fine){
  .btn:hover,
  .btn:hover svg,
  .card-link:hover, .textlink:hover,
  .card-link:hover svg, .textlink:hover svg,
  .card:hover .card-link svg,
  .card-link:hover::after, .textlink:hover::after,
  .card:hover .card-link::after,
  .nav-links a:not(.btn):hover,
  p a:not(.btn):not(.card-link):not(.textlink):hover{
    transition-duration:.16s;
  }
  .home .card:hover .photo{
    transition:transform .12s var(--ease-act), box-shadow .16s var(--ease-act);
  }
  .home .card:hover .photo img,
  .home .ingangen-figure:hover img,
  .home .founder-photo[data-reveal].is-in:hover .photo img,
  .home .kc-spread[data-reveal].is-in:hover,
  .page-aanpak .focus-media.is-in:hover .photo img,
  .founder--story .founder-photo.is-in:hover .photo img,
  .page-kansencheck .kc-spread--product.is-in:hover{
    transition-duration:.2s;
  }
  /* Indrukken blijft het snelst van alles. */
  .btn:active, .btn-primary:active, .btn-ghost:active{
    transition-duration:var(--t-active);
  }
}

/* 2. Licht komt eerder tot rust dan zwaar. */
.home .hero-grid h1[data-reveal],
.home .hero-grid .hero-cta[data-reveal],
.home .hero-grid .hero-note[data-reveal],
.home section h2[data-reveal],
.home section h3[data-reveal],
body:not(.home) main h1[data-reveal],
body:not(.home) main h2[data-reveal],
body:not(.home) main h3[data-reveal],
body:not(.home) .page-hero h1[data-reveal]{
  transition-duration:.34s;
}

/* 2b. Herstel: de drie kaarten hadden hun reveal verloren.
   Een latere regel overschreef de volledige transition met alleen
   background-color, waardoor de kaarten hard in beeld sprongen terwijl
   de rest van de pagina invloeit. De vertragingen die voor hun
   cascade klaarstonden deden daardoor niets. Zelfde effect als overal,
   geen nieuw effect. */
.home .cards-3 .card[data-reveal]{
  transition:opacity .46s var(--ease-act),
             transform .46s var(--ease-act),
             background-color .35s var(--ease-act);
}

/* 3. Typografische afwerking. Geen beweging, puur zetwerk. */
/* h2 krijgt bewust geen balance: die koppen zijn lang genoeg dat balanceren
   een lidwoord aan het regeleinde kan achterlaten. Pretty haalt daar alleen
   de wees-regel weg. */
h1, h3, h4{ text-wrap:balance; }
h2, p, li, figcaption, .eyebrow, .lead{ text-wrap:pretty; }

/* ============================================================
   UX-AFWERKING · 2026-09-06
   Uitkomsten van de vijf doorlopen plus de mechanische controle.
   Alleen opmaak. Geen nieuwe stijlrichting, geen nieuw effecttype.
   ============================================================ */

/* 1. Regelbreedte. Lopende tekst direct in .wrap-n kreeg 780 px en daarmee
   ongeveer 85 tot 97 tekens per regel, terwijl de rest van de site op 66ch
   staat. Nu volgt deze tekst dezelfde maat als al het andere. */
.wrap-n > p{ max-width:min(780px, 66ch); }

/* 2. Het hamburgermenu was 37 bij 39 pixels. Onzichtbare marge erbij tot 44,
   de streepjes zelf veranderen niet. */
.nav-toggle{ position:relative; }
.nav-toggle::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:44px; height:44px;
  transform:translate(-50%,-50%);
}

/* 3. Footerlinks waren 32 px hoog. Op een telefoon net te krap om zonder
   kijken te raken. */
@media (max-width:760px){
  footer .footer-col ul a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  footer .footer-col ul{ gap:.15rem; }
}

/* 4. Contactpagina: de sprongmarge was groter dan de afstand tot de bovenkant,
   waardoor een link naar #richtinggesprek op de pagina zelf niets deed. */
.page-contact .contact-route{ scroll-margin-top:clamp(6rem,14vh,8.5rem); }

/* 5. Inzichten liep uit de pas met de rest. De rij had een derde kolom waarin
   'Lees verder' helemaal rechts belandde, met een leeg gat van vierhonderd
   pixels ertussen. Nergens anders op de site staat een link zo ver van zijn
   tekst. De link zakt nu onder de tekst, links uitgelijnd, precies zoals
   elke andere leeslink. */
.insight-row{ grid-template-columns:4rem minmax(0,1fr); }
.insight-arrow{
  grid-column:2;
  justify-self:start;
  align-self:start;
  margin-top:1.05rem;
}

/* 6. Het vangnet bij de mailknoppen op de contactpagina. Verschijnt pas als
   iemand op de knop drukt, dus in rust is er niets te zien. */
.mail-hulp{
  margin-top:.9rem;
  padding-top:.9rem;
  border-top:1px solid var(--line-soft);
  font-size:.86rem;
  color:var(--muted);
}
.mail-hulp p{ margin:0 0 .5rem; max-width:44ch; }
.mail-hulp-knop{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-body); font-size:.86rem; font-weight:600;
  color:var(--cream); border-bottom:1px solid var(--act-key);
  transition:color .25s var(--ease-act), border-color .25s var(--ease-act);
}
.mail-hulp-knop:hover{ color:#FFFCF4; border-bottom-color:var(--act-key-hi); }
.mail-hulp-knop:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* 7. De bladerinstructie boven het rapport. De opmaak stond al klaar; alleen
   de regel voor de omvang had nog geen kleur. */
.boek-omvang{ color:var(--boek-tekst-stil, inherit); }

/* 8. Twee losstaande navigatielinks waren 23 en 27 pixels hoog. Dat zijn geen
   links in een zin maar zelfstandige knoppen, dus die mogen op een telefoon
   niet kleiner zijn dan een vingertop. */
.article-back, .insight-arrow{
  display:inline-flex; align-items:center; min-height:44px;
}
.insight-arrow{ margin-top:.55rem; }

/* 9. De teruglink op de rapportpagina staat voor een eyebrow in plaats van
   voor een bloklabel, en liep daardoor met de eyebrow op een regel. */
.page-boek .page-hero .article-back{
  display:flex;
  width:max-content;
  margin-bottom:1.15rem;
}


/* Gerichte afwerking na telefooncontrole: licht, vloeiende stappen en merkslot. */
footer .footer-col h3{ color:var(--brass); }
@media (min-width:900px){
  .home .hero-visual::after{
    background:linear-gradient(90deg,#041329 0%,rgba(4,19,41,.96) 12%,rgba(4,19,41,.78) 28%,rgba(4,19,41,.38) 48%,rgba(4,19,41,.08) 74%,transparent 100%);
  }
}
@media (max-width:899px){
  .home .hero-visual::before{
    background:linear-gradient(180deg,rgba(2,11,29,.18) 0%,rgba(2,11,29,.40) 43%,rgba(2,11,29,.61) 76%,rgba(4,19,41,.82) 100%);
  }
  .home .hero-visual::after{
    background:linear-gradient(90deg,rgba(4,19,41,.70) 0%,rgba(4,19,41,.38) 52%,rgba(4,19,41,.10) 100%);
  }
}
@media (max-width:760px), (pointer:coarse){
  .home .steps li[data-reveal]::before,
  .home .steps li[data-reveal] > div{
    clip-path:none;
    transition:opacity .46s var(--ease-act), transform .46s var(--ease-act), color .3s var(--ease-act);
    transition-delay:var(--d,0s);
  }
}

/* Het loodsbootje vangt meer licht; de goedgekeurde linkerschaduw blijft staan. */
@media (min-width:900px){
  .home .hero-visual::before,
  .home .hero-visual::after{
    -webkit-mask-image:radial-gradient(ellipse 11% 15% at 76% 75%,rgba(0,0,0,.08) 0%,rgba(0,0,0,.25) 32%,#000 100%);
    mask-image:radial-gradient(ellipse 11% 15% at 76% 75%,rgba(0,0,0,.08) 0%,rgba(0,0,0,.25) 32%,#000 100%);
  }
}

/* Juridische leespagina's volgen dezelfde rustige maat en merkafwerking. */
.page-legal .page-hero--legal{padding:clamp(7rem,11vw,9rem) 0 2.4rem;background:var(--bg)}
.page-legal .page-hero--legal .hero-bg{display:none}
.page-legal .page-hero--legal > .wrap,
.page-legal .legal-layout{width:min(760px,90vw);margin-inline:auto}
.page-legal .page-hero--legal h1{margin:.85rem 0 1rem;overflow-wrap:anywhere}
.page-legal .page-hero--legal .lead{font-size:1.06rem;line-height:1.65;max-width:60ch}
.page-legal .legal-meta{margin:1.15rem 0 0;font-size:.82rem;color:var(--body-dim)}
.page-legal .legal-section{padding:0 0 clamp(3.9rem,6.2vw,6.2rem)}
.page-legal .legal-layout{display:block}
.page-legal .legal-content{font-size:.96rem;line-height:1.68;color:var(--body);overflow-wrap:anywhere}
.page-legal .legal-content p,.page-legal .legal-content ul{max-width:66ch;margin-bottom:1.1rem}
.page-legal .legal-content h2{margin:2.25rem 0 .9rem;padding-top:2.1rem;font-size:clamp(1.5rem,2.5vw,1.9rem);line-height:1.2;color:var(--cream);border-color:var(--line-soft)}
.page-legal .legal-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
.page-legal .legal-content h3{margin:1.65rem 0 .65rem;font-size:1.22rem;line-height:1.25;color:var(--brass)}
.page-legal .cookie-declaration{min-height:0;padding:1.25rem 0;margin:1.25rem 0 2rem;border:0;border-block:1px solid var(--line-soft);border-radius:0;background:none;box-shadow:none}
.page-legal .cookie-declaration p:last-child{margin-bottom:0}
@media(max-width:760px){
 .page-legal .page-hero--legal{padding-top:6.6rem;padding-bottom:2rem}
 .page-legal .page-hero--legal h1{font-size:clamp(2.05rem,8.2vw,2.45rem)}
 .page-legal .page-hero--legal .lead{font-size:1rem}
}

/* Tim approved 2026-09-13: sharp hero, subtle pilot-boat lighting. */
@media (min-width:900px){
  .home .hero-visual::before{
    background:
      radial-gradient(ellipse 32% 34% at 90% 10%,rgba(1,10,27,.62) 0%,rgba(1,10,27,.30) 48%,transparent 82%),
      linear-gradient(180deg,rgba(2,11,29,.20) 0%,rgba(2,11,29,.14) 48%,rgba(2,11,29,.28) 100%);
  }
  .home .hero-visual::before,
  .home .hero-visual::after{
    -webkit-mask-image:radial-gradient(ellipse 12.5% 17% at 76% 75%,transparent 0%,rgba(0,0,0,.06) 35%,#000 100%);
    mask-image:radial-gradient(ellipse 12.5% 17% at 76% 75%,transparent 0%,rgba(0,0,0,.06) 35%,#000 100%);
  }
}
/* The photo and its overlays fade into the actual hero background. */
@media (min-width:900px){
  .home .hero-visual{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15625) 7.5%,rgba(0,0,0,.5) 15%,rgba(0,0,0,.84375) 22.5%,#000 30%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15625) 7.5%,rgba(0,0,0,.5) 15%,rgba(0,0,0,.84375) 22.5%,#000 30%);
  }
}

/* Secondary phone route in the Kansencheck request block. */
.page-contact .contact-phone-option{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 .45rem;
  margin:.4rem 0 0; color:var(--body-dim); font-size:.8rem; line-height:1.55;
}
.page-contact .contact-phone-option a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--cream); white-space:nowrap; border-bottom:0; padding-bottom:0;
  text-decoration:underline; text-decoration-color:var(--brass);
  text-underline-offset:.22em; text-decoration-thickness:1px;
}



/* Inzichten: text first, restrained image sizes within a stable editorial order. */
.page-inzichten .insight-editorial{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,5vw,4rem);row-gap:clamp(2.8rem,5vw,4rem);}
.page-inzichten .insight-entry{min-width:0;padding:0 0 2rem;border-bottom:1px solid var(--line);}
.page-inzichten .insight-entry-link{display:flex;flex-direction:column;height:100%;color:var(--cream);text-decoration:none;border-radius:3px;}
.page-inzichten .insight-entry-media{overflow:hidden;border-radius:3px;aspect-ratio:3 / 2;width:min(100%,320px);margin-bottom:1.25rem;position:relative;isolation:isolate;box-shadow:var(--lift-1);transition:box-shadow .3s var(--ease);}
.page-inzichten .insight-entry-media img{display:block;width:100%;height:100%;object-fit:cover;}
.page-inzichten .insight-entry-media::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:var(--lift-ring-hi);}
.page-inzichten .insight-entry-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;}
.page-inzichten .insight-entry .kicker{display:block;margin-bottom:.65rem;color:var(--azure);font-size:.72rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase;}
.page-inzichten .insight-entry h2{margin:0 0 .8rem;font-size:clamp(1.55rem,2.3vw,2.15rem);line-height:1.16;color:var(--cream);transition:color .3s var(--ease);}
.page-inzichten .insight-entry p{margin:0 0 1.25rem;max-width:56ch;color:var(--text);font-size:.96rem;line-height:1.68;}
.page-inzichten .insight-entry-cta{display:inline-flex;align-items:center;gap:.6rem;margin-top:auto;min-height:2rem;color:var(--cream);font-size:.86rem;font-weight:650;}
.page-inzichten .insight-entry-cta span{color:var(--brass);}
.page-inzichten .insight-entry-link:focus-visible{outline:2px solid var(--azure);outline-offset:7px;}
.page-inzichten .insight-entry--lead{grid-column:1 / -1;padding-bottom:clamp(2.8rem,5vw,4rem);}
.page-inzichten .insight-entry--lead .insight-entry-link{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center;}
.page-inzichten .insight-entry--lead .insight-entry-media{margin:0;width:100%;}
.page-inzichten .insight-entry--lead h2{font-size:clamp(2rem,3vw,2.8rem);}
.page-inzichten .insight-entry--lead .insight-entry-cta{margin-top:.3rem;}
@media(hover:hover) and (pointer:fine){
  .page-inzichten .insight-entry-link:hover .insight-entry-media{box-shadow:var(--lift-1-hi);transition-duration:.16s;}
  .page-inzichten .insight-entry-link:hover h2{color:var(--azure-hi);transition-duration:.16s;}
  .page-inzichten .insight-entry-link:hover .insight-entry-cta{text-decoration:underline;text-underline-offset:4px;}
}
@media(max-width:760px){
  .page-inzichten .insight-editorial{grid-template-columns:minmax(0,1fr);row-gap:2.2rem;}
  .page-inzichten .insight-entry{padding-bottom:2.2rem;}
  .page-inzichten .insight-entry--lead .insight-entry-link{display:flex;gap:0;align-items:stretch;}
  .page-inzichten .insight-entry-media,.page-inzichten .insight-entry--lead .insight-entry-media{width:min(100%,320px);max-width:100%;margin-bottom:1.2rem;}
  .page-inzichten .insight-entry h2,.page-inzichten .insight-entry--lead h2{font-size:1.65rem;}
}

/* Contact actions share a row, including when one mail fallback is open. */
.page-contact .contact-route--featured::before{content:none;}
.page-contact .contact-route-end .actions{margin-top:0;margin-bottom:0;}
.page-contact .contact-route-end{min-width:0;}
@media(min-width:901px){
  .page-contact .contact-route{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0;}
}

@media(prefers-reduced-motion:reduce){.page-inzichten .insight-entry-media{transition:none;}}