/* Company pages (spec 06): hoe we het doen and over ons. Markup: site-src/pages/hoe-we-het-doen.html and over-ons.html, scenes: beats-pages.js.
   Plain rules are the end state of every scene, so a page without JS (or with reduced motion) is complete; .is-armed on a section means its scene
   has started and the beginning states apply. html.beats-static turns the tall sections into a normal page. Tokens only. */

/* hero: the orbit scene behind the copy */
.hero.hero--orbit{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:calc(100svh - var(--nav-h));padding:0 var(--gutter) 12vh;overflow:hidden;isolation:isolate}
.hero--orbit .orbit-hero{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;opacity:1;pointer-events:none}
.hero--orbit .hero-copy{position:relative;z-index:1}
@keyframes orbit-in{from{opacity:0}}
.hero--orbit.is-live .orbit-hero{animation:orbit-in 1.6s ease-out}
.hero--orbit .hero-copy::before{content:"";position:absolute;inset:-16% -20%;z-index:-1;background:radial-gradient(closest-side,var(--papier) 50%,transparent 100%);pointer-events:none}
.hero--orbit .eyebrow,.hero--calls .eyebrow{margin:0 0 20px}
.hero--orbit .hero-title,.hero--calls .hero-title{margin:0;font-weight:600;line-height:1;letter-spacing:-.03em}
.hero--orbit .hero-title{max-width:17ch;font-size:clamp(2.5rem,5.6vw,4.75rem);text-wrap:balance;color:var(--inkt)}
.hero--orbit .hero-sub{max-width:34ch;margin:clamp(20px,3.4vh,32px) 0 0;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.45;color:var(--grafiet);animation:hero-in .8s var(--ease-out) .55s backwards}
.hero--orbit .actions,.hero--calls .actions{justify-content:center;margin-top:clamp(24px,4vh,36px);animation:hero-in .8s var(--ease-out) .7s backwards}
:is(.hero--orbit,.hero--calls) [data-lang] .w:nth-of-type(2){animation-delay:.07s}
:is(.hero--orbit,.hero--calls) [data-lang] .w:nth-of-type(3){animation-delay:.14s}
:is(.hero--orbit,.hero--calls) [data-lang] .w:nth-of-type(4){animation-delay:.21s}
:is(.hero--orbit,.hero--calls) [data-lang] .w:nth-of-type(5){animation-delay:.28s}
:is(.hero--orbit,.hero--calls) [data-lang] .w:nth-of-type(6){animation-delay:.35s}
:is(.hero--orbit,.hero--calls) [data-lang] .w:nth-of-type(7){animation-delay:.42s}
:is(.hero--orbit,.hero--calls) [data-lang] .w:nth-of-type(8){animation-delay:.49s}
@media (max-width:719px){
.hero.hero--orbit{flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) 104px}
.hero--orbit .orbit-hero{inset:0 0 auto;height:45%}
.hero--orbit .hero-copy::before{display:none}
.hero--orbit .hero-title{font-size:clamp(2.1rem,10.4vw,2.6rem)}
.hero--orbit .actions{margin-top:20px}
}

