/* Homepage MoreDone (29 okt 2026), bovenop homepage.css en compositie.css (de homepage van Codex, ronde 3 en 4).
   Hier: de rastervloer, het grote tandwiel, de bronnen, de AI-toepassing, het manifest en het slot. Alles blijft licht:
   geen donkere vlakken; alleen onderaan loopt de pagina via luchtblauw over in de zwarte footer. */

/* Huisstijl volgens de MoreDone-stijlgids (v1): luchtblauw #4DAEDC, zwart #111111 en wit, één letter (Schibsted
   Grotesk), vlakke knoppen zonder rand of schaduw, hoeken 10, 12 of 16 px, geen blauwe tekst op wit (te weinig contrast).
   Bewuste uitzondering: de animatie in de hero houdt diepte, schaduw en licht (besluit David, 29 okt 2026).
   Studio-look (besluit David, 2 nov 2026, naar een beeld van Codex): de hero is een lichte studio met het 3D-tandwiel in het
   midden op een spiegelende vloer, koppen en tekst zwart, dun (300) en vet (700), geen markeerblokken en geen ruitjesraster.
   Alleen de drie merkkleuren, geen accentkleur: de hoofdknop is luchtblauw met zwarte tekst (7,6:1; wit zou 2,5:1 halen),
   de knop in de menubalk zwart. Logo: MOREDONE met het tweedelige tandwiel als O (logo-moredone*.svg). */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/schibsted-grotesk-latin.woff2') format('woff2')}
