/* ─── RESET & BASE ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:  #111111;
  --white:  #fafafa;
  --lime:   #c8f000;
  --grey:   #9a9a9a;
  --light:  #eceae4;
  --error:  #c0271e;
  --font-display: 'Clash Display', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Clash Display loopt maar tot 700. Alles wat "zwaarder" moet ogen gebruikt
     deze variabele, zodat de browser nergens faux-bold hoeft te synthetiseren
     (dat vervormt de letter zichtbaar). */
  --w-display: 700;

  --nav-h: 84px;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Anker-links moeten niet onder de vaste nav landen */
:where(section, footer)[id] { scroll-margin-top: var(--nav-h); }

/* Zichtbare focus voor toetsenbordgebruikers — de custom cursor verbergt
   anders elk idee van "waar ben ik". */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* ─── CUSTOM CURSOR ─────────────────────────────── */
/* Alleen op apparaten met een échte muis. Op touch bestaat er geen cursor om
   te vervangen; daar bleef de lime stip anders linksboven in beeld hangen. */
#cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }

  #cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 12px; height: 12px;
    background: var(--lime);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width .2s, height .2s, opacity .2s;
    /* Geen mix-blend-mode: difference meer. Over lime en witte vlakken (de
       verzendknop, de taalschakelaar) sloeg dat om naar een felblauwe schijf
       die de knoptekst onleesbaar maakte. */
    opacity: 0;
  }
  #cursor.ready { opacity: 1; }
  #cursor.expanded {
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--lime);
  }

  /* Tekstvelden houden hun caret — anders weet je niet waar je typt. */
  input, textarea { cursor: text; }
}

/* ─── NOISE OVERLAY ─────────────────────────────── */
#noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── NAV ────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 48px;
  min-height: var(--nav-h);
}

/* Waas achter de nav. De nav zweeft over de content; zonder deze laag liep het
   logo dwars door de koppen van methodology/categories/contact heen en was het
   daar onleesbaar. Boven aan de pagina blijft de nav bewust vrij. */
nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(17, 17, 17, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .35s ease, background .35s ease;
}
nav.nav--scrolled::before { opacity: 1; }
nav.nav--light::before { background: rgba(250, 250, 250, .85); }

.nav-logo {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--w-display);
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--white);
  text-transform: lowercase;
  transition: color .35s ease;
}
/* Woordmerk: witte "o" met een lime signatuurstip in de counter */
.nav-logo .o { position: relative; display: inline-block; color: inherit; }
.nav-logo .o::after {
  content: '';
  position: absolute;
  left: 50%; top: 56%;
  transform: translate(-50%, -50%);
  width: .2em; height: .2em;
  border-radius: 50%;
  background: var(--lime);
}

/* light-section state: dark nav over white backgrounds */
nav.nav--light .nav-logo { color: var(--black); }
nav.nav--light .nav-links a { color: var(--black); }
nav.nav--light .lang-switch button { color: var(--black); }
nav.nav--light .lang-switch .sep { color: var(--black); }
nav.nav--light .nav-toggle span { background: var(--black); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  opacity: .75;
  transition: opacity .2s, color .35s ease;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--lime);
  transition: width .3s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible { opacity: 1; }
.nav-links a:hover::after { width: 100%; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lang-switch button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  background: none;
  border: none;
  padding: 4px 2px;
  opacity: .6;
  transition: opacity .2s, color .35s ease;
}
.lang-switch button:hover { opacity: 1; }
.lang-switch button.active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.lang-switch .sep {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--white);
  opacity: .35;
}
@media (hover: hover) and (pointer: fine) {
  .lang-switch button { cursor: none; }
}

/* Hamburger — alleen zichtbaar op smalle schermen */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: none;
  border: none;
  padding: 10px 8px;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  transition: transform .3s ease, opacity .2s ease, background .35s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ─── HERO ─────────────────────────────────────── */
#hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* padding-top houdt de eyebrow vrij van de vaste nav; die stond eerst
     letterlijk áchter het logo. */
  padding: calc(var(--nav-h) + 20px) 48px 56px;
  position: relative;
  overflow: hidden;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 24px;
  opacity: 0;
}

.hero-headline {
  font-family: var(--font-display);
  /* Ook begrensd op viewport-hóógte: op een 1366×768-laptop liep de kop er
     anders bovenaan uit en verdween de tagline onder de vouw. */
  font-size: min(7.2vw, 12.5vh, 116px);
  font-weight: var(--w-display);
  line-height: .94;
  letter-spacing: -.03em;
  /* De woorden zijn losse inline-blocks; de spatie ertussen is smal in Clash
     Display en wordt door de negatieve letter-spacing nog verder ingekort.
     Zonder dit plakken "WE" en "DARE" aan elkaar. */
  word-spacing: .12em;
  text-transform: uppercase;
  max-width: 1100px;
}

