/* ============================================================
   6 LABS — styles.css
   Streetwear / neo-brutalist. Plat, hard, luid.
   Alle waardes komen uit de tokens hieronder. Geen losse hex.
   ============================================================ */

:root{
  /* Kleur — kern (uit het merkboek) */
  --lime:        #D9FF2F;   /* neon lime: actie, accent, hoogtepunt */
  --ink:         #0A0A0A;   /* tekst, borders, shadows */
  --paper:       #F7F6F3;   /* off white: achtergrond */
  --blue:        #3B82F6;   /* accent blauw */
  --orange:      #FF7A00;   /* accent oranje, max 2x per pagina */
  --white:       #ffffff;

  /* Kleur — afgeleid */
  --line:        rgba(10,10,10,.18);
  --line-strong: var(--ink);
  --ink-on-lime: var(--ink);
  --paper-dim:   #ECEAE3;   /* alternerende sectie-achtergrond */

  /* Typografie */
  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  /* --marker staat in de tokens maar wordt niet gebruikt: een vierde
     fontbestand past niet in het budget (§9). De handgeschreven noot is
     vervangen door de SVG-6, die overal het merkaccent draagt. */
  --marker:  "Permanent Marker", "Comic Sans MS", cursive;
  --mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(.78rem, .74rem + .2vw, .875rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --step-2:  clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);
  --step-3:  clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
  --step-4:  clamp(3.25rem, 1.8rem + 7vw, 9rem);
  /* H1 staat in een kolom, niet over de volle breedte: eigen bovengrens
     zodat 'SMART ST*FF' op één regel past van 360px tot 1920px. */
  --h1:      clamp(2.6rem, 6.7vw, 6.2rem);

  --tracking-display: -.06em;
  --leading-display: .85;
  --leading-body: 1.55;

  /* Ruimte — 8px basis */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;   --sp-6: 3rem;   --sp-8: 4rem;
  --sp-12: 6rem;  --sp-16: 8rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4rem, 9vw, 9rem);
  --measure: 62ch;

  /* Vorm */
  --radius: 0;
  --border: 2px solid var(--ink);
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);
  --shadow-press: 1px 1px 0 var(--ink);

  /* Beweging */
  --ease-snap: cubic-bezier(.2,.9,.3,1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-reveal: 600ms;

  /* Scheve kaart: subtieler in één kolom dan in drie */
  --card-tilt: .6deg;

  /* Papierkorrel — heel licht, alleen voelbaar */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");

  /* Gescheurde rand — de droge penseelrand uit het merkboek, als masker */
  --torn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 834 26'><path fill='%23fff' d='M0%2C26 L0%2C11 8%2C11 9%2C10 13%2C10 14%2C9 22%2C9 23%2C8 24%2C9 26%2C8 36%2C8 37%2C9 39%2C8 48%2C8 49%2C9 50%2C8 58%2C8 59%2C9 61%2C9 62%2C8 63%2C9 68%2C9 69%2C12 70%2C9 75%2C9 76%2C13 77%2C10 78%2C12 79%2C12 80%2C9 82%2C10 84%2C10 85%2C9 86%2C10 96%2C10 97%2C12 99%2C12 100%2C13 101%2C13 103%2C10 104%2C11 106%2C10 109%2C10 110%2C11 111%2C10 112%2C11 118%2C11 119%2C10 120%2C11 129%2C11 130%2C10 131%2C11 136%2C11 137%2C10 139%2C11 142%2C11 143%2C10 145%2C10 147%2C11 148%2C10 149%2C11 153%2C11 154%2C12 155%2C10 162%2C10 163%2C12 165%2C11 167%2C12 176%2C12 177%2C9 178%2C12 185%2C12 186%2C9 190%2C9 191%2C12 195%2C12 196%2C9 197%2C12 199%2C12 200%2C9 201%2C11 204%2C11 205%2C9 219%2C9 221%2C7 223%2C8 225%2C6 239%2C6 240%2C9 241%2C8 242%2C9 245%2C9 246%2C6 247%2C10 248%2C9 250%2C10 251%2C9 260%2C9 261%2C8 276%2C8 277%2C7 279%2C8 280%2C7 287%2C7 288%2C6 290%2C6 291%2C7 293%2C6 302%2C6 303%2C8 304%2C5 316%2C5 317%2C8 318%2C6 319%2C7 325%2C7 326%2C5 327%2C7 329%2C7 330%2C8 331%2C5 332%2C8 333%2C8 334%2C4 337%2C4 338%2C3 340%2C4 342%2C3 345%2C3 346%2C8 349%2C8 350%2C3 351%2C3 352%2C7 360%2C7 361%2C6 362%2C7 364%2C6 369%2C6 370%2C7 372%2C7 373%2C6 377%2C6 378%2C7 379%2C6 385%2C6 389%2C4 391%2C4 392%2C5 393%2C4 394%2C5 413%2C5 414%2C6 418%2C6 419%2C7 421%2C6 423%2C6 425%2C8 440%2C8 441%2C6 442%2C8 443%2C7 445%2C8 447%2C7 448%2C8 458%2C8 459%2C7 463%2C7 465%2C8 466%2C7 488%2C7 489%2C6 491%2C7 492%2C6 529%2C6 530%2C7 537%2C7 538%2C8 540%2C7 542%2C7 543%2C8 546%2C8 548%2C7 549%2C11 550%2C11 551%2C8 553%2C7 555%2C8 560%2C8 561%2C11 563%2C11 564%2C8 565%2C9 566%2C8 568%2C8 569%2C9 571%2C9 572%2C8 574%2C9 576%2C9 577%2C8 586%2C8 587%2C9 589%2C8 591%2C9 592%2C8 606%2C8 607%2C9 609%2C9 610%2C8 614%2C10 616%2C8 617%2C8 619%2C10 626%2C10 628%2C7 629%2C7 630%2C9 633%2C9 634%2C7 635%2C9 636%2C9 637%2C6 638%2C6 639%2C10 640%2C9 651%2C9 652%2C6 653%2C9 654%2C9 655%2C7 657%2C7 658%2C6 660%2C6 661%2C8 662%2C7 663%2C9 665%2C9 666%2C8 669%2C8 670%2C5 673%2C5 674%2C8 675%2C7 677%2C8 678%2C7 682%2C7 683%2C8 686%2C8 687%2C7 700%2C7 701%2C6 703%2C6 704%2C7 706%2C7 707%2C6 709%2C6 710%2C7 711%2C6 713%2C7 723%2C7 724%2C4 726%2C4 727%2C7 730%2C7 732%2C3 733%2C7 734%2C4 735%2C7 737%2C7 740%2C5 741%2C6 746%2C6 749%2C4 755%2C4 756%2C5 763%2C5 764%2C6 766%2C5 767%2C6 769%2C6 770%2C5 772%2C7 775%2C7 776%2C8 785%2C8 786%2C9 793%2C9 794%2C8 796%2C9 797%2C8 798%2C9 804%2C9 805%2C10 807%2C10 808%2C9 810%2C10 812%2C9 813%2C10 827%2C10 828%2C12 832%2C12 834%2C11 L834%2C26 Z'/></svg>");

  /* Halftone-raster — vervangt de blur-blobs */
  --halftone: radial-gradient(var(--ink) 1.5px, transparent 1.6px);
}

