/* WordPress-only additions. site.css is the design itself and stays identical to the static site;
   everything the static site did not have lives here. */

/* Fixed menu below the WordPress admin bar (only for logged-in users) */
body.admin-bar .nav-wrap { top: 44px; }
@media (max-width: 782px) { body.admin-bar .nav-wrap { top: 58px; } }

/* Work tiles without a case yet are not links */
div.bt { cursor: default; }

/* Text pages (privacy, terms) and the fallback template */
.prose { max-width: 760px; }
.prose .h1 { margin-bottom: clamp(24px, 3vw, 40px); }
.prose__lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--ink); margin-bottom: 32px; }
.prose__body { font-size: var(--fs-body); line-height: 1.65; color: var(--ink); }
.prose__body > * + * { margin-top: 1em; }
.prose__body h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; margin-top: 2em; }
.prose__body h3 { font-weight: 600; margin-top: 1.6em; }
.prose__body ul, .prose__body ol { padding-left: 1.2em; }
.prose__body ul { list-style: disc; }
.prose__body ol { list-style: decimal; }
.prose__body li + li { margin-top: .4em; }
.prose__body a { text-decoration: underline; text-underline-offset: 3px; }
.prose__body a:hover { color: var(--graphite); }

/* 404 */
.notfound__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Contact: Turnstile (only shows itself when it needs an interaction) */
.form__check { margin-top: 20px; }
.form__check:empty { display: none; }

/* Footer link that is a button (reopens the cookie banner) */
.footer__link { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.footer__link:hover { color: #fff; }

/* Cookie banner: only shown when Google Analytics is set up */
.consent {
  position: fixed; z-index: 60; left: 16px; bottom: 16px;
  width: min(420px, calc(100vw - 32px));
  padding: 18px 18px 16px; border-radius: var(--radius-l);
  background: var(--hardware); color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
  font-size: var(--fs-small); line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.consent__text a:hover { color: var(--signal); }
.consent__actions { display: flex; gap: 8px; margin-top: 14px; }
.consent__actions .btn { flex: 1; justify-content: center; }
/* Bugfix 21 okt: <button> kreeg de grijze browserachtergrond met witte tekst (onleesbaar); zelfde omlijnde pil als elders. */
.consent__actions .btn { background: transparent; color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.consent__actions .btn:hover, .consent__actions .btn:focus-visible { border-color: #fff; }

/* ==========================================================================
   Inner pages (services, industries, cases, work, hubs). Built from the same parts as the homepage:
   hairlines, mono labels, Funnel Display headings, black "hardware" for media. Yellow only for play.
   ========================================================================== */

.section--tight { padding-top: clamp(72px, 9vw, 140px); }

/* Page head */
.ph { display: grid; gap: 40px; }
.ph--media { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; gap: 40px clamp(40px, 5vw, 80px); }
.ph__text { display: grid; gap: 22px; align-content: start; max-width: 900px; }
.ph__title { max-width: 16ch; }
.ph__lead { margin: 0; max-width: 620px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; color: #3a3b39; }
.ph__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ph__hear .btn__play { background: var(--signal); }
.ph__hear.is-playing .btn__play { background: var(--ink); }
.ph__hear.is-playing .btn__play svg { fill: var(--signal); }
.ph__media { margin: 0; }
.ph__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); }
@media (max-width: 900px) { .ph--media { grid-template-columns: 1fr; } }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--graphite); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }

/* Text sections: heading left, text right (same grid as the FAQ) */
.ls { display: grid; }
.ls__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px 56px; align-items: start; padding-top: 28px; border-top: 1px solid var(--line); }
.ls__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -.03em; max-width: 16ch; }
.section > .ls__title { margin-bottom: clamp(28px, 3vw, 44px); }
.ls__body { font-size: var(--fs-body); line-height: 1.65; color: #3a3b39; max-width: 680px; }
.ls__body > * + * { margin-top: 1em; }
.ls__body p { margin: 0; }
.ls__body ul { list-style: none; padding: 0; margin: 0; }
.ls__body ul:not(.links) li { position: relative; padding-left: 22px; }
.ls__body ul:not(.links) li + li { margin-top: .45em; }
.ls__body ul:not(.links) li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.ls__body ol { padding-left: 1.2em; margin: 0; }
.ls__body a:not(.links a) { text-decoration: underline; text-underline-offset: 3px; }
.ls__body strong { color: var(--ink); font-weight: 600; }
.ls--media { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px clamp(32px, 4vw, 64px); align-items: start; }
.ls--media .ls__text { grid-template-columns: 1fr; }
.ls--left .ls__media { order: -1; }
.ls__media { margin: 0; padding-top: 28px; }
.ls__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); }
@media (max-width: 860px) {
  .ls__text, .ls--media { grid-template-columns: 1fr; }
  .ls--left .ls__media { order: 0; }
}