.hero-headline .word {
  display: inline-block;
  overflow: hidden;
  /* Het masker voor de opkomst-animatie hoeft alleen de ONDERkant af te dekken
     (de letter start op translateY(110%)). Bij line-height .94 was de box
     smaller dan de letterhoogte, waardoor de apostrof in "don't" en "it'" er
     bovenaan afgesneden werd. Extra ruimte boven, gecompenseerd met een
     negatieve marge zodat de regelval gelijk blijft. */
  padding-top: .18em;
  margin-top: -.18em;
}
.hero-headline .word .inner {
  display: inline-block;
  transform: translateY(110%);
}

.hero-headline .highlight {
  position: relative;
  display: inline-block;
  /* Houdt het lime vlak van de aanhalingstekens ernaast af */
  margin: 0 .06em;
}
.hero-headline .highlight .fill {
  position: absolute;
  inset: -.05em -.05em;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
  border-radius: 2px;
}

.hero-sub {
  margin-top: clamp(20px, 3vh, 36px);
  font-size: 18px;
  color: var(--grey);
  max-width: 520px;
  opacity: 0;
  transform: translateY(20px);
}

.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: clamp(28px, 5vh, 64px);
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--w-display);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grey);
  opacity: 0;
}

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  background: none;
  border: none;
  color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .scroll-cue { cursor: none; }
}
.scroll-cue span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grey);
}
.scroll-arrow {
  width: 1px;
  height: 60px;
  background: var(--grey);
  margin-left: auto;
  transform-origin: top;
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(1); opacity: .4; }
  50%  { transform: scaleY(.3); opacity: 1; }
  100% { transform: scaleY(1); opacity: .4; }
}

/* ─── SECTIONS: SHARED ───────────────────────────── */
section {
  padding: 160px 48px;
  position: relative;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-label::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--lime);
  flex-shrink: 0;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 88px);
  font-weight: var(--w-display);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

/* Clash Display heeft een smalle woordspatie; samen met de negatieve
   letter-spacing die deze koppen strak maakt, plakten woorden aan elkaar
   ("INONESENTENCE"). Alles wat de display-letter gebruikt krijgt daarom wat
   extra lucht tussen de woorden terug. */
h2,
.manifesto-big,
.method-title,
.cat-label,
.strikethrough-list li,
.proof-value,
.form-success h3,
.submit-btn,
.hero-tagline {
  word-spacing: .1em;
}

/* ─── SECTION: MANIFESTO ─────────────────────────── */
#manifesto {
  background: var(--black);
  border-top: 1px solid #1a1a1a;
}

.strikethrough-list {
  margin: 80px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.strikethrough-list li {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: var(--w-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #8a8a8a;
  padding: 20px 0;
  border-bottom: 1px solid #1a1a1a;
  position: relative;
  overflow: hidden;
  transition: color .4s;
}
.strikethrough-list li .line {
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 2px;
  background: #e04b41;
  transform: translateY(-50%);
  transition: width .6s cubic-bezier(.77,0,.175,1);
}
/* Doorgestreept, maar nog wel te lezen — op #404040 waren deze woorden op een
   normaal scherm praktisch onzichtbaar (contrast 1.8:1). */
.strikethrough-list li.struck { color: #5e5e5e; }
.strikethrough-list li.struck .line { width: 100%; }

.manifesto-body {
  margin-top: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.manifesto-big {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: var(--w-display);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.manifesto-big .hl {
  background: var(--lime);
  color: var(--black);
  padding: 0 8px;
  display: inline;
}
.manifesto-text {
  font-size: 18px;
  line-height: 1.7;
  color: var(--grey);
  padding-top: 12px;
}
.manifesto-text strong { color: var(--white); }

/* ─── SECTION: METHODOLOGY ───────────────────────── */
#methodology {
  background: var(--white);
  color: var(--black);
}
#methodology .section-label { color: var(--black); }
#methodology .section-label::before { background: var(--black); }
#methodology h2 { color: var(--black); }
#methodology .manifesto-text { color: #555; }
#methodology .manifesto-text strong { color: var(--black); }

.method-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: #ccc;
}

.method-card {
  background: var(--white);
  padding: 48px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.method-card:hover { background: var(--lime); }
.method-card:hover .method-num { color: var(--black); opacity: 1; }
.method-card:hover .method-title { color: var(--black); }
.method-card:hover .method-desc { color: #333; }

.method-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: #6b6b6b;      /* was #9a9a9a op .6 opacity → 1.7:1, onleesbaar */
  margin-bottom: 20px;
}
.method-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--w-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 16px;
  line-height: 1;
}
.method-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #666;
}

/* Verdict buttons */
.verdict-row {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.verdict-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  color: var(--black);
  transition: all .2s;
}
@media (hover: hover) and (pointer: fine) {
  .verdict-btn { cursor: none; }
}
.verdict-btn.active, .verdict-btn:hover { background: var(--black); color: var(--lime); border-color: var(--black); }

/* proof bar */
.proof-bar-wrap {
  margin-top: 24px;
}
.proof-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: #666;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.proof-bar-bg {
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  overflow: hidden;
}
.proof-bar-fill {
  height: 100%;
  background: var(--black);
  border-radius: 2px;
  width: 0;
  transition: width 1.5s cubic-bezier(.77,0,.175,1);
}
.proof-value {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--w-display);
  letter-spacing: -.03em;
  margin-top: 8px;
}