@font-face{
  font-family:"Archivo Black";
  src:url(/fonts/archivo-black-latin.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url(/fonts/inter-latin-var.woff2) format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- Reset / basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px;overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:500;
  font-size:var(--step-0);
  line-height:var(--leading-body);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{max-width:100%;display:block}
/* Merkvormen erven hun kleur van `color`, zodat één regel alles omzet. */
use{fill:currentColor}
.brand-defs{position:absolute}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
}

.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--lime);color:var(--ink);border:var(--border);
  padding:.75rem 1.25rem;font-family:var(--mono);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.08em;
  transition:top var(--dur-fast) var(--ease-snap);
}
.skip:focus{top:.75rem}

.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Typografie-helpers ---------- */
.h-big,.h-huge,h1,.case-name,.step-title,.sent-big{
  overflow-wrap:anywhere;
}
.h-big,.h-huge,h1{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:var(--tracking-display);
  line-height:var(--leading-display);
}
.h-big{font-size:var(--step-3)}
.h-huge{font-size:var(--step-4)}

.eyebrow,.sec-num,.proofline,.card-meta,.tag,.step-time,.direct,.foot-h,.chip,.uf-cap,.who-fig figcaption{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:var(--step--1);
}
/* Penseelstreep onder de sectiekop — het merkdevice uit het logo */
.brushrule{
  width:clamp(140px,18vw,220px);height:auto;
  color:var(--lime);
  margin:clamp(-.9rem,-1.2vw,-.2rem) 0 1.1rem -.4rem;
}
.brushrule.dark{color:var(--ink)}

