/* ==========================================================================
   SYSTEEM (17 okt 2026): de goedgekeurde specificatie als één componentlaag.
   Laadt als laatste, na zwart.css en de paginabestanden. Paginabestanden maken geen eigen varianten van
   een onderdeel; afwijken = hier aanpassen, voor alle pagina's tegelijk. Specificatie: AFSPRAKEN.md,
   blok "Ontwerpsysteem". Overzicht met voorbeelden: voorstellen/systeem.html. Controle: systeem-check.js.
   ========================================================================== */
:root {
  /* Letters: vijf stappen Funnel Display (waarde op 1440 px tussen haakjes) */
  --t-1: clamp(44px, 6vw, 104px);   /* (86) H1, groot feit, afsluiter boven de footer */
  --t-2: clamp(30px, 3.6vw, 56px);  /* (52) H2, dienstnaam */
  --t-3: clamp(21px, 2vw, 30px);    /* (29) H3, klein feit */
  --t-4: clamp(19px, 1.6vw, 24px);  /* (23) tussenkop */
  --t-5: 18px;                      /* woordmerk in het menu */
  --mono: 12.5px;                   /* Geist Mono: één maat */
  /* Kleur en vlak */
  --line: rgba(255,255,255,.14);    /* één lijnkleur */
  --panel: #161615;                 /* paneel = waar geluid speelt */
  --ring: inset 0 0 0 1px rgba(255,255,255,.08);
  --r-panel: 32px;                  /* hoeken: pil/cirkel voor bediening, 32 voor panelen, de rest recht */
  /* Ritme */
  --space-section: clamp(120px, 13vw, 200px); /* (187) */
}

/* Rasterlijnen per vak: elke tegel tekent zijn eigen rechter- en onderlijn. Een lege plek blijft zwart
   (was: grijs, omdat de lijnen de achtergrond van het hele raster waren). */