/* ─── SECTION: CATEGORIES ─────────────────────────────────────── */
#categories {
  background: var(--black);
  border-top: 1px solid #1a1a1a;
  padding: 120px 0 0; /* no side padding — grid bleeds to edges */
}
#categories .cat-header {
  padding: 0 48px 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
#categories .cat-header-left { flex: 1; min-width: 0; }
#categories .cat-header-right {
  /* flex-shrink:0 op een vaste 380px duwde deze tekst op mobiel tot x=691 in een
     375px-viewport — hij werd door overflow-x:hidden gewoon afgekapt. */
  flex: 0 1 380px;
  min-width: 0;
  font-size: 15px;
  color: var(--grey);
  line-height: 1.65;
  padding-bottom: 6px;
}

/* 3×2 full-bleed grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #111;
}

/* Every card is a video card */
.cat-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
@media (hover: hover) and (pointer: fine) {
  .cat-card { cursor: none; }
}

/* Video */
.cat-video {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
  background: #0b0b0b;
  transition: opacity .6s ease, transform .8s cubic-bezier(.25,.46,.45,.94);
}
.cat-card:hover .cat-video {
  opacity: .8;
  transform: scale(1.04);
}

/* Content overlay — always at bottom */
.cat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.5)  40%,
    rgba(0,0,0,.1)  70%,
    transparent     100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 36px;
  transition: background .4s;
}

/* Lime top bar */
.cat-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 100%;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.77,0,.175,1);
}
.cat-card:hover .cat-bar { transform: scaleX(1); }

/* Number */
.cat-num {
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.45);
  transition: color .3s;
}
.cat-card:hover .cat-num { color: var(--lime); }

/* Label */
.cat-label {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: var(--w-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0;
  transition: margin-bottom .35s cubic-bezier(.77,0,.175,1);
}
.cat-card:hover .cat-label { margin-bottom: 12px; }

/* Opinion — hidden below, slides up on hover */
.cat-opinion {
  font-size: 13px;
  color: #ccc;
  line-height: 1.55;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s cubic-bezier(.77,0,.175,1),
              opacity .35s ease .1s;
}
.cat-card:hover .cat-opinion {
  max-height: 80px;
  opacity: 1;
}

/* Brands */
.cat-brands {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s cubic-bezier(.77,0,.175,1) .05s,
              opacity .35s ease .15s;
}
.cat-card:hover .cat-brands {
  max-height: 30px;
  opacity: 1;
}

/* Op touch bestaat :hover niet — daar bleven de mening én de merken permanent
   verborgen, terwijl dat juist de inhoud van deze kaarten is. */
@media (hover: none) {
  .cat-label { margin-bottom: 12px; }
  .cat-opinion, .cat-brands { max-height: none; opacity: 1; }
  .cat-bar { transform: scaleX(1); }
}

/* Disclaimer below grid */
.cat-disclaimer {
  padding: 24px 48px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: #7c7c7c;   /* was #2a2a2a op #111 → 1.3:1, feitelijk onzichtbaar */
  text-transform: uppercase;
}

/* ─── SECTION: CONTACT ───────────────────────────── */
#contact {
  background: var(--black);
  border-top: 1px solid #1a1a1a;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 160px 48px;
  align-items: start;
}

.contact-left h2 { margin-top: 24px; }
/* :not(.section-label) is hier het punt — zonder die uitzondering kreeg het
   labeltje "Het bedrijf" ook 16px/grijs/24px-marge mee. Daardoor stond het
   groter én 24px lager dan het identieke label in de rechterkolom. */