/* Markeerstift over één woordgroep */
.hl{
  background:var(--lime);color:var(--ink);
  padding:.02em .18em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* Handgetekende pijl, uit het merkboek. Wijst in de bron linksonder. */
.hand-arrow{height:1.15em;width:auto;flex:none}
.hand-arrow.down{transform:rotate(-45deg)}
.hand-arrow.up{transform:rotate(180deg)}

.measure{max-width:var(--measure)}
.measure p + p{margin-top:var(--sp-3)}
.lime{color:var(--lime)}

/* ---------- Knoppen: precies drie CTA-varianten ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  min-height:44px;padding:.85rem 1.5rem;
  border:var(--border);border-radius:var(--radius);
  font-family:var(--display);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.02em;
  background:var(--white);color:var(--ink);
  box-shadow:var(--shadow-hard);
  transition:transform var(--dur-fast) var(--ease-snap),
             box-shadow var(--dur-fast) var(--ease-snap),
             background var(--dur-fast) var(--ease-snap);
  cursor:pointer;
}
.btn:hover,.btn:focus-visible{transform:translate(5px,5px);box-shadow:var(--shadow-press)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn-high{background:var(--lime);color:var(--ink-on-lime)}
.btn-mid{background:var(--white)}
.link-low{
  display:inline-flex;align-items:center;gap:.4em;min-height:44px;
  font-weight:800;text-decoration:underline;text-underline-offset:.35em;
  text-decoration-thickness:2px;
}
.link-low:hover{text-decoration-color:var(--blue)}
.cta-mid{margin-top:var(--sp-8)}

/* ============================================================
   HEADER
   ============================================================ */
/* Zwarte balk: de lime 6 verdwijnt op off-white, op inkt springt hij eruit. */
.site-head{
  position:sticky;top:0;z-index:60;
  background:var(--ink);
  background-image:var(--grain);
  color:var(--paper);
  border-bottom:2px solid var(--lime);
}
.site-head.is-stuck{box-shadow:0 6px 0 rgba(10,10,10,.16)}
.head-bar{
  display:flex;align-items:center;gap:var(--sp-4);
  height:88px;
  transition:height var(--dur-base) var(--ease-snap);
}
.site-head.is-stuck .head-bar{height:64px}

/* Logo-lockup: penseel-6 + penseel-LABS + drie accentstreepjes */
.brand{display:flex;align-items:center;gap:.55rem;flex:none;min-height:44px}
.brand-six{width:auto;height:2.5rem;color:var(--lime);flex:none}
.site-head.is-stuck .brand-six{height:2.1rem}
.brand-labs{position:relative;display:block;flex:none}
.brand-word{width:auto;height:1.35rem;color:var(--paper)}
.site-head.is-stuck .brand-word{height:1.15rem}
.brand-slash{position:absolute;right:-.55rem;top:-.5rem;height:.62rem;width:auto;color:var(--lime)}

.head-nav{display:flex;gap:var(--sp-4);margin-left:auto}
.head-nav a{
  font-family:var(--mono);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.12em;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:2px solid transparent;
  transition:border-color var(--dur-fast) var(--ease-snap);
}
.head-nav a:hover{border-bottom-color:var(--lime)}
/* op zwart heeft de knop geen inktrand of -schaduw nodig */
.site-head .head-cta{border-color:var(--lime);box-shadow:none}
.site-head .head-cta:hover,.site-head .head-cta:focus-visible{transform:translate(3px,3px);box-shadow:-3px -3px 0 rgba(247,246,243,.25)}
.head-cta{padding:.6rem 1.1rem;box-shadow:var(--shadow-hard-sm);flex:none}

/* Chipbalk — de mobiele navigatie. Geen hamburger, geen overlay. */
.chips{
  display:none;
  gap:.5rem;
  padding:.5rem var(--gutter) .6rem;
  border-top:2px solid rgba(247,246,243,.22);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;scroll-snap-align:start;
  display:inline-flex;align-items:center;
  min-height:36px;padding:.35rem .9rem;
  border:2px solid var(--paper);
  background:transparent;color:var(--paper);
  transition:background var(--dur-fast) var(--ease-snap),
             color var(--dur-fast) var(--ease-snap),
             border-color var(--dur-fast) var(--ease-snap);
}
.chip.is-active{background:var(--lime);border-color:var(--lime);color:var(--ink)}

@media(max-width:899px){
  .head-bar{height:64px;gap:var(--sp-2)}
  .head-nav{display:none}
  .head-cta{margin-left:auto}
  .brand-six{height:1.8rem}
  .brand-word{font-size:1.3rem}
  .chips{display:flex}
  html{scroll-padding-top:124px}
}

/* ============================================================
   01 — HERO
   ============================================================ */
.hero{padding-block:clamp(2rem,5vw,4.5rem) clamp(3rem,6vw,6rem);position:relative}
.hero-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.15fr .85fr}
}
.eyebrow{color:var(--ink);opacity:.7;margin-bottom:var(--sp-3)}