/* Link lists (subpages, related services): anchor text = the page's H1 */
.links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.links li { border-bottom: 1px solid var(--line); }
.links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -.02em; transition: padding .3s var(--ease); }
.links a span:last-child { transition: transform .3s var(--ease); }
.links a:hover { padding-left: 8px; }
.links a:hover span:last-child { transform: translateX(4px); }
.links--small { margin-top: 20px; }
.links--small a { font-family: var(--font-body); font-size: 17px; padding: 13px 0; letter-spacing: 0; }

/* Services hub: seven sounds. Name and one line left; example, what you get, brands and the link right. */
.hub { border-top: 1px solid var(--line); }
.hub__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px 56px; padding: clamp(40px, 4.6vw, 72px) 0; border-bottom: 1px solid var(--line); }
.hub__head { display: grid; gap: 14px; align-content: start; }
.hub__name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.2vw, 52px); line-height: 1.04; letter-spacing: -.035em; max-width: 12ch; }
.hub__name a:hover { color: var(--graphite); }
.hub__line { margin: 4px 0 0; max-width: 40ch; font-size: var(--fs-body); line-height: 1.55; color: #3a3b39; }
.hub__body { display: grid; gap: 22px; align-content: start; }
.hub .cap__items { margin: 0; }
.hub__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; padding-top: 4px; }
.hub__child { font-size: 15px; color: var(--graphite); }
.hub__child:hover { color: var(--ink); }
@media (max-width: 860px) { .hub__row { grid-template-columns: 1fr; gap: 20px; } .hub__name { max-width: none; } }

/* Mini player: "Hear an example" with the waveform in the house language, on light backgrounds */
.mini { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 16px; }
.mini__play { width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; background: var(--signal); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s; }
.mini__play svg { width: 16px; height: 16px; fill: currentColor; grid-area: 1 / 1; }
.mini__ico--play { margin-left: 2px; }
.mini__ico--pause { display: none; }
.mini.is-playing .mini__ico--play { display: none; }
.mini.is-playing .mini__ico--pause { display: block; }
.mini__play:hover, .mini__play:focus-visible { transform: scale(1.06); }
.mini.is-playing .mini__play { box-shadow: 0 0 0 6px rgba(236,198,2,.22); }
.mini__wave { display: block; width: 100%; height: 48px; }
.mini__label { grid-column: 2; font-variant-numeric: tabular-nums; }