.contact-left > p:not(.section-label) {
  margin-top: 24px;
  font-size: 16px;
  color: var(--grey);
  line-height: 1.7;
}

.company-table {
  margin-top: 48px;
  border-top: 1px solid #1a1a1a;
}
.company-row {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #1a1a1a;
  font-size: 14px;
}
.company-row dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
  min-width: 132px;
  flex-shrink: 0;
  padding-top: 2px;
}
.company-row dd { color: var(--white); }
.company-row dd a {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.company-row dd a:hover { border-bottom-color: var(--lime); }
.company-row dd .addr-line { display: block; }

/* Form */
/* padding-top hield de rechterkolom 16px hoger dan de linker; beide kolommen
   beginnen nu op dezelfde lijn. */
.contact-right { padding-top: 0; }

.form-group {
  margin-bottom: 32px;
  position: relative;
}
.form-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grey);
  display: block;
  margin-bottom: 12px;
}
.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #3a3a3a;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 18px;
  padding: 12px 0;
  outline: none;
  transition: border-color .3s;
}
.form-input:focus { border-bottom-color: var(--lime); }
/* #333 op #111 was 1.5:1 — de hint was in de praktijk niet te lezen.
   #818181 haalt 4,5:1 en blijft duidelijk lichter dan de ingevulde tekst. */
.form-input::placeholder { color: #818181; opacity: 1; }

textarea.form-input {
  resize: vertical;
  min-height: 120px;
  display: block;
}

.form-underline {
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  width: 0;
  background: var(--lime);
  transition: width .4s cubic-bezier(.77,0,.175,1);
}
.form-input:focus ~ .form-underline { width: 100%; }

.submit-btn {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--w-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--lime);
  color: var(--black);
  border: none;
  padding: 20px 48px;
  width: 100%;
  transition: background .2s, transform .1s;
  position: relative;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .submit-btn { cursor: none; }
  .submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white);
    transform: translateX(-100%);
    transition: transform .4s cubic-bezier(.77,0,.175,1);
  }
  .submit-btn:hover::before { transform: translateX(0); }
}
.submit-btn:disabled { opacity: .6; }
.submit-btn span { position: relative; z-index: 1; }
.submit-btn:active { transform: scale(.98); }

.form-success {
  display: none;
  text-align: center;
  padding: 48px;
}
.form-success.visible { display: block; }
.form-success h3 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--w-display);
  text-transform: uppercase;
  color: var(--lime);
}

.form-error {
  display: none;
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid #c0271e;
  color: #ff8a80;
  font-size: 14px;
  border-radius: 2px;
}
.form-error.visible { display: block; }

/* Alleen zichtbaar als JavaScript uitstaat — zie het <noscript>-blok in de head */
.noscript-note {
  display: none;
  margin-top: 20px;
  font-size: 14px;
  color: var(--grey);
}
.noscript-note a { color: var(--lime); }

/* Honeypot field — hidden from real visitors, bots tend to fill it in */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ─── FOOTER ─────────────────────────────────────── */
footer {
  padding: 40px 48px;
  border-top: 1px solid #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--w-display);
  letter-spacing: -.01em;
  text-transform: lowercase;
  color: var(--white);
  opacity: .65;
}
.footer-logo .o { position: relative; display: inline-block; }
.footer-logo .o::after {
  content: '';
  position: absolute;
  left: 50%; top: 56%;
  transform: translate(-50%, -50%);
  width: .2em; height: .2em;
  border-radius: 50%;
  background: var(--lime);
}
.footer-links {
  display: flex;
  gap: 32px;
  list-style: none;
  flex-wrap: wrap;
}
.footer-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);   /* was .5 opacity → 2.6:1 */
  text-decoration: none;
  transition: color .2s;
}
.footer-links a:hover { color: var(--white); }
.footer-legal {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: #7c7c7c;
  text-transform: uppercase;
  width: 100%;
  padding-top: 8px;
}

/* ─── HORIZONTAL MARQUEE ─────────────────────────── */
.marquee-section {
  border-top: 1px solid #141414;
  border-bottom: 1px solid #141414;
  overflow: hidden;
  background: var(--black);
}
.marquee-section:hover .marquee-track { animation-play-state: paused; }