h1{font-size:var(--h1);margin-bottom:var(--sp-4)}
h1 .l{display:block}
h1 .outline{
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
}
@media(min-width:900px){
  h1 .outline{transform:translateX(min(3vw,2rem));-webkit-text-stroke-width:3px}
}

.lede{max-width:52ch;margin-bottom:var(--sp-4);font-size:var(--step-1);line-height:1.4}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4)}
.proofline{
  margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:2px solid var(--ink);
  display:inline-block;
}

/* Rechts: inktvlak met het volledige logo. Geen sprays, geen scribble. */
.hero-art{position:relative}
.hero-slab{
  position:relative;
  background:var(--ink);
  background-image:var(--grain);
  border:var(--border);
  box-shadow:14px 14px 0 var(--blue);
  aspect-ratio:4/5;
  display:grid;place-items:center;
  overflow:hidden;
}
@media(max-width:899px){
  .hero-slab{aspect-ratio:auto;height:48vh;min-height:19rem;box-shadow:10px 10px 0 var(--blue)}
  .hero-grid{grid-template-areas:"art" "copy"}
  .hero-art{grid-area:art}
  .hero-copy{grid-area:copy}
}
/* Harde vormen in plaats van blur: halftone-raster, schuin afgesneden */
.hero-slab::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(var(--lime) 1.5px, transparent 1.6px);
  background-size:14px 14px;
  opacity:.2;
  clip-path:polygon(0 0,100% 0,100% 38%,0 62%);
}

.lockup{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.2rem,.6vw,.7rem);
  padding:1.5rem;
  animation:drift 11s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(-.4deg)}to{transform:translate3d(0,-10px,0) rotate(.4deg)}}

.giant-six{height:min(66%,26rem);width:auto;color:var(--lime);overflow:visible}
.lockup-word{position:relative;display:block}
.hero-labs{height:auto;width:min(14.5rem,33vw);color:var(--paper)}
.hero-slash{position:absolute;right:-1.1rem;top:-.9rem;width:2.2rem;height:auto;color:var(--lime)}

/* De 6 wordt in één haal gezet, daarna verschijnt LABS, daarna de spetters. */
.paint-stroke{stroke-dasharray:var(--paint-len,722);stroke-dashoffset:var(--paint-len,722)}
.paint-all{opacity:1}
.js .paint-stroke{animation:paint .9s var(--ease-snap) forwards}
.js .paint-all{opacity:0;animation:splat .3s .92s ease-out forwards}
.js .lockup-word{opacity:0;animation:word-in .35s .78s var(--ease-snap) forwards}
@keyframes paint{to{stroke-dashoffset:0}}
@keyframes splat{to{opacity:1}}
@keyframes word-in{from{opacity:0;transform:translateY(10px) rotate(-2deg)}to{opacity:1;transform:none}}

/* Sticker met plakband — het enige losse element in de hero */
.sticker{
  position:absolute;z-index:2;left:1.25rem;top:7%;
  transform:rotate(-6deg);
  background:var(--lime);color:var(--ink);
  border:var(--border);
  box-shadow:var(--shadow-hard-sm);
  padding:.5rem .9rem;
  font-family:var(--mono);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;
}
.sticker::before,.sticker::after{
  content:"";position:absolute;width:2.6rem;height:1.05rem;
  background:rgba(247,246,243,.5);
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.12);
}
.sticker::before{left:-1rem;top:-.5rem;transform:rotate(-32deg)}
.sticker::after{right:-1rem;bottom:-.5rem;transform:rotate(-32deg)}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:var(--lime);color:var(--ink);
  border-block:var(--border);
  overflow:hidden;
  padding-block:.7rem;
}
.ticker-track{
  display:flex;width:max-content;
  will-change:transform;
  animation:ticker 26s linear infinite;
}
.ticker-set{
  font-family:var(--display);
  font-size:clamp(1.1rem,2.6vw,1.9rem);
  text-transform:uppercase;letter-spacing:var(--tracking-display);
  white-space:nowrap;padding-right:1.5rem;
}
.ticker-set b{color:var(--blue)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   SECTIES — raamwerk + 6 als sectiemarkering
   ============================================================ */
.sec{padding-block:var(--section-y);position:relative}
body,.sec,.statement,.site-foot,.card,.form,.ui-frag{background-image:var(--grain)}
.sec-why{background:var(--paper)}
.sec-what{background:var(--paper-dim);border-block:var(--border)}
.sec-proof{background:var(--paper)}
.sec-how{background:var(--paper-dim);border-block:var(--border)}
.sec-who{background:var(--paper)}
.sec-faq{background:var(--paper-dim);border-top:var(--border);padding-bottom:var(--sp-8)}

.sec-grid{display:grid;gap:var(--sp-4)}
@media(min-width:900px){
  .sec-grid{grid-template-columns:.35fr 1.65fr;gap:var(--sp-6)}
}
.sec-mark{display:flex;align-items:center;gap:var(--sp-2)}
@media(min-width:900px){
  .sec-mark{flex-direction:column;align-items:flex-start;position:sticky;top:120px;align-self:start}
}
.mark-six{height:2.9rem;width:auto;color:var(--ink);opacity:.3}
.sec-num{opacity:.7}
.sec-body > * + *{margin-top:var(--sp-4)}
.h-big + .measure{margin-top:var(--sp-4)}

/* ============================================================
   03 — WHAT (kaarten)
   ============================================================ */
.cards{display:grid;gap:var(--sp-4)}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}

