/* ==========================================================================
   ZWART (prototype, 17 oktober 2026): de homepage als één zwart vlak. Geen grijswit canvas meer; de secties
   die licht waren (Work, What we make, How a project runs) staan op hetzelfde zwart als de hero en de footer.
   Ligt bovenop tokens.css + site.css. Tekst wit, lijnen wit op 14 %, geel blijft het signaal.
   ========================================================================== */
:root {
  --canvas: #0B0B0A;
  --paper: #151514;
  --ink: #fff;
  --graphite: rgba(255,255,255,.5);
  --line: rgba(255,255,255,.14);
}
html, body { background: #0B0B0A; color: #fff; }
::selection { background: var(--signal); color: #0C0C0B; }
:focus-visible { outline-color: #fff; }

/* Menu: de witte pill blijft, dus de tekst erin blijft inkt */
.nav, .nav a, .nav .brand__name { color: #0C0C0B; }
.nav__links a:hover { background: rgba(12,12,11,.06); color: #0C0C0B; }
.nav__toggle i { background: #0C0C0B; }
.mobile-menu, .mobile-menu a:not(.btn) { color: #0C0C0B; }
.nav-wrap :focus-visible { outline-color: #0C0C0B; }

/* Gele knoppen houden zwarte tekst en een zwart pijlrondje */
.btn--signal, .btn--signal:hover { color: #0C0C0B; }
.btn--signal .btn__arrow { background: #0C0C0B; color: var(--signal); }
.btn__play svg { fill: #0C0C0B; }
/* Omlijnde knoppen op zwart */
.btn--outline-dark { color: #fff; border-color: rgba(255,255,255,.3); }
.btn--outline-dark:hover { border-color: #fff; }
.btn--outline-dark .btn__arrow { background: #fff; color: #0C0C0B; }
/* Geluidsknop */
.sound-toggle { border-color: rgba(255,255,255,.3); color: #fff; }
.sound-toggle:hover, .sound-toggle[aria-pressed="true"]:hover { border-color: #fff; }
.sound-toggle__eq { background: rgba(255,255,255,.1); }
.sound-toggle__eq i { background: #fff; }
.sound-toggle[aria-pressed="true"] { border-color: rgba(255,255,255,.3); }

/* Grijze lopende tekst wordt wit op 72 % */
.section__intro, .work__hint, .daw__caption p, .hero__lead { color: rgba(255,255,255,.72); }
.work__side .section__intro { color: #fff; }

/* Work: het haarlijnraster op zwart, logo's wit, hover een tint lichter zwart */
.brands { background: var(--line); }
.brands li { background: #0B0B0A; }
.bt img { filter: brightness(0) invert(1); opacity: .82; }
.bt__word { color: #fff; }
.bt:hover, .bt.is-active, .bt:focus-visible { background: #1A1A19; }
.bt__cta { color: #0C0C0B; }

/* What we make: index en monitor */
.cap__item { color: rgba(255,255,255,.45); }
.cap__item:hover, .cap__item.is-on { color: #fff; }
.cap__panel { background: #151514; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cap__title, .cap__desc { color: #fff; }
.cap__items li { background: rgba(255,255,255,.1); color: #fff; }
.cap__hear { color: #fff; }
.cap__hear-ico svg { fill: #0C0C0B; }
.cap__actions { border-top-color: var(--line); }

/* How a project runs: clips als donkere blokken, actieve clip geel met zwarte tekst, witte afspeelkop */
.clip { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); color: #fff; }
.clip b { color: #fff; }
.clip span { color: rgba(255,255,255,.55); }
.clip--open { background: linear-gradient(90deg, rgba(255,255,255,.08) 55%, rgba(255,255,255,0)); box-shadow: none; }
.clip.is-on { background: var(--signal); }
.clip.is-on b { color: #0C0C0B; }
.clip.is-on span { color: rgba(12,12,11,.72); }
.clip--open.is-on { background: linear-gradient(90deg, var(--signal) 55%, rgba(236,198,2,0)); }
.daw__head, .daw__head::before { background: #fff; }
.daw__ticks { background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 24)); border-bottom-color: var(--line); }
.track { border-bottom-color: var(--line); }
.daw__tracks { border-top-color: var(--line); }

/* Het vallende woord blijft wit op zwart */
.drop-fly { color: #fff; mix-blend-mode: normal; }

/* Footer: zelfde zwart, één haarlijn erboven zodat het einde leesbaar blijft */
.footer.wrap { border-top: 1px solid var(--line); margin-top: var(--section); }

/* ==========================================================================
   Uitwerking (17 okt, avond): één zwart vlak vraagt een ander ritme dan zwart-licht. Elke sectie begint op een
   haarlijn over de volle breedte, dezelfde lijn als de feitenrij, het raster, de index en de tijdlijn. Panelen
   (monitor, clips, kaarten) delen één hardware-tint met een ring van 8 % wit.
   ========================================================================== */
:root { --hardware-2: #161615; --ring: inset 0 0 0 1px rgba(255,255,255,.08); }
.section > .section__head, .section > .lp-head, .section > .sp-head { border-top: 1px solid var(--line); padding-top: clamp(22px, 2.4vw, 32px); }
.section { padding-top: clamp(120px, 13vw, 200px); }
.cap__panel { background: var(--hardware-2); box-shadow: var(--ring); }
.clip { background: var(--hardware-2); box-shadow: var(--ring); }
.clip--open { background: linear-gradient(90deg, var(--hardware-2) 55%, rgba(22,22,21,0)); box-shadow: none; }
.bt:hover, .bt.is-active, .bt:focus-visible { background: #1F1F1E; }

/* Services-pagina in het zwart: de kaarten als hardware-panelen op het zwarte vlak, hero en voet op hetzelfde zwart */
.kc, .kr { background: var(--hardware-2); box-shadow: var(--ring); }
.kc .kc__n, .kr .kc__n { border-color: rgba(255,255,255,.32); }
.lp-head p, .fit p { color: rgba(255,255,255,.72); }
.fit p { color: #fff; }
.fit a { color: #fff; }
.fit a:hover { color: var(--signal); }
.fit .fit__sub { color: rgba(255,255,255,.6); }
.fit .fit__sub:hover { color: #fff; }
.fit li, .fit__group li { border-top-color: var(--line); }
.op { box-shadow: none; }
.op__facts { border-color: var(--line); }

/* Lezer-ronde 1 (zwart): één systeem op beide pagina's. Een paneel is er alleen waar geluid speelt (monitor,
   clips, de drie kaarten met speler). De vier diensten zonder voorbeeld zijn haarlijnrijen op het zwart, zoals
   de index op de homepage. */
.kr { background: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--line); } /* zelfde binnenmarge als de panelen, zodat pill en tekst op dezelfde lijnen staan */
.kc-list > li:last-child .kr { border-bottom: 1px solid var(--line); }
.kc-list { gap: clamp(12px, 1.4vw, 20px); }
.kc-list > li + li .kr { margin-top: clamp(8px, 1vw, 16px); }

/* Regel-ronde 1 (zwart): alles wat op geel staat is zwart van tekst; feitlijnen op dezelfde lijn-token;
   de footerlijn op wrap-breedte zoals de sectielijnen; op telefoons blijft de dienstnaam het grootste woord */
.sound-toggle[aria-pressed="true"] .sound-toggle__eq i { background: #0C0C0B; }
.band.is-playing .band__play { color: #0C0C0B; }
.dot-play__wave i { background: #0C0C0B; }
.kc__n:hover, .kc__n:focus-visible, .kc.is-playing .kc__n { color: #0C0C0B; }
.kc__fgroup > div, .kr__fact, .kc__points, .kc__points li { border-color: var(--line); }
.footer.wrap { border-top: 0; }
.footer__card { border-top: 1px solid var(--line); }
@media (max-width: 760px) { .kc__big { font-size: clamp(36px, 11vw, 48px); } }

/* Sound on: de gele toestand terug (mijn eq-achtergrond overschreef hem), met zwarte balkjes */
.sound-toggle[aria-pressed="true"] .sound-toggle__eq { background: var(--signal); }

/* ==========================================================================
   Bugronde homepage zwart (17 okt, nacht, na "zwart design is goed, verbeter de bugs")
   ========================================================================== */
/* 1. Eén ritme: elke sectielijn staat even ver van wat erboven staat (de sectie-padding). Het statement had
      onder zich een eigen extra marge, waardoor er ruim 400 px leeg zwart boven Work stond. */
.statement--dark { padding-top: clamp(120px, 13vw, 200px); padding-bottom: 0; }
.footer.wrap { margin-top: clamp(120px, 13vw, 200px); }

/* 2. Ankers landen op de sectielijn, niet in de lege ruimte erboven: "Check our work" toont kop en het hele raster */
.section { scroll-margin-top: calc(-1 * clamp(120px, 13vw, 200px) + 8px); }

/* 3. De speler in de hero: de langste merknaam ("Vodafone · FamilyCards, TV campaign") past zonder puntjes;
      op telefoons staat de tijd rechts naast de naam in plaats van verloren op een eigen regel */
.band { grid-template-columns: auto 290px minmax(0, 1fr) auto; }
.band__name { white-space: normal; text-overflow: clip; line-height: 1.25; }
@media (max-width: 760px) {
  .band { grid-template-columns: auto minmax(0, 1fr) auto; }
  .band__time { grid-row: 1; grid-column: 3; align-self: end; padding-bottom: 2px; }
}

/* 4. Support loopt zacht uit, maar de tekst staat altijd op het dichte deel (in geel viel "them." weg in het zwart) */
.clip--open { background: linear-gradient(90deg, var(--hardware-2) 80%, rgba(22,22,21,0)); padding-right: 18%; }
.clip--open.is-on { background: linear-gradient(90deg, var(--signal) 80%, rgba(236,198,2,0)); }

/* 5. Mobiel menu: dicht wit zoals de menu-pill, zodat de hero er niet wazig doorheen schijnt */
.mobile-menu { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
/* Op telefoons is de clip een volle rij: geen uitloop (las als afgesneden), dezelfde ring als de andere clips */
@media (max-width: 760px) {
  .clip--open { background: var(--hardware-2); box-shadow: var(--ring); padding-right: 14px; }
  .clip--open.is-on { background: var(--signal); box-shadow: none; }
}
/* Telefoon: de tijd staat op de hoogte van "Listen", niet scheef onder een naam van twee regels */
@media (max-width: 760px) { .band__time { align-self: start; padding-bottom: 0; padding-top: 1px; } }

/* Regel-ronde 2 (homepage zwart): naam in de speler als merk + campagne; op telefoons onder elkaar, zonder losse middenpunt */
@media (max-width: 760px) {
  .band__sep { display: none; }
  .band__part { display: block; }
  .band__part + .band__sep + .band__part { font-weight: 400; color: rgba(255,255,255,.72); }
}

/* ==========================================================================
   Eén geheel (17 okt, nacht, gebruiker: "Haal deze horizontale strepen weg. Dat alles voelt als 1 geheel."):
   geen haarlijn meer boven de secties en boven de footer. Het ritme komt alleen uit de witruimte.
   Lijnen binnen een blok (speler, Work-raster, dienstenlijst, tijdlijn, footer-onderregel) blijven.
   ========================================================================== */
.section > .section__head, .section > .lp-head, .section > .sp-head { border-top: 0; padding-top: 0; }
.footer.wrap { margin-top: 0; }
.footer__card { border-top: 0; padding-top: clamp(120px, 13vw, 200px); }

/* Het ontwerpsysteem (componenten, maten, hoeken, letters) staat sinds 17 okt in systeem.css. */