:root{--ink:#111111;--ink-soft:#111111;--accent:#111111;--sky:#4DAEDC;--ice:#FFFFFF;--edge:#11111117;--navy:#111111;--glans:1}
html,body{background:#fff}
html{scrollbar-color:#111111 #FFFFFF}
body,h1,h2,h3,h4,.eyebrow,.app-kolom h4{font-family:'Schibsted Grotesk','Segoe UI',sans-serif}
.spatial-hero .hero-copy h1{font-weight:800;letter-spacing:-.055em;line-height:.98}
/* de kop in twee gewichten: de eerste regel dun, de tweede (de belofte) vet (--navy is zwart, zie :root) */
.spatial-hero .hero-second{display:inline;color:var(--navy);font-weight:700;line-height:1.16}
@media(min-width:1000px){.spatial-hero .hero-second{display:block}}
.spatial-hero .hero-first{margin-bottom:.06em;font-weight:300;color:var(--navy)}
.spatial-hero .eyebrow{font:600 16px/1.4 'Schibsted Grotesk',sans-serif;letter-spacing:0;text-transform:none;color:var(--navy)}
.spatial-hero .hero-description{font-size:clamp(18px,1.45vw,21px);font-weight:500;line-height:1.5;color:var(--navy);margin-top:30px}
/* knoppen: vlak, zwart met wit, hoeken 12 */
.button{border:0;border-radius:12px;background:#111111;color:#FFFFFF;font-weight:600;font-size:18px;letter-spacing:0;min-height:0;padding:18px 28px;gap:16px;box-shadow:none}
.button:hover,.button:active{background:#111111;transform:none;box-shadow:none}
/* geen overgang op de positie: die vecht met het binnenkomen, waardoor de knop blijft hangen en dan doorschiet */
.spatial-hero .hero-cta{transition:background-color .2s}
.spatial-hero .hero-cta,.spatial-hero .hero-cta:hover,.spatial-hero .hero-cta:active{box-shadow:none;background:var(--sky);color:#111111;border-radius:999px;padding:18px 34px}
/* navigatiebalk: alleen het logo en één knop, op één lijn met de kop eronder; bij scrollen wit en licht doorschijnend */
.site-header{height:80px;padding:0 var(--gutter);border-bottom:0}
.site-header .brand img{display:block;width:196px;height:auto}
.site-header .nav-cta{background:#111111;color:#FFFFFF;border:0;border-radius:12px;font-size:15px;font-weight:600;min-height:0;padding:12px 18px;gap:12px}
.site-header .nav-cta svg{width:16px;height:16px}
.site-header .nav-cta:hover,.site-header .nav-cta:active{background:#111111}
.site-header.scrolled{background:#ffffffeb;border-color:transparent;box-shadow:none}
/* Menubalk (besluit David, 2 nov 2026, schets N5): bovenaan doorzichtig over de studio, met een haarlijn binnen de
   marges; bij scrollen de bestaande witte, vervaagde balk. Links: Aanpak, Waarom, Over; een blauw stipje (aria-current,
   gezet door home.js) markeert het deel waar je bent, verder blijft blauw een accent. Onder 900 px alleen logo (en geen
   links), zoals de knop daar al verborgen is. */
.site-header:not(.scrolled){background:transparent}
.site-header::after{content:'';position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:#11111117;pointer-events:none}
.site-header.scrolled::after{left:0;right:0}
.nav-rechts{display:flex;align-items:center;gap:32px}
.site-header .hoofdnav{display:flex;gap:30px}
.site-header .hoofdnav a{position:relative;font:500 15px/1 'Schibsted Grotesk',sans-serif;color:#111111;text-decoration:none}
.site-header .hoofdnav a::before{content:'';position:absolute;left:-12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--sky);opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s}
.site-header .hoofdnav a[aria-current="location"]::before{opacity:1;transform:none}
@media(max-width:900px){.site-header .hoofdnav{display:none}}
@media(max-width:600px){.site-header{height:68px}.site-header .brand img{width:160px}}
/* voet: zwart, witte tekst en links; het logo in de witte versie (MORE wit, DONE blauw) */
.professional-footer{background:#111111;color:#FFFFFF}
.professional-footer a{color:#FFFFFF}
.professional-footer .footer-top img{width:190px;height:auto}
.professional-footer .footer-bottom{border-top:0;color:#FFFFFF;font-size:14px}
.professional-footer .footer-bottom nav a{color:#FFFFFF}


.gear-object,.bron-tegel,.ai-app{will-change:transform}
/* Navigatiebalk: licht en rustig. Bij scrollen wit doorschijnend met een vage onscherpte, zonder blauw vlak,
   zodat hij niet als een losse band boven de witte toepassing en de secties eronder hangt. */
.site-header.scrolled{background:#ffffffd9;border-color:#1111110f;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
/* Zacht scrollen laat ScrollTrigger verkeerde beginposities meten; hier dus gewoon scrollen. */
html{scroll-behavior:auto}

/* Hero: het tandwiel in het midden van de studio, de kop gecentreerd eronder, dan de knop. Labeltje en onderkop alleen op
   telefoon en tablet. De bronnen en de AI-toepassing staan niet in de rustige hero; ze verschijnen alleen in de scrollreis
   (home.js zet dan .reis-aan op <html>). */
.spatial-hero{display:flex;flex-direction:column;justify-content:flex-end;min-height:720px;padding-top:84px;padding-bottom:clamp(32px,5vh,64px)}
.spatial-hero .hero-copy{text-align:center;width:auto;max-width:1180px;margin:0 auto;padding-inline:0}
.spatial-hero .hero-description{margin-left:0;max-width:500px}
.spatial-hero .eyebrow,.spatial-hero .hero-description{display:none}
.spatial-hero .hero-cta{margin-top:30px}
.spatial-hero .hero-first,.spatial-hero .hero-second{text-wrap:balance}
.spatial-hero .hero-description br{display:none}
@media(min-width:601px){
 .spatial-hero .hero-first,.spatial-hero .hero-second{font-size:clamp(48px,5.4vw,100px);letter-spacing:-.05em}
}

/* Achtergrond: een zachte rastervloer in perspectief waar het tandwiel op staat. Bij het scrollen kantelt de vloer omhoog
   tot hij de achterwand is waartegen alles gebeurt, en als de toepassing er staat vervagen raster en achtergrond naar wit,
   zodat de hero naadloos overgaat in de witte sectie eronder. Vloer en wit zijn eigen elementen zonder kinderen:
   zo raakt hun beweging alleen henzelf en hoeft de browser de rest van de hero niet opnieuw door te rekenen. */
.spatial-hero{background:#FFFFFF;--top:80px;--h:calc(var(--top) + (100% - var(--top)) * .63)}
/* De studio (.studio in index.html), onder de menubalk: een witte spot achter het wiel, luchtblauwe randen, en vanaf de
   horizon (--h, de onderkant van het wiel) een vloer met een zachte lichtstreep. home.js laat hem in het eerste stukje van
   de scrollreis wegvloeien, tegelijk met de herotekst; daarna is de reis zoals hij was. */
.spatial-hero .studio{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
 radial-gradient(ellipse 30% 40% at 50% calc(var(--top) + (100% - var(--top)) * .4),#FFFFFF 0%,#FFFFFFe6 35%,#FFFFFF00 72%),
 radial-gradient(ellipse 46% 12% at 50% var(--h),#FFFFFFd9 0%,#FFFFFF00 100%),
 linear-gradient(180deg,#FFFFFF00 0%,#FFFFFF00 calc(var(--h) - 7%),#FFFFFF73 var(--h),#FFFFFF33 calc(var(--h) + 18%),#FFFFFF00 100%),
 radial-gradient(ellipse 72% 90% at 50% calc(var(--top) + (100% - var(--top)) * .4),#FFFFFF 0%,#E3F1FB 38%,#A6D1F0 76%,#7DB8E6 100%)}
.spatial-hero::before{content:none}
.spatial-hero .vloer{position:absolute;left:-60%;right:-60%;bottom:0;height:115%;z-index:-1;pointer-events:none;transform:perspective(900px) rotateX(72deg);transform-origin:50% 100%;will-change:transform;-webkit-mask-image:linear-gradient(to top,#000 0%,#000 50%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,#000 50%,transparent 100%)}
.spatial-hero .wit{position:absolute;inset:0;z-index:-2;background:#fff;opacity:0;pointer-events:none}
/* Licht en diepte als de vloer de muur wordt: een zachte lichtplek achter het tandwiel en iets donkerdere randen. */
.spatial-hero .licht{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(ellipse 34% 42% at 50% 45%,#ffffffd9 0%,#ffffff66 45%,#ffffff00 75%),radial-gradient(ellipse 85% 85% at 50% 48%,#dbe8f000 55%,#cfdfea8c 100%)}

/* Het tandwiel met dikte (satijn): 24 dunne lagen die naar achteren donkerder worden, een fijne lichte rand langs
   de tanden, een mat verloop op de voorkant, een glans die meeglijdt als het draait en een zachte schaduw eronder. */
/* breedte afgerond op een even aantal pixels: bij een gebroken breedte (bijv. 388,8 px) leest GSAP de centrering
   (translate -50%) als vaste pixels in en zet de scrollreis het wiel een half wiel naast het midden */
.gear-object{position:absolute;left:50%;top:41%;width:390px;width:round(down,min(27vw,44vh,520px),2px);aspect-ratio:1;translate:-50% -50%;perspective:1600px;z-index:3;pointer-events:none}
/* het wiel staat op de vloer: contactschaduw en een spiegeling (box-reflect kennen Chromium en Safari; elders zonder).
   --glans gaat in het eerste stukje van de reis van 1 naar 0 (home.js), zodat de spiegeling niet mee de reis in gaat. */
.gear-object .tandwiel-3d{-webkit-box-reflect:below -14% linear-gradient(transparent 82%,rgb(255 255 255 / calc(.3 * var(--glans))))}
.gear-object img.tandwiel-foto{object-fit:contain}
.gear-object .grondschaduw{position:absolute;left:16%;right:16%;bottom:-3%;height:8%;border-radius:50%;background:radial-gradient(closest-side,#00143059,#00143000);filter:blur(4px);pointer-events:none}
.gear-solid{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(16deg) rotateY(-28deg) rotateZ(-14deg)}
.gear-solid i,.gear-solid b,.gear-solid em,.gear-solid s,.gear-solid u{position:absolute;inset:0;-webkit-mask:url('tandwiel.svg') center/contain no-repeat;mask:url('tandwiel.svg') center/contain no-repeat}
.gear-solid i{background:hsl(201 62% calc(46% - var(--d)*.65%));transform:translateZ(calc(var(--d)*-1.3px))}
.gear-solid em{background:#D7F0FA;transform:translateZ(1px)}
/* schaduw ver achter het tandwiel: valt op de muur zodra de vloer rechtop staat, verschuift mee met de diepte.
   Een vooraf vervaagde afbeelding (tandwiel-schaduw.webp) in plaats van een CSS-filter: dat houdt het draaien soepel. */
.gear-solid u{-webkit-mask:none;mask:none;background:url('tandwiel-schaduw.webp') center/contain no-repeat;opacity:0;transform:translateZ(-140px) translate(2%,5%) scale(1.46)}
.gear-solid b{background:linear-gradient(135deg,#9ED6EF 0%,#5CB6E1 38%,#3E9FD3 70%,#2F8CC0 100%);transform:translateZ(1.5px) scale(.982)}
.gear-solid s{background:linear-gradient(115deg,transparent 38%,#ffffff70 48%,#ffffff20 54%,transparent 62%) 120% 0/260% 100% no-repeat;transform:translateZ(2px) scale(.982)}
/* Het 3D-tandwiel (tandwiel-3d.js) tekent op een doek van 120% over het tandwielvlak; dan verdwijnen de CSS-lagen,
   alleen de schaduw op de muur (u) blijft van de CSS-versie. */
.gear-object .tandwiel-3d{position:absolute;inset:-10%;width:120%;height:120%;z-index:2;pointer-events:none}
.gear-solid i,.gear-solid em,.gear-solid b,.gear-solid s{visibility:hidden}

/* Verhaalregels in de scrollreis: onder het tandwiel tijdens de pauze (v1) en boven de toepassing (v3). */
.verhaal{display:none}
.reis-aan .verhaal{display:block}
/* duidelijk leesbaar als echte kop: groot, zonder vlak eromheen, met een zachte lichtplek erachter waarin het raster en de vensters vervagen */
.verhaal p{position:absolute;left:50%;translate:-50% 0;margin:0;opacity:0;z-index:8;white-space:nowrap;text-align:center;font-size:clamp(34px,3.3vw,54px);font-weight:300;letter-spacing:-.05em;line-height:1.12;color:#111111;pointer-events:none}
.verhaal p::before{content:'';position:absolute;inset:-70% -18%;z-index:-1;background:radial-gradient(closest-side,#f6fafdf7 0%,#f6fafde0 50%,#f6fafd00 100%)}
.verhaal p span{color:#111111;font-weight:700}
.verhaal .v3{top:calc(56% - min(270px,31vh) - 90px)}
/* v1 in twee regels direct onder het tandwiel (kern op 45%, tandstraal 168 px of 19,6% van de hoogte), waar je al kijkt */
.verhaal .v1{top:calc(45% + min(168px,19.6%) + 34px);white-space:normal;width:max-content;max-width:8em}
.verhaal p span{display:inline-block}
.reis-aan .gear-object{z-index:7}

/* Jouw bronnen als tegels met logo en naam, in een ring rond het tandwiel. home.js zet per tegel de afstand (--r),
   de achterstand in de spiraal (--lag) en de schaal (--s), en draait de ring mee met het tandwiel (--draai). */
.bron-ring{display:none;position:absolute;left:50%;top:45%;width:0;height:0;z-index:4;pointer-events:none;--draai:0deg}
.reis-aan .bron-ring{display:block}
.bron-tegel{--r:0px;position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;height:50px;padding:0 17px 0 10px;background:#fff;border:1px solid #dfe8ef;border-radius:14px;box-shadow:0 18px 36px -16px #11111140,0 3px 8px #1111110d;font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--hoek) + var(--draai) + var(--lag,0deg))) translateX(var(--r)) rotate(calc(-1 * (var(--hoek) + var(--draai) + var(--lag,0deg)))) scale(var(--s,1))}
.bron-tegel img{width:28px;height:28px;object-fit:contain}
.bron-tegel.breed{padding:0 16px}
.bron-tegel.breed img{width:96px;height:22px}

/* De echte vensters van jouw werk komen eerst binnen en worden dan elk de tegel van hun bron (home.js zet ze op hun plek). */
.venster-veld{display:none;position:absolute;inset:0;z-index:4;pointer-events:none}
.reis-aan .venster-veld{display:block}
.venster-veld .source-window{left:50%;top:45%;width:320px;height:210px;max-width:none;border:0;translate:-50% -50%;transform:none;opacity:0;will-change:transform,opacity}
.venster-veld .source-window img{display:block;width:100%;height:100%}

/* De AI-toepassing, bewust abstract: grijze regels in plaats van tekst, een passage die oplicht en de bron ernaast. */
.ai-app{display:none;position:absolute;left:50%;top:56%;width:min(1100px,80vw);height:min(540px,62vh);translate:-50% -50%;z-index:5;flex-direction:column;background:#fff;border:1px solid #dbe6ee;border-radius:16px;box-shadow:0 50px 90px -40px #11111155,0 8px 20px #11111112;overflow:hidden;opacity:0}
.reis-aan .ai-app{display:flex}
.app-bar{flex:none;display:flex;align-items:center;gap:22px;height:58px;padding:0 22px;border-bottom:1px solid #e7eef4;background:#F7FAFC}
.app-logo{position:relative;display:block;width:170px;flex:none}
.app-logo img{display:block;width:100%;height:auto}
/* Met beweging: het logo zonder tandwiel, met het hele logo erover dat pas verschijnt als het tandwiel landt. */
.app-logo .logo-leeg{display:none}
.reis-aan .app-logo .logo-leeg{display:block}
.reis-aan .app-logo .logo-heel{position:absolute;inset:0;opacity:0}
.app-status{margin-left:auto;font-size:12px;color:var(--ink-soft);padding:5px 12px;border-radius:99px;background:#EEF6FB}
.app-body{flex:1;display:grid;grid-template-columns:.9fr 1.45fr 1fr;min-height:0}
.app-kolom{position:relative;padding:20px 22px;border-right:1px solid #edf2f6;overflow:hidden}
.app-kolom:last-child{border-right:0;background:#FBFDFE}
.app-kolom h4{font:500 11px/1 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
.sk{display:block;width:var(--w,80%);height:7px;margin-top:10px;border-radius:4px;background:#E3EAF0}
.sk.licht{background:#4DAEDC}
.sk.kop{height:9px;margin-top:18px;background:#C3E2F2}
.sk.kop:first-child{margin-top:0}
.app-bar .app-titel{width:170px;height:9px;margin:0}
.app-bronnen ul{list-style:none;margin:0;padding:0}
.app-bronnen li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f4f7}
.app-bronnen li img{width:22px;height:22px;object-fit:contain;flex:none}
.app-bronnen li img.breed{width:60px;height:15px}
.app-bronnen li .sk{flex:1;max-width:var(--w);margin:0}
.app-bronnen li i{position:relative;margin-left:auto;flex:none;width:18px;height:18px;border-radius:50%;background:#4DAEDC}
.app-bronnen li i::after{content:'';position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #111111;border-width:0 2px 2px 0;transform:rotate(45deg)}
.analyse-blad{width:60%;padding:6px 18px 18px;background:#fff;border:1px solid #e3ecf2;border-radius:10px;box-shadow:0 16px 32px -22px #11111145}
.analyse-blad .sk{margin-top:12px}
/* een dun lijntje van de opgelichte passage naar het kaartje met de bron, zoals in het voorbeeld */
.app-analyse{--kaart:34%}
.koppel{position:absolute;left:calc(22px + (100% - 44px) * .6);width:calc((100% - 44px) * .4 - var(--kaart) + 4px);height:0;border-top:1.5px solid #4DAEDC;transform-origin:left center}
.koppel::before{content:'';position:absolute;left:-4px;top:-4.5px;width:7px;height:7px;border-radius:50%;background:#4DAEDC}
.k1{top:139px}.k2{top:214px}
.bron-kaart{position:absolute;right:22px;width:var(--kaart);white-space:nowrap;padding:12px 13px;background:#fff;border:1.5px solid #4DAEDC;border-radius:11px;box-shadow:0 14px 28px -18px #1b7bab55}
/* het kaartje: klein label "Bron" en daaronder het logo van waar de passage vandaan komt */
.bron-kaart small{display:block;margin-bottom:9px;font:500 10px/1 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.bron-kaart img.breed{display:block;width:92px;height:21px;object-fit:contain;object-position:left center}
.bron-naam{display:flex;align-items:center;gap:8px;height:21px;font-size:13px;font-weight:500;color:var(--ink)}
.bron-naam img{width:20px;height:20px;object-fit:contain}
.b1{top:109px}.b2{top:184px}
.rapport-blad{height:100%;padding:18px;background:#fff;border:1px solid #e3ecf2;border-radius:8px;box-shadow:0 12px 26px -18px #11111135}
.r-oordeel{margin-top:20px;padding:11px 12px;border-radius:8px;background:#EEF6FB;font-size:12px}
.r-oordeel strong{display:block;font-weight:600;color:var(--ink)}
.r-oordeel .sk{background:#D5E8F3}

@media(max-width:999px){
 .spatial-hero{display:flex;flex-direction:column;justify-content:flex-start;min-height:0;height:auto;padding-bottom:56px}
 /* wiel boven op de vloer, dan labeltje, kop, onderkop, knop en wie je spreekt; --g is de maat van het wiel */
 .spatial-hero{--g:min(74vw,380px);--top:68px;--h:calc(var(--top) + var(--g) * 1.02);justify-content:flex-start;padding-bottom:56px}
 .spatial-hero .studio{inset:0;background:
  radial-gradient(ellipse 70% calc(var(--g) * .7) at 50% calc(var(--top) + var(--g) * .55),#FFFFFF 0%,#FFFFFFe6 35%,#FFFFFF00 75%),
  radial-gradient(ellipse 60% 70px at 50% var(--h),#FFFFFFd9 0%,#FFFFFF00 100%),
  linear-gradient(180deg,#E3F1FB 0,#E3F1FB var(--top),#C3E0F5 calc(var(--h) - 10px),#DDEEFA var(--h),#EEF7FD calc(var(--h) + 200px),#F6FBFE 100%)}
 .spatial-hero .hero-copy{width:auto;max-width:680px;padding-inline:max(22px,var(--gutter))}
 .spatial-hero .eyebrow,.spatial-hero .hero-description{display:block}
 .spatial-hero .eyebrow{margin-top:26px}
 .spatial-hero .hero-description{margin:24px auto 0}
 .gear-object{order:-1;position:relative;left:auto;top:auto;translate:none;width:var(--g);margin:24px auto 0}
}
@media(max-width:600px){
 .spatial-hero .hero-copy{width:auto;padding-inline:22px}
}

/* Het manifest onder de hero: per blok één grote zin, dun met het belangrijke deel vet, zoals de verhaalregels in de
   scrollreis, en veel lucht. De drie waarden als rustige rijen met een dunne lijn. */
.manifest{background:linear-gradient(180deg,#FFFFFF 0%,#F1F8FD 18%,#F1F8FD 82%,#FFFFFF 100%);padding:0 var(--gutter)}
.manifest-blok{max-width:1180px;margin:0 auto;padding:clamp(96px,16vh,180px) 0}
.manifest-blok+.manifest-blok{padding-top:0}
.manifest-zin{max-width:15em;font-size:clamp(40px,5.4vw,88px);font-weight:800;letter-spacing:-.055em;line-height:1.04;color:var(--navy)}
.manifest-zin span{font-weight:700}
.manifest-blok:not(:first-child) .manifest-zin{font-weight:300}
/* op brede schermen blijft het vette deel één geheel op een eigen regel; op smalle schermen mag het gewoon doorlopen */
@media (min-width:760px){.manifest-zin span{display:inline-block}}
.manifest-sub{max-width:31em;margin-top:30px;font-size:clamp(18px,1.45vw,22px);line-height:1.55;color:var(--navy)}
.waarden{list-style:none;margin:0;padding:0}
/* de drie waarden als witte kaarten, elk met een stukje uit de app als bewijs (in index.html, aria-hidden): de bron bij een
   zin, jouw beoordeling, jouw sjabloon */
.waarden{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.waarden li{display:flex;flex-direction:column;align-items:stretch;padding:24px 24px 30px;border-radius:20px;background:#FFFFFF;box-shadow:0 24px 48px -30px #00143040,0 2px 6px #0014300a}
.waarden h3{margin-top:22px;font-size:clamp(22px,1.8vw,28px);font-weight:700;letter-spacing:-.05em;line-height:1.08;color:var(--navy)}
.waarden p{margin-top:10px;font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--navy)}
.bewijs-app{height:150px;display:flex;align-items:center;gap:14px;padding:18px;border-radius:14px;background:#F1F8FD;overflow:hidden}
.bewijs-app .regels{flex:1;display:flex;flex-direction:column;gap:9px}
.bewijs-app .regel{display:block;height:7px;border-radius:4px;background:#D9E9F4}
.bewijs-app .regel.blauw{background:#9FD3EC}
.bewijs-app .regel.kop{height:9px;background:#BFE0F2}
.bewijs-app .bron{flex:none;padding:10px 12px;border:1.5px solid #4DAEDC;border-radius:10px;background:#FFFFFF;box-shadow:0 12px 24px -16px #1b7bab66;font-size:13px;font-weight:500;color:var(--navy)}
.bewijs-app .bron small{display:block;margin-bottom:6px;font:500 9px/1 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.bewijs-app .bron span{display:flex;align-items:center;gap:6px}
.bewijs-app .bron img{width:18px;height:18px}
.bewijs-app .oordeel{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:10px;background:#FFFFFF;border:1.5px solid #9FD3EC;font-size:13px;font-weight:600;color:var(--navy)}
.bewijs-app .blad{flex:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 16px;border-radius:10px;background:#FFFFFF}
@media (max-width:1100px){.waarden{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.waarden{grid-template-columns:1fr}}
@media (max-width:760px){
 .manifest-blok{padding:80px 0}
}

/* De visie in dun en vet, zoals de hero (de contourletters zijn vervallen; de klasse blijft voor de bestaande opbouw). */
.manifest-zin.contour{font-weight:300}
.manifest-zin.contour span{display:block}


/* Onderaan: na de missie loopt de pagina zonder harde rand via luchtblauw over in de zwarte footer. */
.overloop{height:clamp(200px,30vh,340px);background:linear-gradient(180deg,#FFFFFF 0%,#E6F3FA 18%,#A9DBF2 40%,#4DAEDC 58%,#24546A 82%,#111111 100%)}


/* Telefoon en tablet (besluit David, 2 nov 2026: "telefoonversie gaat nog echt niet goed"). Op het eerste scherm staan
   menubalk, wiel, kop en knop; het wiel is daarvoor kleiner en schaalt mee met de schermhoogte. */
.cta-kort{display:none}
/* reis.css maakt elke span in een knop 23 px (voor het pijltje); deze twee tekstdelen houden de knopgrootte */
.nav-cta .cta-lang,.nav-cta .cta-kort{font-size:inherit;line-height:inherit}
@media(max-width:999px){
 .spatial-hero{--g:min(56vw,300px,32svh)}
 .gear-object{margin-top:10px}
 .spatial-hero .eyebrow{margin-top:14px;font-size:14px}
 /* de kop in twee blokken die elk netjes uitbalanceren, zonder losse woorden */
 .spatial-hero .hero-first,.spatial-hero .hero-second{display:block;font-size:clamp(34px,10.2vw,56px);letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
 .spatial-hero .hero-second{margin-top:4px}
 .spatial-hero .hero-description{margin-top:20px;font-size:16px;line-height:1.45}
 .spatial-hero .hero-cta{margin-top:20px;font-size:16px;padding:15px 26px}
 /* een knop in de menubalk, ook op de telefoon; de links blijven verborgen */
 .site-header .nav-cta{display:inline-flex;font-size:13px;padding:10px 14px;gap:8px;border-radius:999px}
 .site-header .nav-cta svg{width:14px;height:14px}
 /* bij scrollen een dichte witte balk: met vervaging schemerden er grijze vlekken van de inhoud door */
 .site-header.scrolled{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(max-width:600px){
 .site-header .brand img{width:136px}
 .cta-lang{display:none}
 .cta-kort{display:inline}
 /* kortere overloop naar de footer: op een smal scherm was het een lange lege band */
 .overloop{height:110px}
}

/* Wie je spreekt, direct onder de knop in de hero: bedrijf voorop, met de oprichter als gezicht. */
.spatial-hero .hero-wie{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;font-size:15px;line-height:1.25;text-align:left;color:var(--navy)}
.hero-wie img{width:46px;height:46px;border-radius:50%;background:var(--sky)}
.hero-wie strong{display:block;font-weight:700}
/* op desktop naast de knop: eronder zou de kop omhoog duwen, onder het tandwiel */
@media(min-width:1000px){.spatial-hero .hero-wie{display:inline-flex;margin:30px 0 0 24px;vertical-align:middle}.spatial-hero .hero-cta{vertical-align:middle}}

/* De secties onder de hero: dezelfde koppen in dun en vet als het manifest, alleen zwart, blauw en wit. */
.sectie{padding:clamp(80px,13vh,150px) var(--gutter)}
.sectie-binnen{max-width:1180px;margin:0 auto}
.sectie-oog{margin-bottom:16px;font-size:15px;font-weight:600;color:var(--navy)}
.sectie-zin{max-width:15em;font-size:clamp(36px,4.6vw,72px);font-weight:300;letter-spacing:-.05em;line-height:1.05;color:var(--navy)}
.sectie-zin strong{font-weight:700}
.sectie-tekst{max-width:31em;margin-top:24px;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--navy)}

.uitleg{background:#F1F8FD}
.reis-aan .uitleg,.reis-telefoon .uitleg{display:none}

.stappen{counter-reset:stap;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin:clamp(36px,6vh,56px) 0 0;padding:0;list-style:none}
.stappen li{counter-increment:stap;padding-top:22px;border-top:1.5px solid #11111122}
.stappen li::before{content:counter(stap);display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:16px;border-radius:50%;background:var(--sky);color:#111111;font-size:15px;font-weight:700}
.stappen h3{font-size:clamp(19px,1.6vw,23px);font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--navy)}
.stappen p{margin-top:6px;font-size:16px;line-height:1.45;color:var(--navy)}
.bron-rij{display:flex;gap:14px;margin-top:14px}
.bron-rij img{width:26px;height:26px;object-fit:contain}

.vakken{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.vakken li{padding:9px 16px;border:1.5px solid #111111;border-radius:999px;font-size:15px;font-weight:600;color:var(--navy)}


/* Over: het bedrijf voorop en de oprichter klein, zodat het leest als bedrijf en niet als een persoon. Zachte overgangen, geen band. */
.over-david{background:linear-gradient(180deg,#FFFFFF 0%,#F1F8FD 22%,#F1F8FD 78%,#FFFFFF 100%)}
.over-binnen{display:grid;grid-template-columns:1.35fr 1fr;align-items:end;gap:clamp(32px,5vw,80px)}
.oprichter{display:flex;align-items:center;gap:14px;font-size:16px;line-height:1.25;color:var(--navy)}
.oprichter img{width:72px;height:72px;border-radius:50%;background:var(--sky)}
.oprichter strong{display:block;font-weight:700}


.button.knop-blauw{display:inline-flex;align-items:center;gap:10px;box-shadow:none;border-radius:999px;padding:16px 26px;font-size:17px;font-weight:600}
.button.knop-blauw{background:var(--sky);color:#111111}

.vragenlijst{max-width:820px;margin-top:36px}
.vragenlijst details{border-top:1.5px solid #11111122}
.vragenlijst details:last-child{border-bottom:1.5px solid #11111122}
.vragenlijst summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-size:clamp(17px,1.4vw,20px);font-weight:600;line-height:1.3;color:var(--navy);cursor:pointer;list-style:none}
.vragenlijst summary::-webkit-details-marker{display:none}
.vragenlijst summary::after{content:'+';flex:none;font-size:24px;font-weight:400;line-height:1}
.vragenlijst details[open] summary::after{content:'\2212'}
.vragenlijst details p{max-width:36em;padding-bottom:20px;font-size:16px;line-height:1.55;color:var(--navy)}

.afsluiter{display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(48px,8vh,90px) var(--gutter) clamp(64px,10vh,110px);background:#111111;text-align:center}
.afsluiter img{width:96px;height:96px;border-radius:50%;background:var(--sky)}
.afsluiter .sectie-zin{color:#FFFFFF}

@media(max-width:999px){
 /* de app-kaart hoort bij de scrollreis; hier staat de uitleg in woorden */
 .ai-app{display:none}
 .spatial-hero{padding-bottom:28px}
 .spatial-hero .hero-wie{margin-top:16px}
 .over-binnen{grid-template-columns:1fr;gap:22px}
}
@media(max-width:760px){
 .sectie{padding-block:64px}
 .stappen{grid-template-columns:1fr;gap:0;margin-top:26px}
 .stappen li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:16px 0}
 .stappen li::before{grid-row:span 3;margin-bottom:0}
 .stappen h3,.stappen p,.bron-rij{grid-column:2}
 /* de kaartjes met grijze regels zeggen op een smal scherm niets: daar alleen de waarden zelf */
 .bewijs-app{display:none}
 .manifest-blok{padding:64px 0}
}

/* Doorlink vanaf de homepage naar de losse pagina. */
.meer{display:inline-block;margin-top:26px;font-size:16px;font-weight:600;color:var(--navy);text-underline-offset:5px}
.vakken+.meer{display:block}

/* Menu op telefoon en tablet: een eigen knop, de links staan op de losse pagina's. */
.site-header .hoofdnav a[aria-current="page"]::before{opacity:1;transform:none}
.mobile-menu{display:none;position:static}
.mobile-menu summary{display:flex;align-items:center;min-height:44px;list-style:none;cursor:pointer;padding:0 4px;font-size:15px;font-weight:600;color:#111111}
.mobile-menu summary::-webkit-details-marker{display:none}
/* het menu hangt aan de rand van de menubalk, niet aan de knop: die staat per pagina ergens anders en zo blijft het altijd in beeld */
.site-header .mobile-menu nav{position:absolute;left:auto;right:16px;top:calc(100% - 6px);display:flex;flex-direction:column;flex-wrap:nowrap;width:min(240px,calc(100vw - 32px));min-width:0;padding:8px;border-radius:14px;background:#FFFFFF;box-shadow:0 18px 40px -18px #11111155,0 0 0 1px #11111114}
.site-header .mobile-menu nav a{flex:none;display:block;padding:12px 14px;border-radius:10px;font-size:16px;font-weight:600;color:#111111;text-decoration:none}
.mobile-menu nav a[aria-current="page"]{background:#F1F8FD}
@media(max-width:900px){.mobile-menu{display:block}.nav-rechts{gap:12px}}
@media(max-width:350px){.site-header .brand img{width:112px}.nav-rechts{gap:6px}.site-header .nav-cta{padding:9px 10px}.site-header .nav-cta svg{display:none}}

/* Losse pagina's: eigen begin in de lichte studiokleuren, daarna dezelfde blokken als de homepage. */
.losse-pagina .site-header{position:fixed}
.pagina-begin{padding:clamp(130px,20vh,190px) var(--gutter) clamp(56px,9vh,96px);background:linear-gradient(180deg,#E3F1FB 0%,#F1F8FD 60%,#FFFFFF 100%)}
.pagina-begin-binnen{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(24px,5vw,80px)}
.pagina-kop{max-width:13em;font-size:clamp(40px,5.8vw,84px);font-weight:300;letter-spacing:-.05em;line-height:1.03;color:var(--navy)}
.pagina-kop strong{font-weight:700}
.pagina-wiel{width:clamp(180px,22vw,320px);height:auto}
.pagina-knop{margin-top:30px}
.pagina-begin .vakken{margin-top:26px}
.sectie-tekst a{color:inherit}

.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin:clamp(30px,5vh,48px) 0 0;padding:0;list-style:none}
.kaarten.vier{grid-template-columns:repeat(4,1fr)}
.kaarten li{padding:26px 24px;border-radius:18px;background:#FFFFFF;box-shadow:0 18px 40px -30px #1b7bab66,0 0 0 1px #1111110d}
.kaarten h3{font-size:clamp(19px,1.6vw,22px);font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--navy)}
.kaarten p{margin-top:8px;font-size:16px;line-height:1.5;color:var(--navy)}

/* Over: één ondertekend verhaal in lopende tekst, met de foto ernaast. */
.ons-verhaal{padding:clamp(24px,5vh,56px) var(--gutter) clamp(72px,12vh,130px)}
.ons-verhaal-binnen{display:grid;grid-template-columns:1.15fr .85fr;align-items:start;gap:clamp(32px,6vw,90px)}
.ons-verhaal-tekst p{font-size:clamp(19px,1.65vw,24px);line-height:1.55;color:var(--navy)}
.ons-verhaal-tekst p+p{margin-top:1.1em}
.ons-verhaal-tekst .ondertekend{margin-top:32px;font-size:16px;line-height:1.3}
.ondertekend strong{display:block;font-weight:700}
.kop-en-tekst{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:clamp(28px,5vw,80px)}
.ons-foto{overflow:hidden;border-radius:24px;background:var(--sky)}
.ons-foto img{display:block;width:100%;height:auto}

@media(max-width:1100px){.kaarten.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
 .pagina-begin-binnen{grid-template-columns:1fr}
 .pagina-wiel{grid-row:1;width:120px}
 .kaarten,.kaarten.vier{grid-template-columns:1fr}
 .ons-verhaal-binnen,.kop-en-tekst{grid-template-columns:1fr}
}

/* De telefoonreis: de hero is precies één scherm en staat stil terwijl je scrolt. Tegels met alleen het pictogram, zodat ze
   rond het tandwiel binnen het scherm passen. home.js zet de hoogtes die van het wiel afhangen. */
.telefoon-blad{display:none}
.reis-telefoon .spatial-hero{height:100svh;min-height:0;overflow:hidden;padding-bottom:0}
.reis-telefoon .gear-object{z-index:7}
.reis-telefoon .bron-ring{display:block;z-index:8}
.reis-telefoon .bron-tegel{justify-content:center;width:50px;height:50px;padding:0;border-radius:15px}
.reis-telefoon .bron-tegel span{display:none}
.reis-telefoon .bron-tegel.breed{width:76px}
.reis-telefoon .bron-tegel.breed img{width:60px;height:14px}
.reis-telefoon .verhaal{display:block}
.reis-telefoon .verhaal p{left:22px;right:22px;width:auto;max-width:none;translate:none;white-space:normal;font-size:clamp(26px,7.6vw,38px);line-height:1.12}
.reis-telefoon .verhaal p::before{display:none}
.reis-telefoon .verhaal p span{display:block}
.reis-telefoon .verhaal .v3{top:clamp(92px,17svh,170px)}
.reis-telefoon .telefoon-blad{display:block;position:absolute;left:50%;top:calc(clamp(92px,17svh,170px) + clamp(28px,8.2vw,40px) * 2.16 + 24px);width:min(calc(100% - 44px),400px);margin-left:calc(min(calc(100% - 44px),400px) / -2);padding:16px 18px 18px;border-radius:18px;background:#FFFFFF;box-shadow:0 30px 60px -30px #1111114d,0 0 0 1px #1111110d;visibility:hidden;z-index:6}
.telefoon-blad .sk{height:9px;margin-top:15px}
.telefoon-blad .sk.kop{height:11px;margin-top:20px}
.blad-kop{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #edf2f6}
.blad-kop img{display:block;width:104px;height:auto}
.blad-kop span{padding:4px 10px;border-radius:99px;background:#EEF6FB;font-size:12px;color:#111111}
.blad-bron{display:inline-block;margin-top:12px;padding:8px 10px;border:1.5px solid var(--sky);border-radius:10px;background:#FFFFFF;font-size:13px;font-weight:600;color:#111111}
.blad-bron small{display:block;margin-bottom:4px;font:500 9px/1 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.blad-bron span{display:flex;align-items:center;gap:6px}
.blad-bron img{width:16px;height:16px}
.blad-oordeel{margin-top:14px;padding:10px 12px;border:1.5px solid #9FD3EC;border-radius:10px;font-size:13px;color:#111111}
.blad-oordeel strong{font-weight:600}
.blad-oordeel .sk{background:#9FD3EC}
@media(max-height:680px){.telefoon-blad .sk{height:7px;margin-top:8px}.telefoon-blad .sk.kop{height:8px;margin-top:12px}.blad-oordeel{margin-top:10px}}

/* Eerste scherm op telefoon en tablet (keuze David, 5 nov 2026): alleen kop, knop en een groot wiel dat rechtsonder uit beeld
   loopt en bij scrollen naar het midden komt. De onderkop en de oprichter staan verderop; dit scherm moet rustig zijn. */
@media(max-width:999px){
 .spatial-hero{min-height:100svh}
 .spatial-hero .eyebrow,.spatial-hero .hero-description,.spatial-hero .hero-wie{display:none}
 body:not(.losse-pagina) .site-header .nav-cta{display:none}
 .spatial-hero .hero-copy{margin-top:clamp(16px,4svh,40px);text-align:left}
 .spatial-hero .hero-first,.spatial-hero .hero-second{font-size:clamp(32px,10.5vw,60px);text-wrap:pretty}
 .spatial-hero .hero-first{white-space:nowrap}
 .spatial-hero .hero-second{margin-top:6px}
 .spatial-hero .hero-cta{margin-top:28px;font-size:17px;padding:16px 28px}
 .gear-object{position:absolute;left:8vw;top:max(calc(100svh - min(88vw,46svh)),370px);width:min(144vw,84svh);margin:0;order:0}
 .gear-object .grondschaduw{display:none}
 .gear-object .tandwiel-3d{-webkit-box-reflect:unset}
}

/* Blokken komen zacht binnen als ze in beeld komen (home.js zet de klassen, dus zonder JavaScript staat alles er gewoon). */
/* de overgang alleen bij het verschijnen: anders vervaagt alles eerst zichtbaar als de klasse wordt gezet */
.wacht-op-beeld{opacity:0;transform:translateY(24px)}
.wacht-op-beeld.in-beeld{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}

/* Tot alles klaar is, blijft de hero leeg (zie vroeg.js). Het vangnet zet hem na vier seconden toch in beeld, voor als de scripts niet laden. */
.laadt .hero-copy,.laadt .gear-object{opacity:0;animation:laad-vangnet 0s linear 4s forwards}
@keyframes laad-vangnet{to{opacity:1}}