.brands { background: none; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.brands li { background: #0B0B0A; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Case-tegel, één vorm: recht; aanwijzen = lichter vlak + "View case". Geen krimp, geen hoekwissel, geen golfvorm. */
.bt, .bt:hover, .bt.is-active, .bt:focus-visible { border-radius: 0; transform: none; }
.bt:hover, .bt.is-active, .bt:focus-visible { background: #1F1F1E; }
.bt__wave { display: none; }
/* Secundaire knop: rand 25 %, wit rondje (pijl of play) zoals het play-rondje op de homepage */
.btn--outline-light, .btn--outline-dark { border-color: rgba(255,255,255,.25); }
.btn--outline-light .btn__arrow, .btn--outline-dark .btn__arrow { background: #fff; color: #0C0C0B; }
/* Mono: één maat */
.op__facts dt, .crumbs, .bt__now, .label { font-size: 12.5px; }
/* Tekstlogo's even helder als de beeldlogo's in het raster */
.brands--8 .bt__word { opacity: 1; }
/* Feitenrij met drie losse feiten: op telefoons onder elkaar (twee kolommen lieten een gat naast het derde feit) */
@media (max-width: 600px) { .op__facts:not(.op__facts--grid) { grid-template-columns: 1fr; } }

/* ---------- Case-tegel met bijschrift (Work = de index): klant + korte titel altijd onder het logo ---------- */
.wk-grid .bt__now { display: grid; gap: 3px; right: 16px; align-items: start; }
.wk-now__client { color: #fff; }
.wk-now__title { color: rgba(255,255,255,.62); }


.wk-grid .bt__word { font-size: clamp(20px, 2vw, 28px); }
/* Bijschrift altijd zichtbaar (akkoord 17 okt: Work is de index; zonder muis zie je waar elke case over gaat).
   Vaste logozone bovenin, klant + titel eronder in de doorloop, zodat lange namen nooit een logo raken.
   Aanwijzen doet alleen nog: lichter vlak + "View case" (het logo schuift niet meer). */
.wk-grid li { display: grid; }
.wk-grid .bt { aspect-ratio: auto; grid-template-rows: clamp(120px, 12vw, 180px) auto; align-content: start; padding: 26px 0 18px; }
.wk-grid .bt > img, .wk-grid .bt .bt__duo, .wk-grid .bt .bt__word { align-self: center; justify-self: center; }
.wk-grid .bt__now { position: static; justify-self: stretch; padding: 0 16px; opacity: 1; transform: none; }
.wk-grid .bt:hover > img, .wk-grid .bt.is-active > img, .wk-grid .bt:focus-visible > img,
.wk-grid .bt:hover .bt__duo, .wk-grid .bt.is-active .bt__duo, .wk-grid .bt:focus-visible .bt__duo { transform: none; }
@media (max-width: 600px) { .wk-grid .bt { grid-template-rows: clamp(104px, 28vw, 160px) auto; padding: 0 0 14px; } }
@media (max-width: 600px) {
  .wk-grid .bt__now { right: 10px; padding: 0 10px; }
  .wk-grid .bt__word { font-size: 18px; }
}
/* Feitenrij: dienstlinks (interne links naar de dienstpagina's) */
.op__facts dd a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 4px; }
.op__facts dd a:hover { text-decoration-color: var(--signal); }

/* Peckham BMX: tekstlogo zoals in de logomuur van de homepage (.wl--peckham), op tegelmaat */
.wk-word--peckham { display: inline-flex; align-items: center; gap: .3em; font-style: normal; letter-spacing: -.01em; font-stretch: condensed; }
.wk-word--peckham b { padding: .08em .28em 0; border: 3px solid currentColor; border-radius: 6px; font-weight: 800; }
@media (max-width: 600px) { .wk-grid .bt__word.wk-word--peckham { font-size: 15px; } .wk-word--peckham b { border-width: 2px; } }

/* Brede woordmerken (Tommy Hilfiger) mogen breder, anders worden ze op een telefoon een streepje */
.wk-grid .bt img.wk-wide { max-width: 84%; }
/* Actief menu-item: één tint */
.nav__links a[aria-current="page"] { background: rgba(12,12,11,.06); }

/* ---------- Letters ---------- */
.op__title, .hx__title, .footer__title, .kc__big { font-size: var(--t-1); }
/* Telefoon: de homepage-H1 is de langste kop van de site en moet binnen 375 px passen */
@media (max-width: 600px) { .hx__title { font-size: clamp(34px, 10.2vw, 44px); } }
.h2, .kc__name, .kr__name { font-size: var(--t-2); }
.kr__big { font-size: var(--t-3); }
.label, .crumbs, .op__facts dt, .bt__now, .kc__time, .kc__fact dt, .kr__fact dt, dt,
.kc .label, .kc .label span, .footer__bottom, .footer__bottom *, .band__label, .cap__items li, .track__name { font-size: var(--mono); }
.cap__item, .cap__title { font-size: var(--t-3); }
.fit p { font-size: var(--t-4); }
.clip b { font-size: 15px; }

/* ---------- Hoeken: pil/cirkel = bediening, 32 = paneel waar geluid speelt, de rest recht ---------- */
.kc, .cap__panel, .trk { border-radius: var(--r-panel); }
.clip, .clip.is-on, input, textarea, select, .case2__media.bt { border-radius: 0; }

/* ---------- Knoppen: drie soorten ---------- */
/* 1 Primair geel en 2 secundair omlijnd: alleen 42 (--sm) of 60 (--lg). De oude middenmaat (50) wordt 42. */
.btn:not(.btn--sm):not(.btn--lg) { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn:not(.btn--sm):not(.btn--lg) .btn__arrow { width: 26px; height: 26px; margin-right: -10px; font-size: 13px; }
.sound-toggle { min-height: 42px; height: 42px; }
/* 3 Rond icoon: één maat 52, rand 30 %, aanwijzen = witte rand + 6 % groter, spelen = geel (ook de play in de spelerrij van een paneel) */
.band__play, .tl__play, .stories__btn, .trk__play, .kc__play { width: 52px; height: 52px; border-color: rgba(255,255,255,.3); }
.band__play:hover, .tl__play:hover, .stories__btn:hover, .trk__play:hover, .kc__play:hover, .kc__play:focus-visible { border-color: #fff; transform: scale(1.06); }

/* ---------- Feitenblokken in kaarten: label en tekst bovenaan uitlijnen (een lang feit duwde het label ernaast omlaag) ---------- */
.kr__facts > div, .kc__fgroup > div, .op__facts > div { align-content: start; }

/* ---------- Dienstkaarten (paneel en lijnrij): één kolom; het nummer is een mono-label boven de naam ---------- */
.kc, .kr { grid-template-columns: minmax(0, 1fr); }
.kc > *, .kr > *, .kc > :not(.kc__n), .kr > :not(.kc__n) { grid-column: 1; } /* ook de oude regel uit standaard.css (kolom 2) overschrijven: die maakte een lege eerste kolom, waardoor de kaartinhoud 29 px inspringt (live 18 okt, akkoord gebruiker) */
.kc__head, .kr__head .kc__num { display: grid; gap: 12px; }
.kc__num { margin: 0; color: rgba(255,255,255,.5); }
.kr__head .kc__num { margin-bottom: 12px; }
/* Spelerrij in het paneel: dezelfde opbouw als de speler op de homepage (rond play, naam, golfvorm, tijd),
   zodat meteen te zien is dat je het voorbeeld kunt afspelen. Geel alleen tijdens spelen. */
.kc__player { display: grid; grid-template-columns: auto minmax(180px, 300px) minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kc__play { height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; transition: transform .3s var(--ease), border-color .25s, background .25s, color .25s; }
.kc__play svg { width: 18px; height: 18px; fill: currentColor; grid-area: 1 / 1; }
.kc__play .kc__ico--play { margin-left: 2px; }
.kc__play .kc__ico--pause { display: none; }
.kc__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.kc.is-playing .kc__play { background: var(--signal); border-color: var(--signal); color: #0C0C0B; box-shadow: 0 0 0 7px rgba(236,198,2,.16); }
.kc.is-playing .kc__play .kc__ico--play { display: none; }
.kc.is-playing .kc__play .kc__ico--pause { display: block; }
.kc__pmeta { display: grid; gap: 5px; min-width: 0; }
.kc__pmeta .label { margin: 0; color: rgba(255,255,255,.5); }
.kc__pname { font-weight: 500; font-size: 15px; line-height: 1.35; color: #fff; }
.kc__player .kc__wave { height: 52px; margin: 0; }
.kc__player .kc__time { margin: 0; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  .kc__player { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 16px; }
  .kc__player .kc__wave { grid-column: 1 / -1; grid-row: 2; height: 44px; }
}
/* Sectiekop en keuzelijst op de gewone linkerlijn (geen inspringing meer naar een nummerkolom) */
.lp-head, .fit__foot { margin-left: 0; margin-right: 0; }

/* ---------- Lijst van dienstkaarten: overal dezelfde ruimte tussen twee items, of het nu een paneel of een lijnrij is ---------- */
.kc-list { gap: clamp(28px, 3vw, 44px); }
.kc-list > li + li .kr { margin-top: 0; }
.kc-list .kr { padding-bottom: 0; }
/* Sectiekop met intro: de intro op dezelfde rechterkolom als de kaarten */
.lp-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); }
@media (max-width: 1000px) { .lp-head { grid-template-columns: minmax(0, 1fr); } } /* stapelen zoals theme.css; de regel hierboven overschreef dat (17 okt) */
/* Tekstlinks met pijl: de pijl blijft achter het laatste woord, ook als de link afbreekt */
.kc__links a, .kr__foot a, .fit li a { display: inline; }
.kc__links a span:last-child, .kr__foot a span:last-child, .fit li a span:last-child { display: inline-block; margin-left: 6px; }

/* ---------- Ritme: één sectie-afstand; de hero (.op/.hx) houdt zijn eigen bovenruimte (180) ---------- */
main .section.section, .op + .section { padding-top: var(--space-section); }
@media (max-width: 600px) { .bt__cta { font-size: 13px; } }

/* ---------- Diensten: één kaart per dienst (17 okt, laat: "maak voor alles zo'n kaart … maak alles gelijk") ----------
   Elke dienst is een paneel met spelerrij. Eén onderindeling voor alle kaarten: feiten links (twee per rij),
   "Good for" en de links rechts, op één lijn. Zo blijft er geen lege kolom over, ook bij twee feiten. */
.kc__low { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px var(--col); align-items: start; }
.kc__low .kc__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.kc__low .kc__fgroup { display: contents; }
.kc__low .kc__bot { align-self: end; } /* onderin, gelijk met de laatste feitenrij: zo blijft er bij vier feiten geen leeg vak rechtsonder (familie-toets 17 okt) */
@media (max-width: 1000px) { .kc__low { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .kc__low .kc__facts { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* Dienstkaart: de link naar de dienstpagina is de omlijnde pil van de homepage ("Explore"), met de zoekwoord-ankertekst (18 okt) */
.kc__links .btn { display: inline-flex; align-items: center; max-width: 100%; }
.kc__links .btn .btn__arrow { margin-left: 0; display: inline-grid; flex: none; }
.kc__links .btn:hover .btn__arrow { transform: none; }
@media (max-width: 760px) { .kc__links .btn { white-space: normal; text-align: left; height: auto; min-height: 42px; padding-top: 7px; padding-bottom: 7px; line-height: 1.3; } }

/* ---------- Case-pagina (18 okt): hero zoals Services; daarna één doorlopend blok: paneel (alleen met geluid), verhaal in rijen, volgende case ---------- */
.cs { --col: clamp(32px, 4vw, 64px); display: grid; gap: clamp(44px, 5vw, 72px); }
.cs .cs__track { display: block; padding: clamp(18px, 2vw, 28px) clamp(24px, 3.4vw, 52px); }
.cs .cs__track .kc__player { border-top: 0; border-bottom: 0; padding: 0; }
.cs__story { display: grid; }
.cs__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px var(--col); padding: 28px 0 32px; border-top: 1px solid var(--line); align-items: start; }
.cs__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--t-3); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.cs__text { margin: 0; color: rgba(255,255,255,.74); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; max-width: 40ch; }
.cs__row > .cs__track { grid-column: 1 / -1; margin-top: 8px; padding: clamp(14px, 1.6vw, 20px) clamp(20px, 2.6vw, 36px); } /* speler in een verhaalrij (21 okt, branchepagina's): over de volle breedte onder de rij, zoals de trackrij op case-pagina's (golfvorm leesbaar) */
.cs__row > .cs__track .kc__player { border-top: 0; border-bottom: 0; padding: 0; }
.cs__row--more { align-items: center; }
.cs__row--more .label { margin: 0; color: rgba(255,255,255,.5); }
.cs__row--more .btn { display: inline-flex; align-items: center; }
.cs__story > .cs__row:first-child { border-top: 0; padding-top: 0; } /* geen lijn die als sectielijn leest (familie-toets 18 okt) */
.cs-next { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px var(--col); align-items: center; } /* zelfde paar als de Service-rij: label links, pil op de tekstkolom */
.cs-next > :last-child { justify-self: start; }
.cs-next .label { margin: 0; color: rgba(255,255,255,.5); }
.cs-next .btn { display: inline-flex; align-items: center; }
@media (max-width: 760px) {
  .cs__row { grid-template-columns: minmax(0, 1fr); padding: 22px 0 26px; }
  .cs__row > .cs__track { grid-column: 1; }
  .cs-next { grid-template-columns: minmax(0, 1fr); }
}
/* Videospeler op een case-pagina (18 okt, richting B): paneel met een stille loop van 6 s uit de video in volle kleur
   (speelt alleen in beeld, nooit geluid), omlijnde knop "Watch the video" in het midden, naam en duur onderin.
   Een klik op knop of beeld zet YouTube (zonder cookies) in hetzelfde vlak. Prototype: voorstellen/videospeler.html */
.vp { display: block; padding: 0; overflow: hidden; }
.vp__frame { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; }
.vp__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease), filter .4s; }
.vp__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.vp__play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); background: rgba(12,12,11,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; font-family: inherit; white-space: nowrap; }
.vp__frame:hover .vp__poster { transform: scale(1.02); }
.vp__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: clamp(18px, 2.4vw, 32px) clamp(20px, 3vw, 40px); pointer-events: none; }
.vp__name { color: #fff; font-weight: 500; font-size: 17px; }
.vp__time { color: rgba(255,255,255,.7); margin: 0; }
.vp__frame.is-on { cursor: auto; }
.vp__frame.is-on::after, .vp__frame.is-on .vp__bar, .vp__frame.is-on .vp__play, .vp__frame.is-on .vp__poster { display: none; }
.vp__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs > .vp + .cs__track { margin-top: calc(clamp(16px, 2vw, 24px) - clamp(44px, 5vw, 72px)); } /* video en track als één paar: video eerst, de trackrij eronder */
@media (max-width: 760px) { .vp__bar { padding: 14px 16px; } .vp__name { font-size: 15px; } .vp__play.btn--lg { height: 42px; min-height: 42px; padding: 0 16px 0 5px; gap: 10px; font-size: 15px; } .vp__play .btn__play { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .vp__poster { transition: none; } }

/* ---------- For agencies (18 okt): logorij van bureaus, werkblok met videospeler, stappen, zwarte FAQ ---------- */
/* For agencies (18 okt). Logorij: losse logo's op één rij, zonder vakken of lijnen (gebruiker: "zonder blok er omheen"). */
main .section.ag-wall-wrap { margin-top: 0; padding-top: clamp(40px, 4.4vw, 64px); } /* hoort bij de hero: dicht onder de feitenrij */
.ag-wall__label { margin: 0 0 clamp(24px, 2.6vw, 36px); color: rgba(255,255,255,.5); font-weight: 400; }
.ag-wall { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 32px clamp(20px, 3vw, 48px); }
.ag-wall li { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; } /* één rij: logo's krimpen naar verhouding mee (19 okt, zes bureaus) */
.ag-wall img { height: var(--h); width: calc(var(--h) * var(--r)); max-width: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .82; }
@media (max-width: 760px) { .ag-wall { flex-wrap: wrap; justify-content: center; gap: 28px 36px; } .ag-wall img { height: calc(var(--h) * .74); width: calc(var(--h) * .74 * var(--r)); } }
/* Werk met bureaus: de videospeler van de case-pagina, daaronder de tegels */
.ag-work .vp { margin-bottom: clamp(28px, 3vw, 44px); }
.ag-intro { margin: 14px 0 0; color: rgba(255,255,255,.74); max-width: 56ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; }
.ag-more { margin-top: clamp(28px, 3vw, 44px); }
.ag-step { display: grid; gap: 10px; align-content: start; }
.ag-step .label { margin: 0; color: rgba(255,255,255,.5); }
/* Zwarte FAQ: rijen met een lijn ertussen (geen lijn boven de eerste of onder de laatste), rond icoon 52 px zoals overal */
.faqz { display: grid; }
.faqz details + details { border-top: 1px solid var(--line); }
.faqz summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 0; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 23px; line-height: 1.25; letter-spacing: -.01em; color: #fff; }
.faqz details:first-child summary { padding-top: 0; }
.faqz summary::-webkit-details-marker { display: none; }
.faqz summary::after { content: "+"; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); font-family: var(--font-sans); font-size: 24px; font-weight: 300; transition: transform .3s var(--ease), border-color .25s, background .25s, color .25s; }
.faqz summary:hover::after { border-color: #fff; transform: scale(1.06); }
.faqz details[open] summary::after { transform: rotate(45deg); background: var(--signal); border-color: var(--signal); color: #0C0C0B; }
.faqz details[open] summary:hover::after { transform: rotate(45deg) scale(1.06); }
.faqz details p { margin: 0; padding: 0 0 28px; max-width: 60ch; color: rgba(255,255,255,.74); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; }
/* Links in lopende tekst (FAQ-antwoorden, dienstkaarten): wit onderstreept, nooit geel (19 okt: wat je noemt, link je) */
.faqz details p a, .cs__text a, .kc__lead a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
.faqz details p a:hover, .cs__text a:hover, .kc__lead a:hover { text-decoration-color: #fff; }

/* ===== About us (19 okt; uit het prototype, _build/build_about.py) ===== */
/* About us (prototype 18 okt, live 19 okt). Adres: links het adres groot, rechts de tekst en de knop. */
.st-where { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px clamp(32px, 4vw, 64px); align-items: start; }
.st-where address { font-style: normal; font-family: var(--font-display); font-weight: 500; font-size: var(--t-3, 28px); line-height: 1.25; letter-spacing: -.02em; color: #fff; }
.st-where p { margin: 0 0 24px; color: rgba(255,255,255,.74); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; max-width: 40ch; }
.st-where p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.st-where p a:hover { text-decoration-color: currentColor; }
.st-where__btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* Klantenlijst als muur van namen (versie 2): H2-maat over de volle breedte, om en om wit en grijs */
.kv-names { list-style: none; margin: 0; padding: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; color: #fff; }
.kv-names li { display: inline; }
.kv-names li + li::before { content: " "; }
.kv-wall .kv-names { font-size: var(--t-2); line-height: 1.14; text-wrap: pretty; }
.kv-wall .kv-names li:nth-child(even) { color: rgba(255,255,255,.5); }
.kv-wall .kv-names .kv-more { color: #fff; } /* volgt het wit-grijsritme; de muur eindigt open (gebruiker 19 okt: "and many more") */
.ab-intro { margin: 0 0 32px; color: rgba(255,255,255,.74); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; max-width: 52ch; }
.ab-more { margin: 32px 0 0; }
@media (max-width: 760px) { .st-where { grid-template-columns: minmax(0, 1fr); } .kv-wall .kv-names { font-size: var(--t-3); line-height: 1.3; } }

/* Team (20 okt): vier portretten op een rij (telefoon 2×2), recht, zwart-wit, 4:5; naam in de koplettering, rol in mono */
.ab-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 32px); }
.ab-team img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; background: #161615; }
.ab-team__name { margin: 18px 0 6px; font-family: var(--font-display); font-weight: 500; font-size: var(--t-4); line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.ab-team__role { margin: 0; color: rgba(255,255,255,.6); }
.ab-team__note { margin: 32px 0 0; color: rgba(255,255,255,.74); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; max-width: 52ch; }
@media (max-width: 760px) { .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } .ab-team__name { margin-top: 14px; } }

/* ===== Dienstpagina (19 okt; _build/build_service.py) ===== */
/* Illustratie als speler: paneel .kc met de spelerrij bovenaan, daaronder de tekening (breed, of 2×2 op de telefoon).
   De stippen zijn grijs in rust en alle vier tegelijk geel zolang het voorbeeld speelt: hetzelfde geluid op elk apparaat. */
.svc-ill__art { position: relative; margin: clamp(20px, 2.4vw, 32px) 0 0; cursor: pointer; }
.svc-ill__art img { display: block; width: 100%; height: auto; }
.svc-ill__art--still { cursor: default; margin: 0; } /* tekening zonder voorbeeld: los op het zwart, niet klikbaar (19 okt) */
.svc-ill__dot { position: absolute; left: var(--x); top: var(--y); width: 1.25%; aspect-ratio: 1; border-radius: 50%; background: var(--signal); transform: translate(-50%, -50%); opacity: 0; transition: opacity .15s linear; pointer-events: none; }
.svc-ill.is-playing .svc-ill__dot { opacity: 1; } /* geel zolang het voorbeeld speelt; in rust grijs (in de tekening), geen beweging (gebruiker 19 okt) */
/* Een paneel direct na de hero staat dichter op wat volgt: pil naar Work eronder, dan 112 px (telefoon 72) tot de volgende kop */
main .section.svc-intro + .section { padding-top: 84px; } /* + de bovenruimte van de kop = 112 px zichtbaar */
/* Wat je krijgt: 2×2 op de kolommen van de verhaalrijen (.cs__row), elk met een lijn erboven; telefoon één kolom */
.svc-get { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 44px) var(--col); }
.svc-get > div { border-top: 1px solid var(--line); padding-top: 28px; }
.svc-get .cs__text { margin-top: 14px; }
/* Meer over deze dienst (kindpagina's): label en pil op de linkerlijn, onder de FAQ */
.svc-more { margin-top: clamp(40px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.svc-more .label { margin: 0; color: rgba(255,255,255,.5); }
@media (max-width: 760px) { .svc-more .label { flex-basis: 100%; } } /* telefoon: label boven de pillen, pillen op één linkerlijn (familie-agent 20 okt) */
.kc__low .svc-more { margin-top: 0; } .kc__low .svc-more .label { flex-basis: 100%; } /* Industries-hub: pillrij links in de kaart, label erboven (21 okt) */
@media (min-width: 1001px) { .kc__low > .svc-more { grid-column: 1; grid-row: 1; } .kc__low > .svc-more ~ .kc__facts, .kc__low > .kc__facts:has(~ .svc-more) { grid-column: 2; grid-row: 1; } } /* desktop: pillen links, feiten rechts; telefoon: feiten, dan pillen */
@media (max-width: 760px) { .svc-ill__dot { left: var(--xm); top: var(--ym); width: 3%; } main .section.svc-intro + .section { padding-top: 44px; } .svc-get { grid-template-columns: minmax(0, 1fr); } .svc-get > div { padding-top: 22px; } }

/* ===== Contact (20 okt; _build/build_contact.py) ===== */
/* Zwart formulier, uit bestaande onderdelen (ronde 2, familie-toets): keuzes als de dienstenlijst van de homepage
   (grijs, haarlijn ertussen, gekozen = wit met de gele stip), velden als een haarlijn zonder vlak, mono-labels,
   geel alleen de verzendknop en de stip. Zelfde markup als wp/dsw/template-contact.php. */
main .section.ct-form { position: relative; padding-top: clamp(48px, 4.4vw, 64px); } /* het formulier hoort bij de hero: dichter onder de feitenrij (Krug: de taak meteen in beeld) */
.ct-form .form { --col: clamp(32px, 4vw, 64px); background: none; box-shadow: none; border-radius: 0; padding: 0; display: grid; gap: clamp(40px, 4vw, 56px); } /* volle breedte op de linkerlijn (20 okt: smal en gecentreerd teruggedraaid, "kijk de footer, totally unaligned") */
.ct-form .form__label { display: block; margin: 0 0 6px; padding: 0; font-family: var(--font-mono); font-size: var(--mono); color: rgba(255,255,255,.72); }
.ct-form .form__opt { color: rgba(255,255,255,.55); }
.ct-form .form__trap { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* honeypot: onzichtbaar, maar binnen beeld (geen -9999) */
/* Keuzes: twee kolommen van vier rijen (telefoon één kolom), zoals "What we make" op de homepage */
.ct-form .form__topics { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--col); border: 0; margin: 0; padding: 0; min-width: 0; }
.ct-form .form__topics legend { padding: 0 0 14px; margin: 0; } /* geen float: dan blijft de legenda buiten het raster */
.ct-form .chipbox { position: relative; display: block; border-bottom: 1px solid var(--line); cursor: pointer; }
.ct-form .chipbox:nth-of-type(-n+2) { border-top: 1px solid var(--line); }
.ct-form .chipbox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ct-form .chipbox span { position: relative; display: flex; align-items: center; min-height: 0; padding: clamp(16px, 1.6vw, 22px) 0 clamp(16px, 1.6vw, 22px) 36px; border-radius: 0; box-shadow: none; background: none; font-family: var(--font-display); font-weight: 500; font-size: var(--t-4); line-height: 1.2; letter-spacing: -.02em; color: rgba(255,255,255,.8); transition: color .3s; }
/* Het rondje vóór elke keuze: zo zie je dat je hier kunt kiezen (Krug); gekozen = geel gevuld, zoals een actieve play */
.ct-form .chipbox span::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); background: none; transform: none; transition: background .2s, box-shadow .2s, transform .3s var(--ease); }
.ct-form .chipbox:hover span { color: #fff; box-shadow: none; }
.ct-form .chipbox:hover span::before { box-shadow: inset 0 0 0 1px #fff; transform: scale(1.06); }
.ct-form .chipbox input:checked + span { color: #fff; background: none; box-shadow: none; }
.ct-form .chipbox input:checked + span::before { background: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.ct-form .chipbox input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
/* Velden: alleen een haarlijn eronder (de lijn van de feitenrij en de verhaalrijen), aanwijzen lichter, typen wit */
.ct-form .form__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px var(--col); }
.ct-form .field--full { grid-column: 1 / -1; }
.ct-form .field input, .ct-form .field textarea { display: block; width: 100%; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 rgba(255,255,255,.35); padding: 12px 0 14px; color: #fff; font: inherit; font-size: 19px; line-height: 1.5; transition: box-shadow .2s; }
.ct-form .field input::placeholder, .ct-form .field textarea::placeholder { color: rgba(255,255,255,.38); }
.ct-form .field input:hover, .ct-form .field textarea:hover { box-shadow: inset 0 -1px 0 rgba(255,255,255,.5); }
.ct-form .field input:focus, .ct-form .field textarea:focus { outline: none; background: none; box-shadow: inset 0 -2px 0 #fff; }
.ct-form .field input[aria-invalid="true"], .ct-form .field textarea[aria-invalid="true"] { box-shadow: inset 0 -2px 0 #FF8A5C; }
.ct-form .field textarea { min-height: 0; resize: none; overflow: hidden; field-sizing: content; } /* begint als één regel, zoals de andere velden, en groeit mee */
.ct-form .form__hint { margin: 10px 0 0; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.5; }
.ct-form .form__error { margin: 0; color: #FF8A5C; font-size: 15px; }
.ct-form .form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.ct-form .form__note { margin: 0; max-width: 340px; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.5; }
.ct-form .form__note a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
.ct-form .form__note a:hover { text-decoration-color: #fff; }
.ct-form .form__sent { display: grid; gap: 8px; padding: 28px 0 0; border-radius: 0; background: none; border-top: 1px solid var(--line); }
.ct-form .form__sent b { font-family: var(--font-display); font-weight: 500; font-size: var(--t-3); letter-spacing: -.02em; color: #fff; }
.ct-form .form__sent b .op__dot { display: inline-block; width: .22em; height: .22em; margin-left: .06em; vertical-align: baseline; }
.ct-form .form__sent span { color: rgba(255,255,255,.74); font-size: clamp(17px, 1.35vw, 20px); }
@media (max-width: 760px) {
  .ct-form .form__topics, .ct-form .form__grid { grid-template-columns: minmax(0, 1fr); }
  .ct-form .chipbox:nth-of-type(2) { border-top: 0; }
  .ct-form .form__grid { gap: 28px; }
}
/* Footer zonder slotvraag (contactpagina): de linkkolommen blijven rechts, zoals op elke andere pagina */
.footer__top > .footer__cols:only-child { margin-left: auto; }
/* Cookiebanner (21 okt, nacht; prototype cookiebanner.html, live via inc/consent.php): alleen als GA4 is ingesteld. Geen paneel (dat is
   voor geluid) en geen geel: recht vlak met één haarlijn, mono-label, twee gelijke omlijnde pillen. Weigeren is even groot en even
   dichtbij als accepteren, de site blijft bruikbaar (geen muur, geen overlay), "Cookies" in de footer opent hem opnieuw. */
.consent { position: fixed; z-index: 60; left: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); padding: 20px 20px 18px;
  background: #0C0C0B; border: 1px solid var(--line); border-radius: 0; box-shadow: 0 24px 60px rgba(0,0,0,.55); color: rgba(255,255,255,.72);
  font-size: 15px; line-height: 1.5; animation: consent-in .5s cubic-bezier(.2,.7,.2,1) both; }
.consent[hidden] { display: none; }
.consent .label { display: block; margin: 0 0 10px; color: rgba(255,255,255,.5); }
.consent__text { margin: 0; }
.consent__text a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.consent__text a:hover { text-decoration-color: #fff; }
.consent__actions { display: flex; gap: 8px; margin-top: 16px; }
.consent__actions .btn { flex: 1; justify-content: center; background: transparent; color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.consent__actions .btn:hover, .consent__actions .btn:focus-visible { border-color: #fff; }
.footer__link { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.footer__link:hover { color: #fff; text-decoration-color: currentColor; }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
@media (max-width: 760px) { .consent { right: 16px; width: auto; } }

/* Klantuitleg onder het eerste beeld (23 okt): onderschrift 13 (AFSPRAKEN letters), op de linkerlijn van het paneel. */
.vp-about { margin: 14px 0 0; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.5; max-width: 60ch; }