.marquee-row {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-row.row-top { padding: 20px 0 3px; }
.marquee-row.row-bot { padding: 3px 0 20px; }

.marquee-track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
}
.marquee-track.ltr { animation: marquee-l 30s linear infinite; }
.marquee-track.rtl { animation: marquee-r 24s linear infinite; }
@keyframes marquee-l { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.marquee-word {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(24px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 0 .42em;
  color: var(--white);
  transition: color .3s ease, -webkit-text-stroke-color .3s ease;
}
.marquee-word.ghost {
  color: transparent;
  -webkit-text-stroke: 1.2px #707070;
}
.row-top .marquee-track:hover .marquee-word:hover { color: var(--lime); }
.row-top .marquee-track:hover .marquee-word.ghost:hover { color: transparent; -webkit-text-stroke: 1.2px var(--lime); }
.marquee-star {
  display: inline-flex;
  width: clamp(7px, 0.9vw, 11px);
  height: clamp(7px, 0.9vw, 11px);
  margin: 0 .55em;
  background: var(--lime);
  opacity: .42;
  transform: rotate(45deg);
  border-radius: 2px;
}

.marquee-mantra {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9e9e9e;
  padding: 0 1.6em;
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.marquee-mantra .arrow { color: var(--lime); opacity: .85; }
.marquee-mantra.hot { color: var(--light); }

/* ─── ANIMATE IN: GENERIC ────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
}

/* ─── PROGRESS BAR ────────────────────────────────── */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--lime);
  z-index: 200;
  transform-origin: left;
  transform: scaleX(0);
  width: 100%;
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 900px) {
  #categories .cat-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  #categories .cat-header-right { flex: 0 1 auto; max-width: 560px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --nav-h: 68px; }

  nav { padding: 14px 24px; }
  nav::before { opacity: 1; }   /* mobiel altijd een waas: de nav ligt dichter op de content */

  .nav-toggle { display: flex; }
  .nav-right { gap: 16px; }

  /* Uitklapmenu */
  .nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(17, 17, 17, .97);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    padding: 8px 24px 24px;
    border-bottom: 1px solid #262626;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links li { border-bottom: 1px solid #202020; }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a {
    display: block;
    padding: 18px 0;
    font-size: 13px;
    color: var(--white);
    opacity: 1;
  }
  /* In het uitklapmenu staat de tekst altijd op donker, ook boven witte secties */
  nav.nav--light .nav-links a { color: var(--white); }

  #hero { padding: calc(var(--nav-h) + 16px) 24px 40px; }
  .hero-headline { font-size: clamp(44px, 17vw, 68px); }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 28px; }
  .scroll-cue { align-items: flex-start; }
  .scroll-arrow { margin-left: 0; height: 40px; }

  section { padding: 100px 24px; }
  #categories { padding: 90px 0 0; }
  #categories .cat-header { padding: 0 24px 40px; }
  .cat-disclaimer { padding: 24px 24px 0; }

  .manifesto-body { grid-template-columns: 1fr; gap: 40px; margin-top: 64px; }
  .method-grid { grid-template-columns: 1fr; }
  .method-card { padding: 32px 24px; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-overlay { padding: 24px; }

  /* Smalle schermen zijn vrijwel altijd touch. Naast de (hover: none)-regels
     hierboven zetten we de mening en de merken hier óók open, zodat de inhoud
     er sowieso staat — ook op een smal gemaakt bureaubladvenster. */
  .cat-label { margin-bottom: 12px; }
  .cat-opinion, .cat-brands { max-height: none; opacity: 1; }
  .cat-bar { transform: scaleX(1); }

  #contact { grid-template-columns: 1fr; padding: 100px 24px; gap: 64px; }
  .company-row { flex-direction: column; gap: 6px; }
  .company-row dt { min-width: 0; }

  footer { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 24px; }
  .footer-links { gap: 20px; }
}

/* ─── REDUCED MOTION ─────────────────────────────── */
/* Bezoekers die in hun systeem "verminder beweging" aanzetten, krijgen geen
   eindeloos schuivende marquee of pulserende pijl meer. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .marquee-track.ltr,
  .marquee-track.rtl { animation: none; transform: none; }
  .marquee-row {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .scroll-arrow { animation: none; opacity: .6; }

  /* Zonder animatie moet alles wat GSAP normaal invaart gewoon zichtbaar zijn */
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-eyebrow, .hero-sub, .hero-tagline, .scroll-cue { opacity: 1 !important; transform: none !important; }
  .hero-headline .word .inner { transform: none !important; }
  .hero-headline .highlight .fill { transform: scaleX(1) !important; }
  .method-card, .cat-card { opacity: 1 !important; transform: none !important; }
}

/* ─── PRINT ──────────────────────────────────────── */
@media print {
  #cursor, #noise, #progress-bar, nav, .marquee-section, .scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}