/* Case: film (loads on click), facts, credits, next case */
.film-wrap { margin-top: clamp(48px, 6vw, 88px); }
.film { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); overflow: hidden; background: var(--hardware) var(--poster, none) center / cover no-repeat; }
.film iframe, .film video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.film__play { position: absolute; inset: 0; width: 100%; display: grid; place-items: center; align-content: center; gap: 14px; background: linear-gradient(180deg, rgba(11,11,10,0) 40%, rgba(11,11,10,.55)); border: 0; color: #fff; cursor: pointer; font: inherit; }
.film__btn { width: clamp(64px, 7vw, 92px); height: clamp(64px, 7vw, 92px); border-radius: 50%; display: grid; place-items: center; background: var(--signal); transition: transform .3s var(--ease); }
.film__btn svg { width: 34%; height: 34%; fill: var(--ink); margin-left: 4%; }
.film__label { font-family: var(--font-mono); font-size: 12.5px; color: rgba(255,255,255,.8); }
.film__play:hover .film__btn, .film__play:focus-visible .film__btn { transform: scale(1.06); }
/* No custom poster: the client's logo on black, like the work tiles. The play button sits below the logo. */
.film__mark { position: absolute; inset: 0 0 22% 0; display: grid; place-items: center; }
.film__mark img { height: var(--h); width: calc(var(--h) * var(--r)); max-width: 56%; filter: brightness(0) invert(1); }
.film__mark .bt__duo img { max-width: 100%; }
.film--mark .film__play { align-content: end; padding-bottom: clamp(24px, 5%, 48px); background: none; }
@media (max-width: 760px) {
  .film__mark { inset: 0 0 32% 0; }
  .film__mark img { height: calc(var(--h) * .5); width: calc(var(--h) * .5 * var(--r)); }
  .film__mark .case2__word { font-size: 24px; }
  .film--mark .film__play { padding-bottom: 18px; }
  .film--mark .film__btn { width: 46px; height: 46px; }
  .film--mark .film__label { display: none; }
}
.facts-wrap { margin-top: clamp(32px, 4vw, 56px); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.facts > div { padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.facts dt { color: var(--graphite); }
.facts dd { margin: 0; font-weight: 500; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } }
.credit-line { margin-top: 20px; font-size: var(--fs-small); color: var(--graphite); }
.next-case { display: grid; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line); }
.next-case__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.035em; }
.next-case__name span { display: inline-block; transition: transform .3s var(--ease); }
.next-case:hover .next-case__name span { transform: translateX(8px); }

/* Work page cards: text marks and linked names */
.case2__word { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3vw, 44px); letter-spacing: .02em; color: #fff; }
.case2__name a:hover { color: var(--graphite); }

/* Four numbered points: one row of four on wide screens, two by two on tablets */
.next:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .next:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .next:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr; } }

/* Work page: every case tile the same size (no wide first tile), name with the format line always under it,
   then the other clients in the hairline grid from the homepage, without hover. */
.cases2 { gap: clamp(40px, 4.4vw, 72px) clamp(16px, 1.6vw, 24px); }
.case2__media.bt { aspect-ratio: 3 / 2; }
.case2__meta { display: grid; gap: 6px; margin-top: 18px; }
.case2__name { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; }
.work-wall__title { margin-bottom: clamp(32px, 4vw, 56px); }
.brands--still .bt, .brands--still .bt:hover { background: none; border-radius: 0; transform: none; cursor: default; }
.brands--still .bt img, .brands--still .bt:hover img { filter: brightness(0); opacity: .82; transform: none; }
.brands--still .case2__word { color: var(--ink); opacity: .82; font-size: clamp(20px, 2vw, 28px); }

/* Header: menu links readable on every screen (were 15px light grey). Scales a little on large screens. */
.nav__links a { font-size: clamp(16px, 1.05vw, 18px); font-weight: 500; color: var(--ink); padding: 10px clamp(14px, 1.1vw, 18px); }
.nav__links a[aria-current="page"] { background: rgba(12,12,11,.06); }
.nav .brand__name { font-size: clamp(18px, 1.15vw, 21px); }
.nav__cta { font-size: clamp(15px, 1vw, 17px); }
/* Stacked lockups (Janssen × Johnson & Johnson): the 60% cap must not apply to each logo inside the lockup,
   or the wider logo gets squeezed to the width of the narrower one. */
.case2__media.bt .bt__duo img { max-width: none; }