/* timeline and after: one cobalt line that fills with the scroll, discs that light, copy that blurs in */
.tl{--nd:56px;--gap:clamp(16px,3vw,36px);position:relative}
.tl.wrap{width:min(54rem,100% - 2 * var(--gutter))}
.tl-line{position:absolute;left:calc(var(--nd) / 2 - 1px);top:0;bottom:0;width:2px}
.tl-line::before{content:"";position:absolute;inset:0;background:var(--lijn-zacht)}
.timeline .tl-line::before,.timeline .tl-fill{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 96px);mask-image:linear-gradient(to bottom,transparent,#000 96px)}
.tl-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,1) * 100%);background:var(--kobalt)}
.tl-line::after{content:"";position:absolute;left:50%;top:calc(var(--p,1) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--kobalt);box-shadow:0 0 0 4px var(--kobalt-tint),0 0 22px 6px var(--kobalt-ring);opacity:0}
.is-armed .tl-line::after{opacity:calc(clamp(0,(var(--p) - .004) * 80,1) * clamp(0,(.996 - var(--p)) * 80,1))}
.tl .eyebrow{margin-left:calc(var(--nd) + var(--gap))}
.tl-step{position:relative;display:flex;align-items:center;gap:var(--gap)}
.timeline .tl{padding:14svh 0}
.timeline .tl-step{min-height:62svh}
.after .tl{padding:14svh 0 18svh}
.after .tl-step{min-height:30svh}
.tl-node{position:relative;z-index:1;flex:none;display:grid;place-items:center;box-sizing:border-box;width:var(--nd);height:var(--nd);border-radius:50%;background:var(--kobalt);color:var(--paper-fixed);box-shadow:0 0 0 6px var(--kobalt-tint),0 14px 30px -12px var(--kobalt-ring);transition:background-color .5s,color .5s,box-shadow .5s}
.tl-node svg{width:46%;height:46%;stroke-width:1.75}
.is-armed .tl-step:not(.is-lit) .tl-node{background:var(--papier);color:var(--grafiet);box-shadow:inset 0 0 0 1.5px var(--lijn-sterk)}
.tl-copy{transition:opacity .9s var(--ease-out),translate .9s var(--ease-out),filter .9s var(--ease-out)}
.is-armed .tl-step:not(.is-lit) .tl-copy{opacity:0;translate:0 14px;filter:blur(8px)}
.tl-copy .n{display:block;margin:0 0 10px;font:500 15px/1 var(--font-sans);color:var(--kobalt-text);font-variant-numeric:tabular-nums}
.step-title{margin:0;max-width:14ch;font-size:clamp(1.85rem,4.2vw,3.5rem);font-weight:600;line-height:1.04;letter-spacing:-.03em;text-wrap:balance;color:var(--inkt)}
.step-line{max-width:32ch;margin:22px 0 0;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.4;text-wrap:pretty;color:var(--grafiet)}
.rise{margin:0;max-width:24ch;font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:600;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;color:var(--inkt);transition:opacity .9s var(--ease-out),translate .9s var(--ease-out),filter .9s var(--ease-out)}
.after.is-armed .tl-step:not(.is-in) .rise{opacity:0;translate:0 24px;filter:blur(8px)}
.after.is-armed .tl-step:not(.is-in) .tl-node{opacity:0}
.after .tl-node{transition:opacity .9s var(--ease-out),background-color .5s,color .5s,box-shadow .5s}
@keyframes ic-flip{from{transform:perspective(260px) rotateX(90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes ic-turn{from{transform:rotate(-90deg)}to{transform:none}}
@keyframes ic-tilt{0%{transform:rotate(-26deg)}34%{transform:rotate(15deg)}60%{transform:rotate(-8deg)}82%{transform:rotate(3deg)}100%{transform:none}}
@keyframes ic-drop{0%{transform:translateY(-150%);opacity:0}50%{transform:none;opacity:1}68%{transform:translateY(-16%)}84%{transform:none}100%{transform:none}}
.after.is-armed .is-in .lucide-calendar{animation:ic-flip 1s var(--ease-out)}
.after.is-armed .is-in .lucide-life-buoy{animation:ic-turn 1s var(--ease-out)}
.after.is-armed .is-in .lucide-scale{animation:ic-tilt 1s ease-out}
.after.is-armed .is-in .lucide-lock{animation:ic-drop 1s ease-out}
.after.is-armed .is-in .lucide-target{animation:ic-lock 1s ease-out}
@keyframes ic-lock{0%{transform:scale(1.6);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:none}}
@media (max-width:719px){
.tl{--nd:44px;--gap:16px}
.step-title{font-size:clamp(1.7rem,8vw,2rem)}
.rise{font-size:clamp(1.35rem,6vw,1.7rem)}
}

/* read: the founder story lights word by word, a list shows what it is about */
.read{height:250vh}
.read .stage{position:sticky;top:var(--nav-h);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4.5vh,44px);height:calc(100svh - var(--nav-h))}
.read-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px);align-items:center;gap:clamp(32px,6vw,96px)}
.read-text{margin:0;font-size:clamp(1.4rem,2.8vw,2.5rem);font-weight:600;line-height:1.2;letter-spacing:-.025em;text-wrap:pretty;color:var(--inkt)}
.list-visual{--pitch:56px;position:relative;width:100%;height:calc(var(--pitch) * 6)}
.list-visual .bar{position:absolute;left:0;top:0;box-sizing:border-box;width:var(--w,100%);height:calc(var(--pitch) - 14px);border-radius:12px;background:var(--lijn);translate:0 calc(var(--s,0) * var(--pitch))}
.list-visual .bar::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--papier)}
.list-visual .bar::after{content:"";position:absolute;left:44px;top:50%;width:38%;height:6px;margin-top:-3px;border-radius:3px;background:var(--papier);opacity:.8}
.list-visual .bar:nth-child(1){--s:1;--w:88%}
.list-visual .bar:nth-child(2){--s:2;--w:96%}
.list-visual .bar:nth-child(3){--s:3;--w:82%}
.list-visual .bar:nth-child(4){--s:0;--w:100%;z-index:1;background:var(--kobalt);box-shadow:0 14px 30px -14px var(--kobalt-ring)}
.list-visual .bar:nth-child(5){--s:4;--w:92%}
.list-visual .bar:nth-child(6){--s:5;--w:78%}
@media (max-width:719px){
.read .stage{gap:16px;padding-bottom:84px}
.read-body{grid-template-columns:1fr;gap:20px}
.list-visual{--pitch:30px;grid-row:1}
.list-visual .bar{border-radius:8px;height:calc(var(--pitch) - 8px)}
.list-visual .bar::before{left:9px;width:12px;height:12px;margin-top:-6px}
.list-visual .bar::after{left:30px;height:4px;margin-top:-2px}
.read-text{font-size:clamp(1.3rem,5.8vw,1.55rem)}
}

/* broad: dots over the whole area drift into one row and turn cobalt (canvas.converge, drawn by beats-still.js) */
.broad{height:140vh;overflow:clip}
.broad .converge{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.broad .wrap{position:absolute;left:0;right:0;top:62vh}
.broad .eyebrow{margin:0 0 18px}
.broad .statement-text{max-width:16ch}

/* closings: the lamp (a line and a cone of light from above) and the spotlight (one glow that drifts) */
.cta-band.cta-band--lamp,.cta-band.cta-band--spotlight{position:relative;display:grid;place-items:center;box-sizing:border-box;min-height:max(70vh,480px);padding:16vh var(--gutter);overflow:hidden;isolation:isolate;text-align:center;--la:.2}
html[data-theme="dark"] .cta-band--lamp,html[data-theme="dark"] .cta-band--spotlight{--la:.4}
.cta-band--lamp h2,.cta-band--spotlight h2{max-width:16ch;margin:0 auto clamp(24px,4vh,40px);font-size:clamp(2rem,5vw,4rem);font-weight:600;line-height:1.04;letter-spacing:-.03em;color:var(--inkt)}
.lamp-copy,.spot-copy{position:relative;z-index:1}
.lamp,.spot{position:absolute;pointer-events:none}
.lamp{inset:0}
.lamp-cone{position:absolute;left:50%;top:11vh;width:min(130vw,1200px);height:64vh;margin-left:calc(min(130vw,1200px) / -2);background:conic-gradient(from 140deg at 50% 0,transparent 0,rgb(59 91 219 / var(--la)) 22deg,rgb(59 91 219 / var(--la)) 58deg,transparent 80deg,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 6%,transparent 94%);mask-image:linear-gradient(to bottom,#000 6%,transparent 94%);transform-origin:50% 0;will-change:transform,opacity}
.lamp-line{position:absolute;left:50%;top:11vh;width:min(32rem,78vw);height:2px;margin-left:calc(min(32rem,78vw) / -2);background:linear-gradient(90deg,transparent,var(--kobalt-text) 22%,var(--kobalt-text) 78%,transparent);box-shadow:0 0 28px 5px rgb(59 91 219 / calc(var(--la) * 1.7));will-change:transform,opacity}
.lamp::before{content:"";position:absolute;left:50%;top:11vh;width:min(46rem,110vw);height:18vh;translate:-50% -50%;background:radial-gradient(closest-side,rgb(59 91 219 / calc(var(--la) * 1.3)),transparent)}
.cta-band--lamp.is-armed:not(.is-on) .lamp>*{opacity:0}
.cta-band--lamp.is-on .lamp-cone,.cta-band--lamp.is-on .lamp-line{animation:lamp-open 1.8s ease-in-out both}
@keyframes lamp-open{from{opacity:0;transform:scaleX(.5)}to{opacity:1;transform:none}}
.spot{left:50%;top:50%;width:min(104vw,1040px);height:min(56vh,520px);translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgb(59 91 219 / var(--la)),transparent);will-change:transform}
.cta-band--spotlight.is-on .spot{animation:spot-drift 20s ease-in-out infinite}
@keyframes spot-drift{0%,100%{transform:translate3d(-16%,-4%,0) scale(1)}50%{transform:translate3d(16%,5%,0) scale(1.08)}}

/* calls hero on a phone and the static frame of the calls scene (reduced motion, GSAP missing, no WebGL) */
.hero--calls .calls-text .hero-title{max-width:13ch;margin:0 0 18px;font-size:clamp(2.25rem,4.6vw,4rem);color:var(--paper-fixed)}
.hero--calls .calls-text .hero-sub{max-width:none;margin:0 0 12px;font:400 17px/1.55 var(--font-sans);color:rgba(255,255,255,.82)}
.hero--calls .calls-text .actions{justify-content:flex-start;margin-top:22px}
.beats-static .calls,.calls.is-still{height:auto}
.beats-static .calls-frame,.calls.is-still .calls-frame{position:static;height:auto}
.beats-static .calls-stage,.calls.is-still .calls-stage{display:flex;align-items:center;box-sizing:border-box;min-height:calc(100svh - var(--nav-h));height:auto;padding:56px clamp(24px,5vw,72px)}
.beats-static .calls-text,.calls.is-still .calls-text{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:min(34rem,100%)}
.beats-static .calls-swap>*,.calls.is-still .calls-swap>*{grid-area:auto}
.beats-static .calls-text [data-beat],.calls.is-still .calls-text [data-beat]{opacity:1;transform:none;transition:none}
.beats-static .calls-beat,.calls.is-still .calls-beat{display:none}
@media (max-width:759px){
.hero--calls .calls-text .hero-title{max-width:none;margin-bottom:12px;font-size:clamp(2rem,9.2vw,2.4rem)}
.hero--calls .calls-text .hero-sub{font-size:15px;line-height:1.45}
.hero--calls .calls-text .actions{margin-top:16px}
.beats-static .calls-stage,.calls.is-still .calls-stage{align-items:flex-end;padding:56px 20px 28px}
}

/* static: reduced motion, or GSAP did not load */
.beats-static .hero--orbit.is-live .orbit-hero,.beats-static :is(.hero--orbit,.hero--calls) .w,.beats-static :is(.hero--orbit,.hero--calls) :is(.hero-sub,.actions),.beats-static .hero-cue svg,.beats-static :is(.lamp-cone,.lamp-line,.spot){animation:none}
.beats-static .hero-cue svg{opacity:1;transform:translateY(16px)}
.beats-static .tl-line::after{display:none}
.beats-static .read{height:auto;padding:clamp(64px,12vh,120px) 0}
.beats-static .read .stage{position:static;height:auto;padding-bottom:0}
.beats-static .broad{height:auto;min-height:max(64svh,480px);padding:clamp(48px,10vh,96px) 0}
.beats-static .broad .wrap{position:static}
.beats-static .tl-step{min-height:0;padding:clamp(32px,7vh,64px) 0}
.beats-static :is(.timeline,.after) .tl{padding-block:clamp(32px,8vh,72px)}
@media (prefers-reduced-motion:reduce){
.hero--orbit :is(.w,.hero-sub,.actions),.hero--orbit.is-live .orbit-hero,.hero--calls :is(.w,.actions){animation:none}
.tl-node,.tl-copy,.rise{transition:none}
}
/* the founder on over ons (spec 12): name and two lines, his photo of 2026-11-03 in black and white as a circle */
.founder{padding:clamp(56px,10vh,96px) 0}
.founder-row{display:flex;align-items:center;gap:clamp(24px,4vw,48px)}
.founder-photo{flex:none;margin:0}
.founder-photo img{display:block;width:min(240px,34vw);aspect-ratio:1;object-fit:cover;border-radius:50%;filter:grayscale(1)}
.founder-copy{max-width:40rem}
.founder-copy .eyebrow{margin:0 0 14px}
.founder-copy h2{margin:0 0 12px;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.03em}
.founder-line{margin:0;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.45;color:var(--grafiet);text-wrap:pretty}
@media (max-width:759px){.founder-row{flex-direction:column;align-items:flex-start}}