.card{
  position:relative;
  min-height:420px;
  display:flex;flex-direction:column;
  padding:var(--sp-4);
  background:var(--white);
  border:var(--border);
  box-shadow:var(--shadow-hard);
  transition:transform var(--dur-fast) var(--ease-snap),
             box-shadow var(--dur-fast) var(--ease-snap);
}
.card:hover{transform:translate(6px,6px);box-shadow:var(--shadow-press)}
.dark-card{background:var(--ink);color:var(--paper);transform:rotate(var(--card-tilt))}
.dark-card:hover{transform:rotate(var(--card-tilt)) translate(6px,6px)}
@media(min-width:900px){
  :root{--card-tilt:2deg}
}
/* Kaartnummer: groot, rechtsboven, in de flow — dus nooit over de kop heen */
.card-no{
  align-self:flex-end;
  font-family:var(--display);font-size:4rem;line-height:.8;
  letter-spacing:var(--tracking-display);
  color:var(--ink);opacity:.16;
  margin-bottom:var(--sp-3);
}
.dark-card .card-no{color:var(--lime);opacity:.5}
.card h3{
  font-family:var(--display);font-size:clamp(1.5rem, 1.1rem + 1.1vw, 2rem);
  text-transform:uppercase;letter-spacing:var(--tracking-display);
  line-height:.95;
  margin-bottom:var(--sp-3);
}
.ticks{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--step--1);line-height:1.45}
.ticks li{position:relative;padding-left:1.6rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:.7rem;height:.7rem;background:var(--blue);
}
.dark-card .ticks li::before{background:var(--lime)}
.card-meta{
  margin-top:auto;padding-top:var(--sp-3);
  border-top:2px solid currentColor;
  opacity:.75;
}

/* ============================================================
   04 — PROOF (cases, <details> zonder JS)
   ============================================================ */
.cases{border-top:var(--border)}
.case{border-bottom:var(--border);background:transparent;transition:background var(--dur-base) var(--ease-snap)}
.case[open]{background:var(--lime)}
.case summary{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:var(--sp-2) var(--sp-3);
  align-items:start;
  padding:var(--sp-4) 0;
  cursor:pointer;
  list-style:none;
  min-height:44px;
}
.case summary::-webkit-details-marker{display:none}
.case-no{font-family:var(--mono);font-size:var(--step-1);opacity:.5;line-height:1.1}
.case-main{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.case-name{
  font-family:var(--display);font-size:clamp(1.4rem, 1.1rem + 1.6vw, 2.75rem);
  text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:.95;
}
.case-line{font-size:var(--step--1);line-height:1.5;max-width:var(--measure)}
.case-line b{font-weight:800}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.tag{border:2px solid var(--ink);padding:.15rem .5rem;letter-spacing:.08em}
.case[open] .tag{border-color:var(--ink)}
.case-open{
  position:relative;width:32px;height:32px;flex:none;
  border:2px solid var(--ink);
  transition:background var(--dur-fast) var(--ease-snap);
}
.case-open::before,.case-open::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink);
  transform:translate(-50%,-50%);
}
.case-open::before{width:14px;height:2px}
.case-open::after{width:2px;height:14px;transition:transform var(--dur-fast) var(--ease-snap)}
.case[open] .case-open{background:var(--ink)}
.case[open] .case-open::before,.case[open] .case-open::after{background:var(--lime)}
.case[open] .case-open::after{transform:translate(-50%,-50%) scaleY(0)}
.case summary:hover .case-name{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.15em}