/* Photos: portrait photos keep a portrait frame instead of being cropped into a wide strip (that looked blurry). */
.ph__media--tall img { aspect-ratio: 4 / 5; }
.ph--media:has(.ph__media--tall) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.moment--tall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.moment img, .ph__media img { height: auto; object-fit: cover; }
.moment--tall img { aspect-ratio: 4 / 5; }
.moment--tall .moment__cap { margin: 0; }
@media (max-width: 760px) { .moment--tall { grid-template-columns: 1fr; } .moment--tall .moment__cap { margin-top: 4px; } }
/* Logo grid on inner pages: heading spacing like the Work page. */
.logos__title { margin-bottom: clamp(28px, 3.5vw, 48px); }

.moment--pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.moment--pair img { aspect-ratio: 4 / 5; }
.moment--pair .moment__cap { grid-column: 1 / -1; margin-top: 4px; }
@media (max-width: 760px) { .moment--pair { grid-template-columns: 1fr; } }

/* ==========================================================================
   Landing building blocks (For agencies first, approved prototype 16 Oct 2026):
   dark top with facts and logos, In short, situation cards, steps, dark chapter, rows.
   ========================================================================== */
.lp-dark { position: relative; background: #0B0B0A; color: #fff; box-shadow: 0 0 0 100vmax #0B0B0A; clip-path: inset(0 -100vmax); }
.lp-hero { padding-top: clamp(150px, 14vw, 210px); padding-bottom: clamp(56px, 6vw, 96px); }
.lp-hero .crumbs, .lp-hero .crumbs a { color: rgba(255,255,255,.5); }
.lp-hero .crumbs [aria-current] { color: rgba(255,255,255,.85); }
.lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 112px); align-items: end; margin-top: 28px; }
.lp-hero h1 { color: #fff; max-width: 13ch; }
.lp-hero__lead { margin: 0; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; color: rgba(255,255,255,.74); max-width: 560px; }
.lp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lp-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: clamp(56px, 6vw, 96px) 0 0; }
.lp-specs > div { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); display: grid; gap: 10px; align-content: start; }
.lp-specs dt { font-family: var(--font-mono); font-size: 12.5px; color: rgba(255,255,255,.5); }
.lp-specs dd { margin: 0; font-size: 17px; line-height: 1.4; color: #fff; }
.lp-partners { margin-top: clamp(56px, 6vw, 88px); }
.lp-partners .label { color: rgba(255,255,255,.5); margin: 0 0 20px; }
.lp-partners ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.lp-partners li { background: #0B0B0A; display: grid; place-items: center; aspect-ratio: 3 / 1.15; padding: 0 16px; }
.lp-partners ul:has(li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .lp-partners ul:has(li:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-partners ul:has(li:nth-child(5)) li:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 6 / 1.15; } }
.lp-partners img { height: var(--h); width: calc(var(--h) * var(--r)); max-width: 70%; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }
.lp-partners .case2__word { font-size: 19px; letter-spacing: -.01em; text-align: center; line-height: 1.15; max-width: 15ch; opacity: .9; }
.lp-hero + .lp-short-wrap { padding-top: clamp(64px, 7vw, 112px); }
.lp-short { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); margin: clamp(28px, 3vw, 44px) 0 0; }
.lp-short li { padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.lp-short p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.lp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px 56px; align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.lp-head p { margin: 0; color: #3a3b39; max-width: 560px; }
.lp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.lp-cards article { background: var(--canvas); padding: clamp(28px, 3vw, 48px); display: grid; gap: 16px; align-content: start; }
.lp-cards h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.015em; }
.lp-cards__text p { margin: 0; color: #3a3b39; line-height: 1.65; }
.lp-cards__text p + p { margin-top: 1em; }
.lp-cards__text a { text-decoration: underline; text-underline-offset: 3px; }
.lp-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lp-steps li { display: grid; grid-template-columns: 72px minmax(0, .8fr) minmax(0, 1.4fr) 200px; gap: 16px 32px; padding: clamp(22px, 2.4vw, 34px) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.lp-steps__n, .lp-steps__v { font-family: var(--font-mono); font-size: 12.5px; color: var(--graphite); }
.lp-steps__v { text-align: right; white-space: nowrap; }
.lp-steps h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); letter-spacing: -.015em; }
.lp-steps p { margin: 0; color: #3a3b39; line-height: 1.6; }
.lp-more { margin-top: clamp(40px, 4vw, 64px); display: flex; }
.lp-chapter { margin-top: var(--section); padding-top: clamp(96px, 10vw, 160px); padding-bottom: clamp(96px, 10vw, 160px); }
.lp-chapter .label { color: rgba(255,255,255,.5); margin: 0; }
.lp-chapter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px clamp(40px, 6vw, 112px); align-items: start; margin-top: 20px; }
.lp-chapter h2 { color: #fff; }
.lp-chapter__grid p { margin: 0; color: rgba(255,255,255,.74); font-size: clamp(18px, 1.35vw, 20px); line-height: 1.6; }
.lp-chapter__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: clamp(48px, 5vw, 72px) 0 0; }
.lp-chapter__points > div { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); display: grid; gap: 10px; }
.lp-chapter__points dt { font-family: var(--font-mono); font-size: 12.5px; color: var(--signal); }
.lp-chapter__points dd { margin: 0; color: #fff; }
.lp-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px 56px; align-items: start; }
.lp-rows p { margin: 0 0 24px; color: #3a3b39; max-width: 560px; line-height: 1.65; }
.lp-rows ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lp-rows li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.lp-rows li span:first-child { font-family: var(--font-mono); font-size: 12.5px; color: var(--graphite); padding-top: 3px; }
@media (max-width: 1000px) {
  .lp-hero__grid, .lp-head, .lp-chapter__grid, .lp-rows { grid-template-columns: 1fr; }
  .lp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .lp-steps li { grid-template-columns: 48px minmax(0, 1fr); }
  .lp-steps li p, .lp-steps__v { grid-column: 2; text-align: left; }
}
@media (max-width: 760px) {
  .lp-short, .lp-cards, .lp-chapter__points { grid-template-columns: 1fr; }
  .lp-chapter__points { gap: 20px; }
  .lp-partners ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-partners img { height: calc(var(--h) * .72); width: calc(var(--h) * .72 * var(--r)); }
  .lp-partners .case2__word { font-size: 14px; }
  .lp-rows li { grid-template-columns: 1fr; gap: 6px; }
}

/* ==========================================================================
   The track: audio player at the top of a case. The same black as the hero and the film block;
   the waveform is the file itself (decoded in the browser), the played part turns yellow.
   Without a file: outlined play button, dimmed placeholder waveform and a note.
   ========================================================================== */
.trk-wrap { margin-top: clamp(48px, 6vw, 88px); }
.trk-wrap + .film-wrap { margin-top: clamp(16px, 1.6vw, 24px); }
.trk { background: #0B0B0A; color: #fff; border-radius: var(--radius-xl); padding: clamp(22px, 2.6vw, 36px) clamp(22px, 2.8vw, 40px) clamp(24px, 2.8vw, 40px); display: grid; gap: clamp(18px, 2vw, 28px); }
.trk__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.trk__title { margin: 8px 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.trk__time { margin: 0 0 4px; font-family: var(--font-mono); font-size: var(--fs-mono); color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trk__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 2.2vw, 32px); align-items: center; }
.trk__play { width: clamp(56px, 5vw, 72px); height: clamp(56px, 5vw, 72px); border-radius: 50%; border: 0; padding: 0; background: var(--signal); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s; }
.trk__play svg { width: 38%; height: 38%; fill: currentColor; grid-area: 1 / 1; }
.trk__play .trk__ico--play { margin-left: 6%; }
.trk__play .trk__ico--pause { display: none; }
.trk.is-playing .trk__play .trk__ico--play { display: none; }
.trk.is-playing .trk__play .trk__ico--pause { display: block; }
.trk__play:hover, .trk__play:focus-visible { transform: scale(1.06); }
.trk__play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.trk.is-playing .trk__play { box-shadow: 0 0 0 8px rgba(236,198,2,.18); }
.trk__wave { position: relative; height: clamp(84px, 10vw, 150px); }
.trk__wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.trk__cursor { position: absolute; top: 0; bottom: 0; left: var(--x, 0); width: 1px; background: rgba(255,255,255,.55); opacity: 0; pointer-events: none; transition: opacity .2s; }
.trk__wave:hover .trk__cursor { opacity: 1; }
.trk__seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.trk__seek:disabled { cursor: default; }
.trk__wave:has(.trk__seek:focus-visible) { outline: 2px solid #fff; outline-offset: 6px; border-radius: 4px; }
.trk__moments { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trk__moment { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 16px 6px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.16); background: none; color: #fff; font: inherit; font-size: 15px; line-height: 1.3; cursor: pointer; text-align: left; transition: border-color .25s, background .25s; }
.trk__moment time { font-family: var(--font-mono); font-size: 12px; color: var(--signal); font-variant-numeric: tabular-nums; }
.trk__moment:hover, .trk__moment:focus-visible { border-color: rgba(255,255,255,.55); }
.trk__moment.is-on { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }
.trk__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.trk__list li { border-bottom: 1px solid rgba(255,255,255,.12); }
.trk__item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; background: none; border: 0; color: rgba(255,255,255,.66); font: inherit; font-size: 16px; cursor: pointer; text-align: left; transition: color .25s; }
.trk__item-n { font-family: var(--font-mono); font-size: 12px; }
.trk__item svg { width: 14px; height: 14px; fill: currentColor; opacity: 0; transition: opacity .25s; }
.trk__item:hover, .trk__item:focus-visible, .trk__item.is-on { color: #fff; }
.trk__item.is-on svg, .trk__item:hover svg { opacity: 1; }
.trk__item.is-on .trk__item-n { color: var(--signal); }
.trk--soon .trk__play { background: none; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.6); cursor: default; }
.trk--soon .trk__play:hover { transform: none; }
.trk--soon .trk__wave { opacity: .6; }
.trk--soon .trk__cursor { display: none; }
@media (max-width: 640px) {
  .trk__top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .trk__time { margin: 0; }
  .trk__row { gap: 14px; }
  .trk__wave { height: 72px; }
  .trk__moment { font-size: 14px; }
}

/* ==========================================================================
   Services page as a tracklist (approved 17 October 2026). Centered dark top with the static yellow dot
   (the hero template for inner pages), rows sorted by length of the sound, one player at the bottom while an
   example plays, stories one at a time, "Where to start". Section spacing is tighter on this page.
   ========================================================================== */
.page-template-template-hub { --section: clamp(120px, 13vw, 200px); }
.page-template-template-hub .section__head { margin-bottom: clamp(40px, 4.5vw, 64px); }
.page-template-template-hub .lp-chapter { margin-top: calc(var(--section) * .6); }

/* Centered dark top */
.op { position: relative; background: #0B0B0A; color: #fff; box-shadow: 0 0 0 100vmax #0B0B0A; clip-path: inset(0 -100vmax); padding: clamp(130px, 14vw, 180px) 0 clamp(26px, 3vw, 44px); margin-bottom: -1px; }
.op__content { display: grid; justify-items: center; text-align: center; }
.op .crumbs { justify-content: center; margin: 0 0 clamp(22px, 2.6vw, 34px); color: rgba(255,255,255,.5); }
.op .crumbs a { color: rgba(255,255,255,.5); }
.op .crumbs a:hover { color: #fff; }
.op .crumbs [aria-current] { color: rgba(255,255,255,.85); }
.op__title { margin: 0; max-width: 16ch; font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 6vw, 104px); line-height: .95; letter-spacing: -.048em; text-wrap: balance; color: #fff; }
.op__dot { display: inline-block; width: .19em; height: .19em; margin-left: .06em; border-radius: 50%; background: var(--signal); vertical-align: baseline; } /* geen gloed: die hoort alleen bij de spelende stip op de homepage (19 okt) */
.op__lead { margin: clamp(22px, 2.6vw, 32px) 0 0; max-width: 600px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; color: rgba(255,255,255,.72); }
.op__ctas { margin-top: clamp(26px, 3vw, 40px); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.op__facts { margin: clamp(56px, 6.4vw, 96px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 clamp(16px, 2.4vw, 36px); padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.op__facts > div { display: grid; gap: 6px; align-content: start; }
.op__facts dt { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); }
.op__facts dd { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.4; color: #fff; }
.op__logos { display: grid; gap: 18px; justify-items: center; padding: clamp(28px, 3.2vw, 44px) 0 clamp(12px, 1.6vw, 24px); }
.op__logos .label { color: rgba(255,255,255,.5); }
.op__logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px clamp(36px, 5vw, 88px); }
.op__logos img { display: block; height: var(--h); width: calc(var(--h) * var(--r)); filter: brightness(0) invert(1); opacity: .62; }
.op__logos .case2__word { font-size: 19px; letter-spacing: -.01em; line-height: 1.1; color: #fff; opacity: .62; white-space: nowrap; }
.op + .section--tight, .op + .lp-short-wrap { padding-top: clamp(64px, 7vw, 112px); }
@media (max-width: 760px) {
  .op__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .op__logos ul { gap: 18px 28px; }
  .op__logos img { height: calc(var(--h) * .8); width: calc(var(--h) * .8 * var(--r)); }
}

/* The tracklist */
.tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tl__row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 12px clamp(20px, 2.6vw, 40px); align-items: start; padding: clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--line); }
.tl__main { display: grid; gap: 12px; }
.tl__name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.8vw, 60px); line-height: 1; letter-spacing: -.04em; }
.tl__name a:hover { color: var(--graphite); }
.tl__line { margin: 2px 0 0; max-width: 56ch; color: #3a3b39; line-height: 1.55; }
.tl__links { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.tl__links a { font-weight: 500; display: inline-flex; gap: 6px; }
.tl__links a:hover { color: var(--graphite); }
.tl__links .tl__sub { font-weight: 400; color: var(--graphite); font-size: 15px; }
.tl__links .tl__sub:hover { color: var(--ink); }
.tl__play { width: 48px; height: 48px; margin-top: 2px; border-radius: 50%; border: 1px solid rgba(12,12,11,.28); background: none; color: var(--ink); padding: 0; display: grid; place-items: center; cursor: pointer; justify-self: end; transition: border-color .25s, background .25s, transform .3s var(--ease), box-shadow .3s; }
.tl__play svg { width: 16px; height: 16px; fill: currentColor; grid-area: 1 / 1; }
.tl__ico--play { margin-left: 2px; }
.tl__ico--pause { display: none; }
.tl__play:hover, .tl__play:focus-visible { border-color: var(--ink); transform: scale(1.06); }
.tl__row.is-on .tl__play { background: var(--signal); border-color: var(--signal); }
.tl__row.is-playing .tl__play { box-shadow: 0 0 0 6px rgba(236,198,2,.22); }
.tl__row.is-playing .tl__ico--play { display: none; }
.tl__row.is-playing .tl__ico--pause { display: block; }
@media (max-width: 600px) {
  .tl__row { padding: 24px 0; }
  .tl__name { font-size: clamp(28px, 8vw, 36px); }
}

/* The player: one black bar at the bottom, only while something plays */
.now { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #0B0B0A; color: #fff; border-top: 1px solid rgba(255,255,255,.14); box-shadow: 0 -18px 50px rgba(0,0,0,.18); }
.now[hidden] { display: none; }
.now__in { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.4vw, 36px); padding-top: 14px; padding-bottom: 14px; }
.now__meta { display: grid; gap: 5px; min-width: 0; }
.now__meta .label { color: rgba(255,255,255,.5); }
.now__name { font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now .mini { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 clamp(14px, 2vw, 24px); }
.now .mini__play { width: 44px; height: 44px; }
.now .mini__wave { height: 44px; }
.now .mini__label { grid-column: 3; grid-row: 1; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.now .mini[hidden] { display: none; }
.now__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; font-size: 22px; line-height: 1; padding: 0; cursor: pointer; display: grid; place-items: center; }
.now__close:hover { border-color: #fff; }
body.has-now { padding-bottom: 92px; }
@media (max-width: 760px) {
  .now__in { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .now__slots { grid-column: 1 / -1; }
  .now__close { grid-row: 1; grid-column: 2; }
  .now .mini__label { font-size: 12px; }
}

/* Stories, one at a time */
.stories__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.stories__head .label { margin: 0; color: rgba(255,255,255,.5); }
.stories__nav { display: flex; align-items: center; gap: 10px; }
.stories__nav .label { margin-right: 6px; font-variant-numeric: tabular-nums; }
.stories__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.32); background: none; color: #fff; font-size: 18px; padding: 0; cursor: pointer; display: grid; place-items: center; transition: border-color .25s, transform .3s var(--ease); }
.stories__btn:hover, .stories__btn:focus-visible { border-color: #fff; transform: scale(1.06); }
.stories__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.stories { display: grid; margin-top: 20px; }
.story { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.story.is-on { opacity: 1; pointer-events: auto; }
.story__eyebrow { margin: 0 0 18px; }
.story .lp-chapter__grid { margin-top: 0; }
.story .lp-chapter__grid > div { display: grid; gap: 24px; justify-items: start; }
.story .lp-chapter__points dd { color: rgba(255,255,255,.86); }
.lp-chapter__more { display: inline-flex; gap: 8px; align-items: baseline; color: #fff; font-weight: 500; }
.lp-chapter__more:hover { color: var(--signal); }
.lp-chapter__more span:last-child { transition: transform .3s var(--ease); }
.lp-chapter__more:hover span:last-child { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .story { transition: none; } }
@media (max-width: 600px) { .stories__head { align-items: flex-start; flex-direction: column; } }

/* Where to start */
.fit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); }
.fit li { padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 14px; align-content: start; justify-items: start; }
.fit p { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.fit a { display: inline-flex; gap: 8px; align-items: baseline; font-weight: 500; }
.fit a:hover { color: var(--graphite); }
.fit .fit__sub { font-weight: 400; color: var(--graphite); font-size: 15px; }
.fit .fit__sub:hover { color: var(--ink); }
.fit__foot { margin-top: clamp(32px, 3.6vw, 56px); display: flex; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* Case tiles on landing and service pages: compact, four in a row, 3:2 (the 2-column tiles were out of proportion). Work keeps its own grid. */
.page-template-template-landing .cases2, .single-service .cases2, .single-industry .cases2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(12px, 1.4vw, 20px); }
.page-template-template-landing .case2__media.bt, .single-service .case2__media.bt, .single-industry .case2__media.bt { aspect-ratio: 3 / 2; border-radius: var(--radius-l); }
.page-template-template-landing .case2__media.bt img, .single-service .case2__media.bt img, .single-industry .case2__media.bt img { height: calc(var(--h) * .62); width: calc(var(--h) * .62 * var(--r)); max-width: 58%; }
.page-template-template-landing .case2__media .bt__cta, .single-service .case2__media .bt__cta, .single-industry .case2__media .bt__cta { right: 10px; top: 10px; padding: 5px 10px; font-size: 12px; }
.page-template-template-landing .case2__meta, .single-service .case2__meta, .single-industry .case2__meta { margin-top: 12px; display: grid; gap: 4px; }
.page-template-template-landing .case2__name, .single-service .case2__name, .single-industry .case2__name { font-size: clamp(16px, 1.2vw, 19px); }
@media (max-width: 900px) { .page-template-template-landing .cases2, .single-service .cases2, .single-industry .cases2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }