/* ============================================================
   The Daily Stoic App — website
   Built 1:1 from the Figma design "Website desktop" (1440 grid).
   Type:  Uniser Bold (display)  ·  Helvetica Neue (text)
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{
  font-family:"Uniser";
  src:url("../fonts/Uniser%20Bold.woff2") format("woff2"),
      url("../fonts/Uniser%20Bold.woff") format("woff");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Uniser";
  src:url("../fonts/Uniser.woff2") format("woff2"),
      url("../fonts/Uniser.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Uniser";
  src:url("../fonts/Uniser%20Bold%20Italic.woff2") format("woff2"),
      url("../fonts/Uniser%20Bold%20Italic.woff") format("woff");
  font-weight:700;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Uniser";
  src:url("../fonts/Uniser%20Italic.woff2") format("woff2"),
      url("../fonts/Uniser%20Italic.woff") format("woff");
  font-weight:400;font-style:italic;font-display:swap;
}
/* Fallback display face — only fetched when Uniser is unavailable. */
@font-face{
  font-family:"Antonio Fallback";
  src:url("https://fonts.gstatic.com/s/antonio/v20/gNMbW3NwSYq_9WD34ngK5F8vR8T0PVxx8BtIY2DwSXlM.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  size-adjust:104%;
}

/* ---------- tokens ---------- */
:root{
  --ink:#000000;
  --ink-soft:#0A0A0A;
  --paper:#EBE9D6;
  --paper-soft:#D3D1C0;
  --red:#EF4017;

  --display:"Uniser","Antonio Fallback","Oswald","Haettenschweiler","Arial Narrow",sans-serif;
  --text:"Helvetica Neue","Helvetica","Inter","Segoe UI",Arial,sans-serif;

  --pad:clamp(20px,4.4444vw,83px);
  --container:min(max(77.0833vw,320px),1443px);

  /* fluid type, exact at 1440 */
  --fs-hero:clamp(42px,10.6vw,198px);
  --fs-h2:clamp(38px,5.5556vw,104px);
  --fs-h3:clamp(20px,2.2222vw,41.6px);
  --fs-eyebrow:clamp(13px,1.1111vw,20.8px);
  --fs-body:clamp(15px,1.1111vw,20.8px);
  --fs-stat:clamp(30px,5.5556vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--text);font-size:var(--fs-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* clip in plaats van hidden: hidden maakt van de body een eigen
     scroll-container, en dan kan de browser tijdens het scrollen een reepje
     langs de rand laten staan. clip knipt alleen af. */
  overflow-x:clip;
}
@supports not (overflow-x:clip){
  body{overflow-x:hidden}
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ol,ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700}
::selection{background:var(--red);color:#fff}

/* ---------- primitives ---------- */
.display{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;line-height:.8;letter-spacing:0;
  text-box:trim-both cap alphabetic;
}
@supports not (text-box:trim-both cap alphabetic){
  .display{margin-block:-.047em}
}
.eyebrow{
  font-family:var(--text);font-weight:700;
  font-size:var(--fs-eyebrow);letter-spacing:.1em;line-height:1.2;
  text-transform:uppercase;color:var(--red);
}
.vm{color:var(--red)}
.theme-light{background:var(--paper);color:var(--ink-soft)}
.theme-dark{background:var(--ink);color:var(--paper)}

/* hand-drawn strokes ------------------------------------------------ */
.scribble{display:block;pointer-events:none}
.scribble svg{width:100%;height:100%;overflow:visible}
.scribble path{
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1);
}
.scribble.is-drawn path{stroke-dashoffset:0}
.mark{position:relative;white-space:normal}
.mark--b{font-weight:700}
.scribble--mark{position:absolute;left:0;right:-2px;bottom:-.51em;height:.42em}
/* block, anders zet de regelhoogte de svg op de baseline en zakt de streep weg */
.scribble--mark svg{display:block}

/* ============================================================ NAV */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:clamp(64px,6.1111vw,114px);
  transition:background .45s ease,border-color .45s ease;
  background:rgba(0,0,0,.41);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.nav.is-light{background:rgba(235,233,214,.45)}
.nav__inner{
  height:100%;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
}
.nav__logo{display:flex;align-items:center;gap:clamp(10px,1.1111vw,20.8px)}
.nav__mark{position:relative;width:clamp(30px,2.7778vw,52px);height:clamp(30px,2.7778vw,52px);flex:none}
.nav__mark-img{position:absolute;inset:-15%;width:135%;height:135%;max-width:none;transition:opacity .45s ease}
.nav__mark-img--dark{opacity:0}
.nav.is-light .nav__mark-img--light{opacity:0}
.nav.is-light .nav__mark-img--dark{opacity:1}
.nav__word{
  font-size:clamp(14px,1.25vw,23.4px);font-weight:500;text-transform:capitalize;line-height:1;
  color:var(--paper);transition:color .45s ease;white-space:nowrap;
}
.nav__items{display:flex;align-items:center;gap:clamp(18px,2.3611vw,44px)}
.nav__items a{
  font-size:clamp(13px,1.1111vw,20.8px);font-weight:500;text-transform:capitalize;line-height:1;
  color:var(--paper);transition:color .45s ease,opacity .25s ease;white-space:nowrap;
}
.nav__items a:hover,
.nav.is-light .nav__items a:hover{color:var(--red)}
.nav.is-light .nav__word,
.nav.is-light .nav__items a{color:var(--ink-soft)}

/* ============================================================ scenes */
.scene{position:relative}
.scene__pin{position:sticky;top:0;height:100vh;overflow:hidden}

/* ============================================================ 1 · HERO */
.scene--hero{background:#040300}
.hero{position:absolute;inset:0;overflow:hidden;background:#040300}
/* Figma "marcus 2 1": a 1496 x 1400 box at (-56,-10), the photo inside it at
   81.18% x 130.13% offset (-39.86%, -0.07%), a 40% black tint on top and the
   whole thing in luminosity blend — that is what neutralises the green cast. */
/* Het beeldvlak dekt de hele hero, hoe hoog die ook uitvalt. */
.hero__marcus{
  position:absolute;inset:0;
  overflow:hidden;background:#040300;z-index:0;
}
/* De toon zit in het bestand gebakken (assets/img/marcus-hero-tone*.jpg).
   Desktop: out = 0.6 * (luminantie + (+3.9, +1.9, -17.1)).
   Mobiel:  out = 0.34 * (luminantie + (+6.9, +5.5, -4.6)) -- donkerder. */
/* De foto schaalt met de HOOGTE van de hero mee, niet met de vensterbreedte:
   130,13% van de hero, breedte volgt de beeldverhouding. Zo dekt hij de hero
   altijd volledig — geen rand onderaan als de hero hoger uitvalt — en blijft
   het beeldmerk (de kop linksboven) op zijn plek staan.
   -45,3% komt overeen met de -652 uit het ontwerp op 1440. */
.hero__marcus img{
  position:absolute;left:-45.3%;top:-1.5%;
  height:130.13%;width:auto;max-width:none;
}
.hero__tile,.phones,.hero__note{position:relative;z-index:1}
.hero__stage{
  position:absolute;left:0;top:0;width:100%;
  height:auto;min-height:100vh;padding-bottom:clamp(44px,5.2778vw,99px);   /* hero 1400 hoog */
  display:flex;flex-direction:column;align-items:center;
  /* de inhoud staat op x 776 van 1440, niet op het midden: het beeld vult links */
  padding-left:7.7778%;
  padding-top:clamp(96px,9.5139vw,178px);   /* eyebrow-cap op 143 */

}
.hero__tile{
  width:min(max(36.3194vw,320px),680px,86vw);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.hero__tile .eyebrow{font-size:clamp(14px,1.25vw,23.4px)}
.display--hero{font-size:var(--fs-hero);color:var(--paper)}
.hero__sub{
  width:min(max(24.375vw,300px),456px,80vw);font-weight:700;font-size:clamp(15px,1.1111vw,20.8px);line-height:1.4;color:var(--paper);
}

/* phones ------------------------------------------------------------- */
/* De waaier is 1-op-1 uit Figma: het kader "iphones" is 804.164 x 645 en staat
   op x 316.14; de drie mockups zijn exports uit Figma, uitgelijnd op de render
   (links 0/17, rechts 445/23, midden 243/0 binnen dat kader). */
.phones{
  --pwc:clamp(144px,21.0486vw,394px);         /* kader 770 breed op 1440 */
  position:relative;margin-top:clamp(24px,3.9583vw,74px);   /* bovenkant op 534 */
  width:calc(var(--pwc)*2.540516);
  height:calc(var(--pwc)*2.037677);
  margin-left:calc(var(--pwc)*-.011246);
  overflow:hidden;
}
.fanphone{position:absolute;max-width:none;display:block}
.fanphone--left{left:0;top:2.6357%;width:44.6842%;height:96.2279%;z-index:1}
.fanphone--right{left:55.3372%;top:3.5659%;width:44.6842%;height:96.2279%;z-index:1}
.fanphone--center{left:30.2177%;top:0;width:39.3788%;height:100%;z-index:3}

/* losse mock-up (The Idea) — geometrie uit Figma: body 316.538 x 645,
   scherm 286.923 x 622.308 op (14.615, 12.308) r 42.308,
   island 91.538 x 26.538 op (111.923, 20.769) */
.phone{position:relative;aspect-ratio:316.538/645;flex:none}
.phone__frame{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;max-width:none;pointer-events:none;
}
.phone__screen{
  position:absolute;z-index:1;overflow:hidden;background:#000;
  left:4.61725%;top:1.90827%;width:90.64395%;height:96.48166%;
  border-radius:14.74544%/6.79855%;
}
.phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.phone__island{
  position:absolute;z-index:2;overflow:hidden;background:#000;
  left:35.35694%;top:3.21999%;width:28.91855%;height:4.11448%;
  border-radius:999px;
}
.phone__cam{
  position:absolute;left:77.73%;top:24.64%;
  width:14.29%;aspect-ratio:1;border-radius:50%;
  background:#12141c;opacity:.6;
}

/* prototype note ----------------------------------------------------- */
/* De prototype-tekst loopt mee in de kolom van de hero in plaats van op een
   vaste positie te hangen: zo staat hij op elke vensterbreedte even ver onder
   de mockups (196 op 1440) en kan hij er nooit overheen vallen. */
.hero__note{
  position:relative;margin-top:max(34px,min(4.6528vw,87px));   /* 67 op 1440 */
  width:min(max(32.6389vw,300px),611px,86vw);text-align:center;color:var(--paper);font-weight:700;
  font-size:clamp(15px,1.1111vw,20.8px);line-height:1.55;
  display:flex;flex-direction:column;gap:clamp(12px,1.1806vw,22px);
}
.scribble--underline{width:min(max(23.8194vw,200px),446px,80vw);height:clamp(6px,.5556vw,10.4px);margin:clamp(-21px,-1.111vw,-16px) auto 0}
.scribble--underline path{stroke:url(#emberGrad)}

/* ============================================================ 2 · THE GAP */
/* stage mirrors the 1440 x 785 storyboard frame; children sit on that grid */
.gap{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}
.gap__stage{position:relative;width:100%;height:max(747px,min(51.875vw,972px));transform-origin:center center}   /* content box 747 */

.gap__head{
  position:absolute;left:0;right:0;top:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.gap__head .display{font-size:var(--fs-h2);color:var(--ink-soft)}
.gap__body{
  width:min(max(44.0278vw,300px),816px,calc(100vw - var(--pad)*2));color:var(--ink-soft);line-height:1.5;margin-top:6.5px;
}
.gap__body p + p{margin-top:1.5em}   /* de witregel uit Figma */

.orb{
  position:absolute;margin:0;width:7.9861vw;max-width:150px;aspect-ratio:1;
  translate:-50% -50%;
}
.orb img{width:100%;height:100%;object-fit:contain}
.orb--1{left:19.51%;top:10.44%}
.orb--2{left:15.63%;top:41.63%}
.orb--3{left:79.10%;top:10.98%}
.orb--4{left:85.07%;top:38.42%}

.onespot{
  position:absolute;left:49.86%;top:81.73%;
  width:18.8889vw;max-width:354px;aspect-ratio:1;translate:-50% -50%;
  display:grid;place-items:center;
}
.onespot__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.onespot__disc{
  position:absolute;inset:0;border-radius:50%;
  background:var(--red);transform:scale(.25);opacity:0;
}
.onespot__text{
  position:relative;z-index:2;width:67%;text-align:center;font-weight:700;
  color:var(--ink-soft);line-height:1.645;
}
.onespot__text--final{
  position:absolute;width:100%;color:#fff;font-weight:700;
  font-size:clamp(30px,3.4722vw,65px);line-height:.8;opacity:0;
}

/* ============================================================ 3 · THE IDEA */
/* stage mirrors the 1440 x 1025 storyboard frame (Desktop 6-12) */
.idea{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}
.idea__stage{position:relative;width:100%;height:min(50vw,936px);transform-origin:center center}   /* content box 720 */

.idea__col{
  position:absolute;left:11.4583%;top:0;          /* x 165 */
  width:37.5694%;                                  /* 541 */
}
.idea__col>.display{font-size:var(--fs-h2);color:var(--paper);margin-top:14px}
.idea__lede{font-weight:700;margin-top:21.5px}
.feats{margin-top:38.5px}
.feat{border-top:1px solid rgba(235,233,214,.28);padding:24.5px 0;overflow:hidden}
.feat:last-child{border-bottom:1px solid rgba(235,233,214,.28)}
.feat__title{font-size:var(--fs-h3);line-height:.8;color:var(--paper)}
/* de titel is een knop: hele regel aanklikbaar, ook met het toetsenbord */
.feat__btn{
  display:block;width:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:color .25s ease;
}
.feat__btn:hover{color:var(--red)}
.feat__btn:focus{outline:none}
.feat__btn:focus-visible{outline:2px solid var(--red);outline-offset:8px}
/* vaste kolombreedte voor het nummer, anders begint elke titel op een
   andere hoogte: I. is smal, III. is breed */
.feat__num{color:var(--red);display:inline-block;width:.62em;margin-right:.3em}
.feat__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1),opacity .4s ease;
  opacity:0;
}
.feat__body>div{overflow:hidden}
.feat__body p{line-height:1.5;padding:21.5px 0 21px}
.feat__body p:not(:last-child){padding-bottom:0}
.feat__body p + p{padding-top:24px}   /* precies één witregel */
.feat.is-open .feat__body{grid-template-rows:1fr;opacity:1}

.idea__phone{
  position:absolute;left:60.486%;top:6.528%;    /* x 871, y 150 uit de lange pagina */
  width:min(21.9818vw,411.5px,45vh);aspect-ratio:316.538/645;
}
.phone--idea{width:100%;height:100%}
.phone--idea .phone__screen img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease}
.phone--idea .phone__screen img.is-on{opacity:1}

/* ============================================================ 4 · WHY US */
.why{
  position:relative;
  padding:clamp(48px,6.1111vw,114px) var(--pad);   /* 88 boven en onder op 1440 */
}
.why__wrap{
  display:flex;flex-direction:column;align-items:center;
  width:min(var(--container),100%);margin-inline:auto;
}
/* Why us en What's next schalen mee met de animatieblokken, zodat alle teksten
   op de pagina even groot blijven. De factor komt uit de scene die het meest
   moet krimpen; het javascript zet hem hier neer. */
[data-scale]{transform-origin:top center}
.why__head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.why__head .display{font-size:var(--fs-h2);color:var(--ink-soft)}
.why__body{width:min(max(36.8056vw,300px),689px,90vw);color:var(--ink-soft);margin-top:7.5px}

.stats{
  width:100%;margin-top:clamp(24px,2.8125vw,53px);
  background:var(--ink-soft);color:var(--paper);border-radius:24px;
  padding:clamp(28px,3.2639vw,61px) clamp(16px,1.9444vw,36px) clamp(26px,3.0903vw,58px);
}
.stats__title{text-align:center;font-weight:700;font-size:var(--fs-body)}
.stats__grid{
  margin-top:clamp(26px,3.1806vw,60px);
  display:grid;grid-template-columns:repeat(5,1fr);
}
.stats__grid li{
  padding:0 clamp(8px,1.4vw,20px);text-align:center;
  border-left:1px solid rgba(235,233,214,.24);
}
.stats__grid li:first-child{border-left:0}
.stats__num{
  font-size:var(--fs-stat);line-height:1;color:var(--paper);
  display:flex;align-items:baseline;justify-content:center;gap:.02em;
  font-variant-numeric:tabular-nums;
}
.stats__gt{margin-right:.02em}
.stats__star{font-family:var(--text);font-size:.30em;margin-left:.12em;line-height:1;align-self:center}
.stats__label{margin-top:21.5px;line-height:1.5;font-size:var(--fs-body)}

.why__close{
  margin-top:clamp(24px,2.8125vw,53px);text-align:center;color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:25.5px;
}
/* de zinnen komen één voor één omhoog in plaats van als blok */
.why__close p:nth-child(1){transition-delay:.05s}
.why__close p:nth-child(2){transition-delay:.19s}
.why__close p:nth-child(3){transition-delay:.33s}
.why__close p:nth-child(4){transition-delay:.47s}
.why__close p:nth-child(5){transition-delay:.63s}
.why__line--b{font-weight:700}
.why__with{margin-top:-.25em}
.with{position:relative;display:inline-block;font-weight:700;padding:14px 26px}
/* symmetrisch om .with heen: even veel boven als onder, dus altijd gecentreerd */
.scribble--loop{position:absolute;top:-.125em;left:-.375em;right:-.375em;
  width:calc(100% + .75em);height:calc(100% + .25em)}
/* de ellips tekent zich rustig rond de tekst, nadat die er staat */
.scribble--loop path{transition:stroke-dashoffset 1.2s cubic-bezier(.33,.75,.4,1)}

/* ============================================================ 5 · COLLAB */
.collab{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}
.collab__stage{position:relative;width:100%;height:min(52.014vw,974px);transform-origin:center center} /* content box 749 — schaalt met de breedte mee, heeft geen bodem nodig */
.collab__head{
  position:absolute;left:0;right:0;top:0;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.collab__head .display{font-size:var(--fs-h2);color:var(--paper)}

.venn{position:absolute;left:0;right:0;top:13.48%;height:93.46%}
.venn__art{width:100%;height:100%;overflow:visible}
.venn__art--m{display:none}   /* staande venn, alleen mobiel */
.venn__h{font-family:var(--display);font-weight:700;font-size:40px;text-transform:uppercase;text-anchor:middle}
.venn__t{font-family:var(--text);font-size:16px;text-anchor:middle}
.venn__side--you .venn__h,.venn__side--you .venn__t{fill:#EBE9D6}
.venn__side--we .venn__h,.venn__side--we .venn__t{fill:#EF4017}
.venn__side{opacity:0}
.venn__hatch{opacity:0}
.venn__hatch line{stroke-dasharray:var(--l,200);stroke-dashoffset:var(--o,var(--l,200))}
.venn__arrow path{stroke-dasharray:var(--l,170);stroke-dashoffset:var(--o,var(--l,170))}

.collab__close{
  position:absolute;left:0;right:0;top:83.6%;          /* ~100px lucht onder de rode streep */
  text-align:center;color:var(--paper);line-height:1.2;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
.collab__close.is-in{opacity:1;transform:none}
.collab__close p{width:min(23.375em,86vw)}   /* = 374 px bij 16 px, schaalt mee */
.collab__close-b{font-weight:500}
/* de streep loopt niet helemaal tot de tekstrand, net als in Figma */
.scribble--wide{left:6%;right:6%}

/* ============================================================ 6 · WHAT'S NEXT */
/* Figma Desktop 15 — 1440 x 645 */
.next{position:relative;overflow:hidden}
.next__scale{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  /* 88 boven; onder de voetregel bewust veel minder — dat is de uitzondering */
  padding:clamp(48px,6.1111vw,114px) var(--pad) clamp(26px,2.4306vw,45px);
}
.next__marcus{
  position:absolute;left:-17.36%;top:max(3px,.21vw);width:clamp(420px,54.4444vw,1019px);height:auto;max-width:none;
  pointer-events:none;
}
.next__inner{
  position:relative;z-index:1;width:min(max(43.0556vw,300px),806px,92vw);text-align:center;color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:23px;
}
.next__inner>*{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1);
}
.next__inner.is-in>*{opacity:1;transform:none}
.next__inner.is-in>*:nth-child(1){transition-delay:.05s}
.next__inner.is-in>*:nth-child(2){transition-delay:.16s}
.next__inner.is-in>*:nth-child(3){transition-delay:.30s}
.next__inner.is-in>*:nth-child(4){transition-delay:.42s}
.next__inner.is-in>*:nth-child(5){transition-delay:.54s}
.next__marcus{opacity:0;transition:opacity 1.2s ease .1s}
.next__marcus.is-in{opacity:.78}
.foot{opacity:0;transform:translateY(12px);
  transition:opacity .8s ease .5s,transform .8s cubic-bezier(.22,.61,.36,1) .5s}
.foot.is-in{opacity:1;transform:none}
.next__inner .display{font-size:var(--fs-h2);margin-top:-9.1px}
.next__bold{font-weight:700;margin-top:2px}
.foot{
  position:relative;z-index:1;width:min(max(93.0556vw,320px),1742px,100%);margin-top:clamp(48px,5.9375vw,111px);
  display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(10,10,10,.18);padding-top:18px;
  font-size:13px;color:rgba(10,10,10,.72);
}

/* ============================================================ wachtwoord
   Zolang html.is-locked staat is de pagina eronder niet zichtbaar en niet te
   scrollen. Let op: dit is een drempel, geen slot — de pagina staat wel in de
   browser. Echt afschermen doe je op de server. */
.gate{display:none}
/* de achtergrond van de pagina meekleuren met het scherm: op iOS krimpt het
   zichtbare venster als het toetsenbord opengaat, en dan zag je eronder de
   zwarte body doorschemeren */
.is-locked,.is-locked body{overflow:hidden;background:var(--paper)}
.is-locked:has(.gate:not(.gate--light)),
.is-locked:has(.gate:not(.gate--light)) body{background:#040300}
.is-locked body{visibility:hidden}
.is-locked .gate{
  visibility:visible;display:flex;position:fixed;inset:0;z-index:999;
  flex-direction:column;overflow-y:auto;
  padding:clamp(24px,5vw,56px) var(--pad);
  background:#040300;color:var(--paper);
}
/* margin:auto in plaats van align-items:center — dan wordt de bovenkant niet
   afgeknipt als het niet past, bijvoorbeeld op een liggende telefoon */
.gate__box{
  width:min(420px,100%);margin:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.gate__mark{width:84px;height:84px;margin-bottom:12px}
.gate .gate__mark--dark{display:none}
.gate--light .gate__mark--light{display:none}
.gate--light .gate__mark--dark{display:block}
/* de maat hangt aan de kolom van het scherm, niet aan de vensterbreedte:
   op een telefoon is die kolom bijna even breed, dus blijft de titel gelijk */
.gate__title{font-size:min(29vw,112px);color:var(--paper);margin-top:16px}
.gate__lede{margin-top:20px;font-size:var(--fs-body);line-height:1.5;color:rgba(235,233,214,.72)}
.gate__field{display:block;width:100%;margin-top:28px;text-align:left}
.gate__label{
  display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:rgba(235,233,214,.55);margin-bottom:8px;
}
.gate__field input{
  width:100%;box-sizing:border-box;padding:14px 16px;
  font-family:var(--text);font-size:16px;color:var(--paper);
  background:rgba(235,233,214,.07);
  border:1px solid rgba(235,233,214,.25);border-radius:10px;
  transition:border-color .2s ease,background .2s ease;
}
.gate__field input:focus{
  outline:none;border-color:var(--red);background:rgba(235,233,214,.1);
}
.gate__btn{
  width:100%;margin-top:14px;padding:14px 16px;border:0;border-radius:10px;
  background:var(--red);color:#fff;font-family:var(--text);font-size:16px;
  font-weight:700;cursor:pointer;transition:opacity .2s ease;
}
.gate__btn:hover{opacity:.88}
.gate__err{
  min-height:22px;margin-top:14px;font-size:14px;color:var(--red);
  opacity:0;transition:opacity .2s ease;
}
.gate.is-wrong .gate__err{opacity:1}
.gate.is-wrong .gate__field input{border-color:var(--red)}

/* lichte variant: papier in plaats van zwart */
.is-locked .gate--light{background:var(--paper);color:var(--ink-soft)}
.gate--light .gate__title{color:var(--ink-soft)}
.gate--light .gate__lede{color:rgba(10,10,10,.68)}
.gate--light .gate__label{color:rgba(10,10,10,.5)}
.gate--light .gate__field input{
  color:var(--ink-soft);background:rgba(255,255,255,.55);
  border-color:rgba(10,10,10,.22);
}
.gate--light .gate__field input:focus{
  border-color:var(--red);background:rgba(255,255,255,.85);
}

[data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-in{opacity:1;transform:none}

/* ============================================================ initial states
   (JS drives these; they start hidden so nothing flashes before the first frame) */

.hero__note{opacity:0}
.gap__head,.collab__head,.onespot{opacity:0}
.venn__c,.venn__side{opacity:0}

/* gentle bobbing of the four brand marks */
@keyframes bob{
  0%  {transform:translate3d(0,0,0) rotate(0deg)}
  25% {transform:translate3d(4px,-7px,0) rotate(.7deg)}
  50% {transform:translate3d(0,-11px,0) rotate(0deg)}
  75% {transform:translate3d(-4px,-5px,0) rotate(-.7deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
.orb img{animation:bob 9s ease-in-out infinite}
.orb--1 img{animation-duration:8.5s;animation-delay:-1.2s}
.orb--2 img{animation-duration:10.5s;animation-delay:-3.4s}
.orb--3 img{animation-duration:9.4s;animation-delay:-5.1s}
.orb--4 img{animation-duration:11.2s;animation-delay:-2.3s}

/* ============================================================ responsive
   Mobiel volgt het Figma-ontwerp "mobile" (420-raster): geen vastgezette
   secties meer maar een doorlopende pagina, menu scrollt mee, logo gecentreerd.
   ============================================================ */
@media (max-width:1099px){

  /* Elke maat hieronder is een maat uit het 420-ontwerp, vermenigvuldigd met
     --u: één ontwerp-px. Op 420 staat alles 1-op-1 en daaronder krimpt alles
     evenredig mee. Breder groeit het mee tot 1,19x (500px); daarboven blijft de
     bodytekst die niet meer bij de rest van de site passen. Boven 420 blijft
     de kolom dus 420 breed en gecentreerd, met de secties en het hero-beeld
     over de volle breedte erachter. */
  :root{
    --u:min(.2380952vw,1px);
    --pad:calc(var(--u)*25);
    --fs-hero:calc(var(--u)*139);
    --fs-h2:calc(var(--u)*65);
    --fs-h3:calc(var(--u)*32);
    --fs-eyebrow:calc(var(--u)*14);
    --fs-body:calc(var(--u)*16);
    --fs-stat:calc(var(--u)*80);
  }
  body{font-size:var(--fs-body);line-height:calc(var(--u)*24)}

  /* de hele pagina is een kolom van 420 ontwerp-px, gecentreerd.
     De hero niet: die draagt het paginabrede beeld, daar wordt alleen de
     inhoud gecentreerd. */
  .gap,.idea,.collab,.why__wrap{
    width:calc(var(--u)*420);max-width:100%;margin-inline:auto;
  }

  /* ---- menu: scrollt mee, logo gecentreerd, geen links ---- */
  .nav{position:absolute;height:auto;background:none;
       -webkit-backdrop-filter:none;backdrop-filter:none;padding-top:calc(var(--u)*24)}
  .nav__inner{justify-content:center;padding:0 var(--pad)}
  .nav__items{display:none}
  .nav__logo{gap:calc(var(--u)*16)}
  .nav__mark{width:calc(var(--u)*40);height:calc(var(--u)*40)}
  .nav__word{font-size:calc(var(--u)*18)}

  /* ---- geen vastgezette secties ---- */
  .scene{height:auto!important}
  .scene__pin{position:static;height:auto;overflow:visible}

  /* ---- 1 · HERO (1057 hoog) ---- */
  .hero{position:relative;inset:auto;height:auto}
  .hero__stage{position:relative;left:auto;top:auto;height:auto;min-height:0;
               padding:calc(var(--u)*141) 0 calc(var(--u)*70)}
  .hero__marcus{left:0;top:0;width:100%;height:100%}
  /* -668 gemeten vanaf de linkerrand van de 420-kolom; die kolom begint op
     50% - 210u, dus het beeld staat op 50% - 878u. De hoogte stuurt ook hier:
     134,42% van de hero (1398 van 1040), breedte volgt de beeldverhouding. */
  .hero__marcus img{left:calc(50% - var(--u)*878);top:-6.54%;
                    height:134.42%;width:auto;object-fit:fill}
  .hero__tile{width:calc(var(--u)*370);gap:0}
  .hero__tile .eyebrow{font-size:calc(var(--u)*18)}
  .display--hero{margin-top:calc(var(--u)*23)}
  .hero__sub{width:calc(var(--u)*340);font-size:var(--fs-body);
             line-height:calc(var(--u)*22);margin-top:calc(var(--u)*24)}
  .phones{width:calc(var(--u)*353);height:calc(var(--u)*284);
          margin:calc(var(--u)*44) auto 0}
  .hero__note{position:relative;z-index:1;left:auto;top:auto;
              opacity:0;transform:translateY(calc(var(--u)*24));
              transition:opacity .7s ease,transform .8s cubic-bezier(.22,.61,.36,1);
              width:calc(var(--u)*376);margin:calc(var(--u)*47) auto 0;
              font-size:var(--fs-body);line-height:calc(var(--u)*22);
              gap:calc(var(--u)*22)}
  .scribble--underline{display:none}

  /* ---- mobiele choreografie ----------------------------------------
     Mobiel is de animatie niet aan de scrollpositie gekoppeld maar aan het
     moment dat iets in beeld komt: het scrollen blijft van de gebruiker en
     elke beweging speelt één keer af. ---------------------------------- */
  .hero__note.is-on{opacity:1;transform:none}

  .gap__head,.collab__head{opacity:0;transform:translateY(calc(var(--u)*20));
    transition:opacity .7s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
  .gap__head.is-on,.collab__head.is-on{opacity:1;transform:none}

  .orb{opacity:0;transform:translateY(calc(var(--u)*46)) scale(.86);
       transition:opacity .6s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
  .gap__orbit.is-on .orb{opacity:1;transform:none}
  .gap__orbit.is-on .orb--1{transition-delay:.04s}
  .gap__orbit.is-on .orb--3{transition-delay:.16s}
  .gap__orbit.is-on .orb--2{transition-delay:.28s}
  .gap__orbit.is-on .orb--4{transition-delay:.40s}
  .onespot{opacity:0;transform:translateY(calc(var(--u)*20)) scale(.92);
    transition:opacity .7s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
  .onespot.is-on{opacity:1;transform:none}
  /* de stippelcirkel draait zichzelf op zijn plek — dat leest als "getekend"
     zonder dat de vier merkcirkels uit hun raster hoeven te lopen */
  .onespot__ring{transform:rotate(-32deg);
    transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .12s}
  .onespot.is-on .onespot__ring{transform:none}

  .feat{opacity:0;transform:translateY(calc(var(--u)*16));
        transition:opacity .55s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
  .feat.is-on{opacity:1;transform:none}

  /* de venn tekent zich: cirkels van boven en onder naar elkaar toe,
     dan de arcering in de overlap, dan de pijl (eerst de lijn, dan de punt) */
  .venn__art--m .venn__side{opacity:0;transform-box:view-box;
    transition:opacity .7s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
  .venn__art--m .venn__side--you{transform:translateY(-70px)}
  .venn__art--m .venn__side--we{transform:translateY(70px)}
  .venn__art--m.is-on .venn__side{opacity:1;transform:none}
  .venn__art--m.is-on .venn__side--we{transition-delay:.10s}
  .venn__art--m .venn__hatch{opacity:0;transition:opacity .25s ease .85s}
  .venn__art--m.is-on .venn__hatch{opacity:1}
  .venn__art--m .venn__hatch line{transition:stroke-dashoffset .45s ease}
  .venn__art--m.is-on .venn__hatch line{stroke-dashoffset:0}
  .venn__art--m.is-on .venn__hatch line:nth-child(1){transition-delay:0.90s}
  .venn__art--m.is-on .venn__hatch line:nth-child(2){transition-delay:0.94s}
  .venn__art--m.is-on .venn__hatch line:nth-child(3){transition-delay:0.97s}
  .venn__art--m.is-on .venn__hatch line:nth-child(4){transition-delay:1.01s}
  .venn__art--m.is-on .venn__hatch line:nth-child(5){transition-delay:1.04s}
  .venn__art--m.is-on .venn__hatch line:nth-child(6){transition-delay:1.07s}
  .venn__art--m.is-on .venn__hatch line:nth-child(7){transition-delay:1.11s}
  .venn__art--m.is-on .venn__hatch line:nth-child(8){transition-delay:1.15s}
  .venn__art--m.is-on .venn__hatch line:nth-child(9){transition-delay:1.18s}
  .venn__art--m.is-on .venn__hatch line:nth-child(10){transition-delay:1.22s}
  .venn__art--m.is-on .venn__hatch line:nth-child(11){transition-delay:1.25s}
  .venn__art--m.is-on .venn__hatch line:nth-child(12){transition-delay:1.29s}
  .venn__art--m.is-on .venn__hatch line:nth-child(13){transition-delay:1.32s}
  .venn__art--m .venn__arrow path{transition:stroke-dashoffset .5s ease}
  .venn__art--m.is-on .venn__arrow path{stroke-dashoffset:0}
  .venn__art--m.is-on .venn__arrow path:first-child{transition-delay:1.35s}
  .venn__art--m.is-on .venn__arrow path:last-child{transition-delay:1.85s;transition-duration:.3s}

  /* ---- 2 · THE GAP (1150 hoog) ---- */
  .gap{position:relative;inset:auto;display:block;
       padding:calc(var(--u)*67) var(--pad)}
  .gap__stage{height:auto;transform:none!important}
  .gap__head{position:static;gap:0}
  .gap__head .display{margin-top:calc(var(--u)*16)}
  .gap__head .display br,.why__head .display br{display:none}
  /* de koppen breken zoals in Figma */
  .collab__head .display{width:calc(var(--u)*300);margin-inline:auto}
  .next__inner .display{width:calc(var(--u)*290);margin-inline:auto}
  .gap__body{width:100%;margin-top:calc(var(--u)*22);text-align:center;
             line-height:calc(var(--u)*24)}
  .gap__orbit{position:relative;display:grid;
              grid-template-columns:repeat(2,calc(var(--u)*116));
              justify-content:center;column-gap:calc(var(--u)*46);
              row-gap:calc(var(--u)*27);margin-top:calc(var(--u)*42)}
  .orb{position:relative;inset:auto;width:calc(var(--u)*116);max-width:none;
       translate:none}
  .orb--1{order:1}
  .orb--3{order:2}
  .orb--2{order:3}
  .orb--4{order:4}
  .onespot{position:relative;inset:auto;order:5;grid-column:1/-1;
           width:calc(var(--u)*272);margin:calc(var(--u)*29) auto 0;translate:none}
  .onespot__disc,.onespot__text--final{display:none}
  .onespot__ring{opacity:1!important;transform:none!important}
  .onespot__text{width:calc(var(--u)*200);font-size:calc(var(--u)*18);
                 line-height:calc(var(--u)*27)}

  /* ---- 3 · THE IDEA (1378 hoog) ---- */
  .idea{position:relative;inset:auto;display:block;
        padding:calc(var(--u)*67) var(--pad)}
  .idea__stage{height:auto;transform:none!important;display:block}
  .idea__col{position:static;width:100%;max-width:none;text-align:center}
  .idea__col>.display{margin-top:calc(var(--u)*16)}
  .idea__lede{margin-top:calc(var(--u)*25);font-size:var(--fs-body);
              line-height:calc(var(--u)*22)}
  .feats{margin-top:calc(var(--u)*40)}
  .feat{padding:calc(var(--u)*25) 0 calc(var(--u)*26);text-align:left}
  .feat__title{font-size:var(--fs-h3)}
  .feat__btn{cursor:default;pointer-events:none}
  /* alles staat open: geen uitklap-interactie, elk onderdeel zijn eigen mockup */
  .feat__body{grid-template-rows:1fr;opacity:1}
  .feat__body p{padding:calc(var(--u)*20) 0 0;max-width:none;
                line-height:calc(var(--u)*24)}
  .feat__body p + p{padding-top:calc(var(--u)*24)}
  .idea__phone{display:none}
  .idea__phone--m{display:block;position:static;width:calc(var(--u)*183);
                  margin:calc(var(--u)*25) auto calc(var(--u)*4);
                  aspect-ratio:316.538/645}
  .phone--idea{width:100%;height:100%}

  /* ---- 4 · WHY US (2047 hoog) ---- */
  .why{padding:calc(var(--u)*67) 0}
  .why__wrap{padding-inline:var(--pad)}
  .why__head{gap:0}
  .why__head .display{margin-top:calc(var(--u)*16)}
  .why__body{width:100%;margin-top:calc(var(--u)*22);line-height:calc(var(--u)*24)}
  .stats{margin-top:calc(var(--u)*42);border-radius:calc(var(--u)*24);
         padding:calc(var(--u)*46) calc(var(--u)*30) calc(var(--u)*43)}
  .stats__title{font-size:var(--fs-body);line-height:calc(var(--u)*22)}
  .stats__grid{grid-template-columns:1fr;margin-top:0}
  .stats__grid li{padding:calc(var(--u)*31) 0 calc(var(--u)*38);border-left:0;
                  border-top:1px solid rgba(235,233,214,.24)}
  .stats__grid li:first-child{border-top:0;padding-top:calc(var(--u)*44)}
  .stats__grid li:last-child{padding-bottom:0}
  .stats__num{display:block;line-height:1}
  .stats__star{vertical-align:.35em;margin-left:.1em}
  .stats__label{margin-top:calc(var(--u)*22);font-size:var(--fs-body);
                line-height:calc(var(--u)*24)}
  .why__close{margin-top:calc(var(--u)*44);gap:calc(var(--u)*24);
              line-height:calc(var(--u)*24)}
  .why__with{margin-top:0}
  .with{padding:calc(var(--u)*24) calc(var(--u)*26)}

  /* ---- 5 · THE COLLABORATION (1308 hoog) ---- */
  .collab{position:relative;inset:auto;display:block;
          padding:calc(var(--u)*67) var(--pad)}
  .collab__stage{height:auto;transform:none!important}
  .collab__head{position:static;gap:0}
  .collab__head .display{margin-top:calc(var(--u)*16)}
  .venn{position:static;height:auto;margin-top:calc(var(--u)*12)}
  .venn__art{display:none}
  .venn__art--m{display:block;position:static;height:auto;aspect-ratio:420/870;
                width:calc(100% + var(--pad)*2);max-width:none;
                margin-inline:calc(var(--pad)*-1)}
  /* eenheden van de viewBox, geen css-pixels: de tekening schaalt zelf al
     mee, dus hier geen --u bij — anders wordt de tekst dubbel geschaald */
  .venn__h{font-size:38px}
  .venn__t{font-size:16px}
  .collab__close{position:static;margin-top:calc(var(--u)*4);
                 line-height:calc(var(--u)*20);gap:calc(var(--u)*20);
                 transition-delay:.15s}
  .collab__close p{width:100%}

  /* ---- 6 · WHAT'S NEXT (746 hoog) ---- */
  /* ook hier de voetregel als uitzondering: kleine onderrand */
  .next{padding:calc(var(--u)*67) 0 calc(var(--u)*32)}
  .next__marcus{left:calc(50% - var(--u)*556);top:calc(var(--u)*11);
                width:calc(var(--u)*778);height:calc(var(--u)*745)}
  .next__inner,.foot{width:calc(var(--u)*370);max-width:100%;margin-inline:auto}
  .next__inner{gap:calc(var(--u)*24);line-height:calc(var(--u)*24)}
  .next__inner .display{margin-top:calc(var(--u)*-9)}
  /* de voetregel volgt de vensterbreedte in plaats van de tekstkolom: op 420
     is dat precies de kolom (370), daarboven loopt hij door */
  .foot{flex-direction:row;flex-wrap:wrap;align-items:baseline;
        justify-content:space-between;gap:calc(var(--u)*11) calc(var(--u)*24);
        width:min(calc(100% - var(--u)*50), 1100px);
        margin-top:calc(var(--u)*55);padding-top:calc(var(--u)*24);
        font-size:calc(var(--u)*14);line-height:calc(var(--u)*21)}
}

/* alleen als het echt niet naast elkaar past, onder elkaar */
@media (max-width:519px){
  .foot{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene__pin{position:relative;height:auto;min-height:100vh}
}

/* wie liever geen beweging ziet, krijgt mobiel meteen het eindbeeld */
@media (max-width:1099px) and (prefers-reduced-motion:reduce){
  .hero__note,.gap__head,.collab__head,.orb,.onespot,.feat,.collab__close,
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .venn__art--m .venn__side{opacity:1;transform:none}
  .venn__art--m .venn__hatch{opacity:1}
  .venn__art--m .venn__hatch line,.venn__art--m .venn__arrow path,
  .scribble path{stroke-dashoffset:0}
}