.case-detail{
  display:grid;gap:var(--sp-4);
  padding:0 0 var(--sp-6);
}
@media(min-width:900px){
  .case-detail{grid-template-columns:1.1fr .9fr;gap:var(--sp-6);padding-left:calc(var(--step-1) + var(--sp-3));align-items:start}
}
.case-text p + p{margin-top:var(--sp-3)}
.case-facts{
  margin-top:var(--sp-4);
  display:grid;gap:var(--sp-2);
  border-top:2px solid var(--ink);padding-top:var(--sp-3);
}
.case-facts > div{display:flex;gap:var(--sp-2);align-items:baseline}
.case-facts dt{
  font-family:var(--mono);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.12em;opacity:.7;
  min-width:6rem;
}
.case-facts dd{margin:0;font-weight:800;font-size:var(--step--1)}

/* Abstracte UI-weergave in merkkleuren — bewust geen namaak-screenshot */
.ui-frag{
  background:var(--ink);border:var(--border);
  box-shadow:var(--shadow-hard);
  padding:var(--sp-3);
  display:flex;flex-direction:column;gap:.6rem;
  min-height:220px;
}
.uf-bar{display:block;height:10px;background:var(--lime);width:38%}
.ui-frag i{display:block;background:var(--paper);opacity:.85}
.uf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.uf-stats i{height:38px;opacity:.35;border-left:4px solid var(--blue)}
.uf-rows{display:flex;flex-direction:column;gap:.4rem}
.uf-rows i{height:14px}
.uf-rows i:nth-child(1){width:92%}
.uf-rows i:nth-child(2){width:74%}
.uf-rows i:nth-child(3){width:83%;background:var(--lime);opacity:1}
.uf-rows i:nth-child(4){width:61%}
.ui-frag-b .uf-feed{display:flex;flex-direction:column;gap:.5rem}
.ui-frag-b .uf-feed i{height:34px;opacity:.3;border-left:4px solid var(--lime)}
.ui-frag-b .uf-side{display:flex;gap:.4rem;flex-wrap:wrap}
.ui-frag-b .uf-side i{height:12px;width:44px;background:var(--blue);opacity:1}
.ui-frag-d .uf-phase{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.ui-frag-d .uf-phase i{height:18px;opacity:.3}
.ui-frag-d .uf-phase i:nth-child(1),.ui-frag-d .uf-phase i:nth-child(2){background:var(--lime);opacity:1}
.ui-frag-d .uf-phase i:nth-child(4){background:var(--orange);opacity:.9}
.ui-frag-d .uf-rows i{height:16px}
.ui-frag-d .uf-rows i:nth-child(3){background:var(--orange);opacity:1;width:52%}
.ui-frag-c .uf-agenda{display:flex;flex-direction:column;gap:.5rem}
.ui-frag-c .uf-agenda i{height:22px;opacity:.3;border-left:14px solid var(--lime)}
.uf-cap{margin-top:auto;color:var(--paper);opacity:.6}

/* ============================================================
   GESCHEURDE RAND — waar een kleurvlak op het papier scheurt
   ============================================================ */
.tear{position:relative;height:clamp(1.1rem,2.2vw,1.9rem);margin-bottom:-1px;z-index:1}
/* De onderrand van het masker is één rij anti-aliasing breed. Liep die rij
   binnen het element, dan schemerde de lichte "van"-kleur erdoor als een
   streep. Door 4px door te lopen valt die rij achter de sectie eronder. */
.tear::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:-4px;
  -webkit-mask:var(--torn) repeat-x left bottom/auto 100%;
          mask:var(--torn) repeat-x left bottom/auto 100%;
}
/* van (achtergrond) → naar (de scheur zelf) */
.tear-statement{background:var(--paper)}
.tear-statement::before{background:var(--ink)}
.tear-contact{background:var(--paper-dim)}
.tear-contact::before{background:var(--blue)}
.tear-foot{background:var(--blue)}
.tear-foot::before{background:var(--ink)}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--paper);
  padding-block:clamp(3rem,8vw,8rem) clamp(4rem,10vw,10rem);
  border-bottom:var(--border);
}
.stat-six{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%) rotate(-6deg);
  height:170%;width:auto;color:var(--paper);opacity:.05;
  pointer-events:none;
}
.statement h2{position:relative}

/* ============================================================
   05 — HOW (proces)
   ============================================================ */
.steps{border-top:var(--border)}
.step{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-2) var(--sp-3);
  align-items:baseline;
  padding:var(--sp-4) var(--sp-3);
  border-bottom:var(--border);
  overflow:hidden;
}
@media(min-width:900px){
  .step{grid-template-columns:auto 1fr auto;align-items:center}
}
/* Lime-vlak schuift in vanaf links — geen padding-shift, geen layout-sprong */
.step::before{
  content:"";position:absolute;inset:0;background:var(--lime);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-base) var(--ease-snap);
  z-index:0;
}
.step:hover::before{transform:scaleX(1)}
.step > *{position:relative;z-index:1}
.step-no{font-family:var(--mono);font-size:var(--step-1);opacity:.5}
.step-body{display:flex;flex-direction:column;gap:.4rem}
.step-title{
  font-family:var(--display);font-size:var(--step-2);
  text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:.95;
}
.step-text{max-width:var(--measure);font-size:var(--step--1);line-height:1.5}
.step-time{
  font-family:var(--mono);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.12em;opacity:.7;
  grid-column:2;
}
@media(min-width:900px){
  .step-time{grid-column:3;text-align:right;white-space:nowrap}
}

/* ============================================================
   06 — WHO
   ============================================================ */
.who-body{display:grid;gap:var(--sp-6)}
@media(min-width:900px){
  .who-body{grid-template-columns:1.4fr .6fr;align-items:start}
  .who-body > *{margin-top:0}
}
.who-fig{
  border:var(--border);box-shadow:var(--shadow-hard);
  transform:rotate(-2deg);
  background:var(--white);
}
.who-plate{
  aspect-ratio:4/5;
  display:grid;place-items:center;
  background:var(--lime);
  background-image:radial-gradient(var(--ink) 1.5px, transparent 1.6px);
  background-size:9px 9px;
  border-bottom:var(--border);
}
.who-six{height:62%;width:auto;color:var(--ink)}
/* Slot voor het echte duotone-portret */
.portrait{width:100%;height:auto;filter:grayscale(1) contrast(1.6);border-bottom:var(--border)}
.who-fig figcaption{padding:.75rem 1rem;opacity:.75}

/* ============================================================
   07 — FAQ
   ============================================================ */
.faq{border-top:var(--border)}
.qa{border-bottom:var(--border)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) 0;min-height:44px;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:var(--step-1);
  text-transform:uppercase;letter-spacing:-.03em;line-height:1.1;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover span:first-child{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.15em}
.qa-mark{
  position:relative;flex:none;width:28px;height:28px;border:2px solid var(--ink);
}
.qa-mark::before,.qa-mark::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink);
  transform:translate(-50%,-50%);
}
.qa-mark::before{width:12px;height:2px}
.qa-mark::after{width:2px;height:12px;transition:transform var(--dur-fast) var(--ease-snap)}
.qa[open] .qa-mark{background:var(--lime)}
.qa[open] .qa-mark::after{transform:translate(-50%,-50%) scaleY(0)}
.qa-body{padding:0 0 var(--sp-4);max-width:var(--measure)}

/* ============================================================
   08 — CONTACT
   ============================================================ */
.sec-contact{
  background:var(--blue);color:var(--ink);
  padding-block:clamp(3rem,7vw,7rem) var(--section-y);
}
.sec-contact .sec-num{opacity:.75}
.contact-grid{display:grid;gap:var(--sp-6)}
@media(min-width:900px){
  .contact-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"head form" "cta form";
    grid-template-rows:auto 1fr;
    gap:var(--sp-6) var(--sp-8);align-items:start;
  }
  .contact-head{grid-area:head}
  .contact-form-wrap{grid-area:form}
  .six-cta{grid-area:cta;justify-self:start}
}
.contact-head > * + *{margin-top:var(--sp-4)}
.contact-head p{max-width:46ch}

/* De 6 als vorm van de contact-CTA */
.six-cta{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  min-height:44px;
  background:var(--lime);color:var(--ink);
  border:var(--border);box-shadow:var(--shadow-hard);
  padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  font-family:var(--display);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.15;
  transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap);
}
.six-cta svg{height:3.4rem;width:auto;color:var(--ink);flex:none}
.six-cta:hover,.six-cta:focus-visible{transform:translate(5px,5px);box-shadow:var(--shadow-press)}

.form{background:var(--paper);border:var(--border);box-shadow:var(--shadow-hard);padding:var(--sp-4);color:var(--ink)}
.field + .field{margin-top:var(--sp-3)}
.field label{
  display:block;margin-bottom:.4rem;
  font-family:var(--mono);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.12em;
}
.field input,.field textarea{
  width:100%;
  background:var(--white);
  border:var(--border);border-radius:var(--radius);
  padding:.8rem .9rem;
  font-size:var(--step-0);
  min-height:48px;
  transition:box-shadow var(--dur-fast) var(--ease-snap),border-color var(--dur-fast) var(--ease-snap);
}
.field textarea{resize:vertical;min-height:9rem;line-height:1.5}
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--ink);
  box-shadow:var(--shadow-hard-sm), inset 0 -4px 0 var(--lime);
}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.field.has-err input,.field.has-err textarea{border-color:var(--orange);box-shadow:4px 4px 0 var(--orange)}
.err{
  margin-top:.5rem;padding:.45rem .6rem;
  background:var(--orange);color:var(--ink);
  border:var(--border);
  font-size:var(--step--1);font-weight:800;line-height:1.35;
}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.btn-submit{margin-top:var(--sp-4);width:100%;justify-content:center;border-radius:0}
.form-note{margin-top:var(--sp-2);font-size:var(--step--1);font-weight:800;min-height:1.2em}
.form-note.is-err{color:var(--ink);background:var(--orange);border:var(--border);padding:.45rem .6rem}
.mail-fallback{display:inline-block;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:2px;font-weight:800}
.form-legal{margin-top:var(--sp-3);font-size:var(--step--1);opacity:.75}
.form-legal a{text-decoration:underline;text-underline-offset:.25em}

.sent{background:var(--paper);border:var(--border);box-shadow:var(--shadow-hard);padding:var(--sp-4);color:var(--ink)}
.sent-big{
  font-family:var(--display);font-size:var(--step-3);
  text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:var(--leading-display);
  margin:var(--sp-2) 0 var(--sp-3);
}
.sent p:last-child{max-width:44ch}
.sent a{text-decoration:underline;text-underline-offset:.25em}

.direct{margin-top:var(--sp-4);color:var(--ink);font-weight:700}
.direct a{
  background:var(--ink);color:var(--lime);
  padding:.6rem .7rem;display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;text-underline-offset:.25em;
}

@media(max-width:899px){
  /* Formulier vóór de tweede route — de 6-knop volgt eronder */
  .six-cta{justify-self:start}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--ink);color:var(--paper);padding-block:var(--sp-6) var(--sp-6)}
.foot-grid{display:grid;gap:var(--sp-4)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr .8fr .8fr .8fr;gap:var(--sp-6)}}
.foot-col{display:flex;flex-direction:column;gap:.2rem;align-items:flex-start}
.brand-foot .brand-six,.brand-foot .brand-word{color:var(--paper)}
.foot-tag{max-width:32ch;font-size:var(--step--1);opacity:.7}
.foot-h{opacity:.5;margin-bottom:.2rem}
.foot-col a{
  font-size:var(--step--1);min-height:44px;display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;
}
.foot-col a:hover{border-bottom-color:var(--lime)}
.foot-meta{font-family:var(--mono);font-size:var(--step--1);opacity:.5;text-transform:uppercase;letter-spacing:.12em}

/* ============================================================
   Scroll-reveal — alleen met JS, nooit content verbergen zonder
   ============================================================ */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--dur-reveal) var(--ease-snap),
             transform var(--dur-reveal) var(--ease-snap);
}
.js .reveal.is-in{opacity:1;transform:none}
.js .dark-card.reveal{transform:rotate(var(--card-tilt)) translateY(18px)}
.js .dark-card.reveal.is-in{transform:rotate(var(--card-tilt))}

/* Performance: secties onder de vouw pas renderen wanneer nodig */
@media(min-width:900px){
  .sec-how,.sec-who,.sec-faq{content-visibility:auto;contain-intrinsic-size:auto 900px}
}

/* ============================================================
   Rustig aan voor wie daarom vraagt
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .ticker-track{animation:none;transform:none}
  .lockup{animation:none;transform:none}
  .js .paint-stroke{animation:none;stroke-dashoffset:0}
  .js .paint-all{animation:none;opacity:1}
  .js .lockup-word{animation:none;opacity:1}
  .js .reveal{opacity:1;transform:none}
  .js .dark-card.reveal{transform:rotate(var(--card-tilt))}
  .btn:hover,.btn:focus-visible,.six-cta:hover,.six-cta:focus-visible{transform:none;box-shadow:var(--shadow-hard)}
  .card:hover{transform:none}
  .dark-card:hover{transform:rotate(var(--card-tilt))}
  .step::before{display:none}
  .step:hover{background:var(--lime)}
}

/* ============================================================
   Print
   ============================================================ */
@media print{
  .site-head,.ticker,.chips,.hero-art{display:none}
  body{background:#fff}
  .sec{padding-block:1rem;break-inside:avoid}
}