/* Broadkastr — public site styles.
 * Tokens are copied verbatim from the Broadkastr Design System so the site is
 * self-contained (no external CSS). Components reproduce the wireframe exactly. */

:root {
  /* brand */
  --bk-red: #E51F22; --bk-red-600: #C4161A; --bk-red-400: #F04A4C; --bk-red-tint: #FDECEC;
  --bk-black: #17171A; --bk-white: #FFFFFF;
  --bk-ink-900: #0E0E10; --bk-ink-800: #17171A; --bk-ink-700: #26262B; --bk-ink-600: #3A3A41;
  --bk-gray-500: #6B6B73; --bk-gray-400: #9A9AA2; --bk-gray-300: #C9C9CF;
  --bk-gray-200: #E4E4E8; --bk-gray-100: #F2F2F4; --bk-gray-50: #F8F8F9;
  /* semantic */
  --text-strong: var(--bk-ink-900); --text-body: var(--bk-ink-800);
  --text-muted: var(--bk-gray-500); --text-on-dark-muted: #B6B6BE;
  --border-subtle: var(--bk-gray-200); --border-strong: var(--bk-gray-300); --border-dark: var(--bk-ink-600);
  /* type */
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  /* spacing / radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px;
  --container-max: 1200px; --container-pad: 24px;
  /* effects */
  --shadow-sm: 0 2px 6px rgba(14,14,16,.08); --shadow-card: 0 4px 20px rgba(14,14,16,.08);
  --shadow-lg: 0 18px 48px rgba(14,14,16,.16);
  --ring-focus: 0 0 0 3px var(--bk-red), 0 0 0 6px rgba(255,255,255,.85);
  --ease-out: cubic-bezier(.22,1,.36,1); --dur-base: 220ms;
  --pulse-red: rgba(229,31,34,.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bk-white); color: var(--text-body);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--bk-red); text-decoration: none; }
a:hover { color: var(--bk-red-600); }
h1,h2,h3,h4 { margin: 0; letter-spacing: -.02em; }
/* Een doorzichtige rode gloed haalt de 3:1 van WCAG 1.4.11 niet en is op de
   donkere secties onzichtbaar: een volle rand met een witte tegenrand wel. */
:focus-visible { outline: 3px solid var(--bk-red); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255,255,255,.85); border-radius: var(--radius-sm); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.center { text-align: center; }
.muted { color: var(--text-muted); }
.accent { color: var(--bk-red); }

/* ---------- record dot (the brand mark; blinks when live) ---------- */
.rec-dot {
  position: relative; display: inline-block; width: 12px; height: 12px; flex: 0 0 auto;
  border-radius: var(--radius-pill); background: var(--bk-red);
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--bk-red); vertical-align: middle;
}
.rec-dot.is-live { animation: rec-blink 1.4s var(--ease-out) infinite; }
.rec-dot.is-live::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill);
  box-shadow: 0 0 0 0 var(--pulse-red); animation: rec-pulse 1.6s var(--ease-out) infinite;
}
@keyframes rec-blink { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes rec-pulse { 0%{box-shadow:0 0 0 0 var(--pulse-red)} 70%{box-shadow:0 0 0 8px rgba(229,31,34,0)} 100%{box-shadow:0 0 0 0 rgba(229,31,34,0)} }

/* ---------- eyebrow ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow.on-dark { color: var(--text-on-dark-muted); }
.eyebrow--sm { font-size: 11px; letter-spacing: .14em; color: var(--bk-red); }

/* ---------- buttons ---------- */
/* Het hidden-attribuut moet altijd winnen. Zonder deze regel verliest het van elke
   display:flex/inline-flex met hogere specificiteit — dat heeft hier al drie keer
   een "onzichtbaar" element toch zichtbaar gelaten. */
[hidden] { display: none !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 800; font-size: 15px; line-height: 1; white-space: nowrap;
  padding: 14px 24px; border-radius: var(--radius-md); border: 2px solid transparent; min-height: 46px;
  cursor: pointer; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--sm { padding: 9px 16px; font-size: 13px; min-height: 38px; gap: 7px; }
.btn--lg { padding: 17px 30px; font-size: 16px; min-height: 54px; }
.btn--full { width: 100%; }
/* record-dot inside a button: smaller, sits tight to the label */
.btn .rec-dot { width: 9px; height: 9px; box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 3px var(--bk-red); }
.btn--lg .rec-dot { width: 10px; height: 10px; }
.btn--primary { background: var(--bk-red); color: #fff; }
.btn--primary:hover { background: var(--bk-red-600); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: var(--border-dark); }
.btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn--outline { background: transparent; color: var(--text-body); border-color: var(--border-strong); }
.btn--outline:hover { border-color: var(--bk-ink-900); }

/* ---------- marquee ---------- */
.marquee { background: var(--bk-ink-900); color: #fff; overflow: hidden; padding: 10px 0; }
.marquee__track { display: inline-flex; white-space: nowrap; will-change: transform; animation: marquee 26s linear infinite; }
.marquee__item { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px;
  font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.marquee__item .rec-dot { width: 8px; height: 8px; box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 3px var(--bk-red); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
/* De balk mag breder dan de tekstkolom: met zes menu-items, de timecode, de taal
   en de knop is 1200px te krap en brak "Over ons" over twee regels. */
.nav .container { max-width: 1380px; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--container-pad); }
.nav__logo { display: flex; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links > a { font-weight: 700; font-size: 14px; color: var(--text-body); white-space: nowrap; }
.nav__links > a:hover { color: var(--bk-red); }
.lang-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); overflow: hidden; }
.lang-toggle a { padding: 5px 12px; font-weight: 800; font-size: 12px; color: var(--text-muted); }
.lang-toggle a.is-on { background: var(--bk-ink-900); color: #fff; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__burger span { width: 24px; height: 2px; background: var(--bk-ink-900); transition: transform var(--dur-base), opacity var(--dur-base); }

/* ---------- typography helpers ---------- */
.display { font-weight: 900; font-size: clamp(44px, 7vw, 84px); line-height: 1; text-transform: uppercase; }
.display--md { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
.section-title { font-weight: 800; font-size: clamp(30px, 4vw, 44px); margin-top: 14px; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--bk-ink-900); color: #fff; overflow: hidden; }
.hero__glow { position: absolute; inset: 0; opacity: .35;
  background: radial-gradient(80% 90% at 75% 20%, rgba(229,31,34,.25), transparent 60%); }
.hero__inner { position: relative; padding: 104px 0 92px; }
.hero .display { margin-top: 22px; }
.hero__sub { margin: 26px 0 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--text-on-dark-muted); }
.hero__cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero__media { margin-top: 54px; }

/* ---------- photo / placeholder ---------- */
.photo { position: relative; width: 100%; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--bk-gray-100); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--placeholder { background: radial-gradient(120% 120% at 30% 20%, #26262b 0%, #0e0e10 70%); display: flex; align-items: center; justify-content: center; }
.photo--placeholder .ring { position: absolute; border-radius: var(--radius-pill); }
.ring--outer { width: 44%; aspect-ratio: 1; border: 2px solid rgba(229,31,34,.35); }
.ring--inner { width: 22%; aspect-ratio: 1; background: var(--bk-red); opacity: .9;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 10px var(--bk-red); }
.photo--placeholder figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); }

/* ---------- clients ---------- */
.clients { padding: 56px 0; }
.clients__grid { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 40px; }
/* client "logo wall": muted grey, comes to life on hover */
.client { color: var(--bk-gray-400); font-weight: 800; font-size: 19px; letter-spacing: .01em;
  line-height: 1; transition: color var(--dur-base) var(--ease-out), opacity var(--dur-base), filter var(--dur-base); }
.client:hover { color: var(--text-muted); }
.client--logo { display: inline-flex; align-items: center; }
.client--logo img { height: 34px; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(1); opacity: .55; transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base); }
.client--logo:hover img { filter: grayscale(0); opacity: 1; }

/* ---------- services ---------- */
.services { background: var(--bk-gray-50); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 84px 0; }
.services__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.svc { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.svc__media { border-radius: 0; }
.svc__body { padding: 22px; }
.svc__body h3, .svc__body h2 { font-size: 22px; font-weight: 800; margin: 6px 0 14px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.ticks li .rec-dot { margin-top: 4px; }

/* ---------- mantra ---------- */
.mantra { background: var(--bk-ink-900); color: #fff; }
.mantra__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 92px 0; }
.mantra .display--md { margin-top: 16px; }
.mantra__body { margin-top: 22px; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--text-on-dark-muted); }
.mantra__quote { margin: 18px 0 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: #fff; font-weight: 500;
  border-left: 3px solid var(--bk-red); padding-left: 18px; }
.mantra .btn { margin-top: 28px; }

/* ---------- faq ---------- */
.faq { padding: 84px 0; }
.faq__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
  padding: 18px 20px; font-weight: 700; font-size: 17px; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; background: var(--bk-red); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out); }
.faq__plus::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq__item[open] .faq__plus::after { transform: scaleY(0); }
.faq__a { padding: 0 20px 18px; color: var(--text-muted); line-height: 1.6; }
.faq__a p { margin: 0; }

/* ---------- contact ---------- */
.contact { padding: 84px 0; }
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact__person { margin-top: 24px; display: flex; gap: 16px; align-items: center; }
.contact__avatar { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--bk-gray-100);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.contact__avatar .rec-dot { width: 26px; height: 26px; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px var(--bk-red); }
.contact__person p { margin: 0; max-width: 380px; font-size: 15px; color: var(--text-muted); line-height: 1.6; }
.contact__coords { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.8; }
.contact__coords a { color: var(--text-body); }
.contact__coords a:hover { color: var(--bk-red); }
.card { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px; }
.contact__form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text-body); }
.field input, .field textarea { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text-body);
  padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--bk-red); box-shadow: var(--ring-focus); }
.field textarea { resize: vertical; min-height: 96px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { margin: 0; color: var(--bk-red-600); font-size: 14px; font-weight: 700; }
.contact__success { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact__success h3 { font-size: 22px; font-weight: 800; }
.contact__success p { margin: 0; color: var(--text-muted); }

/* ---------- footer ---------- */
.footer { background: var(--bk-ink-900); color: #fff; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0; }
.footer__tag { margin-top: 16px; max-width: 280px; font-size: 14px; color: var(--text-on-dark-muted); line-height: 1.6; }
.footer h4, .footer__h { font-size: 13px; margin: 0; text-transform: uppercase; letter-spacing: .06em; color: var(--text-on-dark-muted); }
.footer p { margin-top: 12px; font-size: 14px; line-height: 1.6; }
.footer a { color: #fff; }
.footer a:hover { color: var(--bk-red-400); }
.footer__bar { border-top: 1px solid var(--border-dark); }
.footer__bar .container { padding-top: 18px; padding-bottom: 18px; font-size: 13px; color: var(--text-on-dark-muted); }

.field--human b { font-weight: 800; color: var(--text-strong); }
.field--human input { max-width: 180px; }

.form-note { margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.form-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Let op: verderop staat al een .prose voor de tekst van een projectpagina, mét
   max-width. Die naam hergebruiken versmalde hier de hele <section> in plaats van
   alleen de tekstkolom — vandaar een eigen naam. */
.longread { padding: 8px 0 72px; }
.longread--svc { padding: 8px 0 8px; }
.longread__body { max-width: 68ch; }   /* leesbare regel, links uitgelijnd met de rest */
.longread p { margin: 0 0 18px; line-height: 1.75; color: var(--text-body); }
.longread strong { color: var(--text-strong); }
.longread a { color: var(--bk-red); text-decoration: underline; text-underline-offset: 3px; }
.footer__bar a { color: var(--text-on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- skip link ---------- */
.skiplink { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bk-red); color: #fff;
  padding: 12px 18px; font-weight: 700; border-radius: 0 0 var(--radius-sm) 0; }
.skiplink:focus { left: 0; }

/* ---------- scroll reveal ----------
   Alleen verbergen als JavaScript echt draait: bijna elk blok op de site draagt
   .reveal, dus zonder deze html.js-gate levert een geblokkeerde of gecrashte
   site.js een lege pagina op met enkel de navigatie en de voettekst. */
.reveal { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.js .reveal { opacity: 0; transform: translateY(22px); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .mantra__inner, .contact__inner, .faq__inner { grid-template-columns: 1fr; gap: 36px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav__burger { display: flex; }
  .nav__links { position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; padding: 84px 24px 28px; transform: translateY(-110%); transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-lg); border-bottom: 1px solid var(--border-subtle); }
  .nav__links { visibility: hidden; }
  .nav.open .nav__links { transform: none; visibility: visible; }
  .nav__links > a { padding: 12px 4px; font-size: 17px; border-bottom: 1px solid var(--border-subtle); }
  .nav.open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .lang-toggle { align-self: flex-start; }
  .footer__inner { grid-template-columns: 1fr; }
  .hero__inner { padding: 72px 0 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   Multi-page / broadcast layer (wireframes 2a, 3a, 3b, 5c, 6a)
   ===================================================================== */

/* ---- nav: dark variant, ON AIR, timecode, language dropdown ---- */
.nav--dark { background: rgba(14,14,16,.86); border-bottom-color: var(--border-dark); }
.nav--dark .nav__links > a { color: #fff; }
.nav--dark .nav__links > a:hover, .nav--dark .nav__links > a.is-on { color: var(--bk-red-400); }
.nav--dark .nav__burger span { background: #fff; }
.nav__links > a.is-on { color: var(--bk-red); }
.nav__status { display: inline-flex; align-items: center; gap: 12px; }
.onair { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 900; white-space: nowrap;
  letter-spacing: .14em; color: var(--bk-red); border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 4px 8px; }
.onair--idle { color: var(--text-muted); border-color: var(--border-strong); }
.onair--live { color: var(--bk-red); }
.timecode { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); }
.nav--dark .timecode { color: var(--text-on-dark-muted); }

/* Uitklapmenu "Diensten". Zelfde mechaniek als de taalkiezer: <details>, dus het
   werkt zonder JavaScript en met het toetsenbord. */
.navdrop { position: relative; }
.navdrop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px; color: var(--text-body); white-space: nowrap; }
.navdrop > summary::-webkit-details-marker { display: none; }
.navdrop > summary::marker { content: ""; }
.navdrop > summary.is-on { color: var(--bk-red); }
.nav--dark .navdrop > summary { color: #fff; }
.navdrop .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; transition: transform var(--dur-base) var(--ease-out); }
.navdrop[open] .caret { transform: rotate(180deg); }
.navdrop__menu { position: absolute; left: 0; top: calc(100% + 10px); min-width: 230px; z-index: 30;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 6px 0; }
.navdrop__menu a { display: block; padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--text-body); }
.navdrop__menu a:hover { background: var(--bk-gray-100); color: var(--bk-red); }
.navdrop__all { border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; padding-bottom: 12px !important; }

.langsw { position: relative; }
.langsw > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); }
.langsw > summary::-webkit-details-marker { display: none; }
.langsw > summary::marker { content: ""; }
.faq__item summary::marker { content: ""; }
.nav--dark .langsw > summary { border-color: var(--border-dark); color: #fff; }
.langsw .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.langsw__menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 50; min-width: 72px; }
.langsw__menu a { display: block; padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--text-body); }
.langsw__menu a:hover { background: var(--bk-gray-100); color: var(--bk-red); }

/* ---- live feed bar ---- */
.marquee { display: flex; align-items: center; gap: 0; }
.marquee__label { flex: 0 0 auto; padding: 0 16px; font-size: 11px; font-weight: 900; letter-spacing: .16em;
  color: var(--bk-red); border-right: 1px solid var(--border-dark); }
.marquee__viewport { flex: 1; overflow: hidden; }

/* ---- REC tag on stills ---- */
.rec-tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(14,14,16,.72); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .14em;
  padding: 5px 9px; border-radius: var(--radius-sm); backdrop-filter: blur(4px); }

/* ---- 2a hero: control-room monitor wall ---- */
.hero--wall .hero__inner { padding: 56px 0 84px; }
/* Regiewand: het programmabeeld groot, de drie bronnen eronder in een rij.
   Naast elkaar gezet werden die drie smalle, hoge stroken — dat oogde niet.
   De breedtes zijn begrensd, anders duwt de wand de titel een half scherm
   naar beneden voor je één woord tekst ziet. */
.wall { display: grid; gap: 14px; max-width: 880px; margin: 0 auto; width: 100%; }
.wall__side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  max-width: 520px; width: 100%; margin: 0 auto; }
.tile { display: flex; flex-direction: column; gap: 6px; }
/* Een bronvenster is aanklikbaar; de rode rand is de tally van wat er uit gaat. */
.monitor__btn { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: inherit; }
.monitor__btn .photo { outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color var(--dur-base) var(--ease-out); border-radius: var(--radius-sm); }
.monitor__btn:hover .photo { outline-color: rgba(255,255,255,.35); }
.monitor__btn.is-live .photo { outline-color: var(--bk-red); }
.monitor__btn.is-live .tile__id { color: var(--bk-red-400); }
.monitor__btn.is-live .tile__id::after { content: "PGM"; font-size: 9px; letter-spacing: .1em;
  border: 1px solid currentColor; border-radius: 3px; padding: 1px 4px; }
.tile__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-on-dark-muted); }
.tile__id { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.tile__live { color: var(--bk-red-400); }
.monitor .photo { height: 100%; }
.hero__copy { margin-top: 44px; }
.hero__copy .display { max-width: 15ch; }
.hero--wall .hero__sub { margin-top: 22px; }

/* ---- channel strip ---- */
.channels { background: var(--bk-ink-800); color: #fff; padding: 30px 0 36px; }
.wf-cap { margin: 0 0 16px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.channels__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.channel { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--border-dark);
  border-radius: var(--radius-md); background: rgba(255,255,255,.03); transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-base) var(--ease-out); }
.channel:hover { border-color: var(--bk-red); background: rgba(229,31,34,.08); transform: translateY(-3px); }
.channel__code { font-size: 10px; font-weight: 900; letter-spacing: .16em; color: var(--bk-red); }
.channel__name { font-size: 16px; font-weight: 800; color: #fff; }

/* ---- page headers ---- */
.pagehead { padding: 64px 0 8px; }
.pagehead__lead { margin: 16px 0 0; font-size: 19px; line-height: 1.5; color: var(--text-body); max-width: 60ch; }
.pagehead__body { margin: 14px 0 24px; font-size: 16px; line-height: 1.65; color: var(--text-muted); max-width: 60ch; }
.pagehead--split { padding-bottom: 40px; }
.pagehead__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.breadcrumb { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--bk-red); }

/* ---- service channel pills (6a) ---- */
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 16px var(--container-pad); max-width: var(--container-max);
  margin: 0 auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: 0 0 auto; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  font-size: 13px; font-weight: 800; color: var(--text-muted); transition: all var(--dur-base); }
.pill:hover { border-color: var(--bk-ink-900); color: var(--text-body); }
.pill.is-on { background: var(--bk-ink-900); border-color: var(--bk-ink-900); color: #fff; }

/* ---- what's included ---- */
.included { padding: 56px 0; background: var(--bk-gray-50); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.ticks--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 32px; margin-top: 22px; }
.ticks--grid li { font-size: 15px; color: var(--text-body); }

/* ---- how it works ---- */
.steps-sec { padding: 64px 0; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; counter-reset: s; }
.step { border-top: 2px solid var(--bk-red); padding-top: 16px; }
.step__n { display: block; font-size: 12px; font-weight: 900; letter-spacing: .16em; color: var(--bk-red); margin-bottom: 8px; }
.step h3, .step h2 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.step p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/* ---- cross links ---- */
.crosslinks { padding: 8px 0 64px; }
.crosslinks__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 44px; align-items: start; }
.link-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 800; font-size: 15px; color: var(--bk-red); }
.link-more:hover span { transform: translateX(3px); }
.link-more span { transition: transform var(--dur-base) var(--ease-out); }

/* ---- work / cases (5c) ---- */
.worksec { padding: 30px 0 70px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tag { padding: 7px 15px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: #fff;
  font-family: var(--font-sans); font-size: 13px; font-weight: 800; color: var(--text-muted); cursor: pointer; transition: all var(--dur-base); }
.tag:hover { border-color: var(--bk-ink-900); color: var(--text-body); }
.tag.is-on { background: var(--bk-ink-900); border-color: var(--bk-ink-900); color: #fff; }
.tag--static { cursor: default; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.cases--pair { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.case { display: block; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.case[hidden] { display: none; }
.case .photo { border-radius: 0; }
.case__meta { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.case__meta strong { font-size: 16px; font-weight: 800; color: var(--text-body); }
.case__meta span { font-size: 13px; color: var(--text-muted); }
.case__ch { align-self: flex-start; margin-top: 6px; font-size: 10px; font-weight: 900; letter-spacing: .14em;
  color: var(--bk-red); border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 3px 7px; }

/* ---- studio packages (3a) ---- */
.packages { padding: 64px 0; background: var(--bk-gray-50); border-top: 1px solid var(--border-subtle); }
.packages__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 26px; align-items: start; }
.pkg { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-sm); }
.pkg--featured { border-color: var(--bk-red); box-shadow: var(--shadow-lg); position: relative; }
.pkg__code { font-size: 10px; font-weight: 900; letter-spacing: .16em; color: var(--bk-red); }
.pkg__head h3, .pkg__head h2 { font-size: 22px; font-weight: 800; margin: 6px 0 10px; }
.pkg__star { color: var(--bk-red); }
.pkg__price { margin: 0; font-size: 26px; font-weight: 900; color: var(--text-strong); }
.pkg__price span { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.pkg .ticks { flex: 1; }
.addons { padding: 60px 0; }
.addons__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 22px; }
.addon { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; }
.addon__price { font-weight: 900; color: var(--bk-red); }

/* ---- dark CTA band ---- */
.ctaband { background: var(--bk-ink-900); color: #fff; }
.ctaband__inner { padding: 56px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.ctaband h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin: 0; }

/* ---- showreel ---- */
.showreel { padding: 70px 0; }
.showreel__embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.showreel__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- talk block (home) ---- */
.talk { padding: 20px 0 80px; }
.talk__inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.talk__avatar { width: 120px; flex: 0 0 auto; }
.talk__avatar .photo { border-radius: var(--radius-pill); }
.talk__blurb { margin: 14px 0 20px; font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 46ch; }

/* ---- contact / talkback (3b) ---- */
.contact__inner { display: grid; grid-template-columns: 1.5fr .8fr; gap: 44px; align-items: start; }
.talkback { margin-top: 26px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 26px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field select { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text-body);
  padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; }
.field select:focus { outline: none; border-color: var(--bk-red); box-shadow: var(--ring-focus); }
.contact__form > .field { margin-top: 16px; }
.talkback__send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.contact__side { display: flex; flex-direction: column; gap: 16px; }
.sidecard { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 18px; background: #fff; }
.sidecard p { margin: 0; font-size: 15px; line-height: 1.6; }
.sidecard a { color: var(--text-body); }
.sidecard a:hover { color: var(--bk-red); }
.sidecard--person { display: flex; align-items: center; gap: 14px; }
.person__img { width: 56px; flex: 0 0 auto; }
.person__img .photo { border-radius: var(--radius-pill); }
.sidecard__map { border-radius: var(--radius-lg); }

/* ---- footer list ---- */
.footer__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.footer__list a { font-size: 14px; color: var(--text-on-dark-muted); }
.footer__list a:hover { color: #fff; }
.services--plain { background: #fff; border: 0; padding: 40px 0 70px; }
.svc__lead { margin: 0 0 14px; font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.clients--top { padding: 48px 0 40px; }
.clients--top .btn { margin-top: 24px; }

/* ---- responsive ---- */
/* Longer FR/NL strings crowd the nav — drop the live status before it wraps. */
@media (max-width: 1180px) {
  .nav__status { display: none; }
  .nav__links { gap: 18px; }
}
@media (max-width: 900px) {
  .wall__side { grid-template-columns: repeat(3, 1fr); }
  .pagehead__grid, .crosslinks__grid, .contact__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .nav__status { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .cases--pair { grid-template-columns: 1fr; }
  .ctaband__inner { flex-direction: column; align-items: flex-start; }
  .nav--dark .nav__links { background: var(--bk-ink-900); }
  .nav--dark .nav__links > a { border-bottom-color: var(--border-dark); }
  .langsw__menu { position: static; box-shadow: none; border: 0; display: flex; }
  .navdrop { width: 100%; border-bottom: 1px solid var(--border-subtle); }
  .navdrop > summary { padding: 12px 4px; font-size: 17px; }
  .navdrop__menu { position: static; box-shadow: none; border: 0; padding: 0 0 8px 14px; min-width: 0; }
  .navdrop__menu a { padding: 8px 0; font-size: 15px; }
  .navdrop__all { border-bottom: 0; }
}

/* ---- 5b About / team ---- */
.pullquote { padding: 20px 0 56px; }
.pullquote blockquote { margin: 0; max-width: 22ch; font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.25; letter-spacing: -.02em; color: var(--text-strong);
  border-left: 4px solid var(--bk-red); padding-left: 26px; max-width: 30ch; }
.pullquote__by { margin: 16px 0 0 30px; font-size: 14px; font-weight: 700; color: var(--text-muted); }
.crew { padding: 56px 0 64px; background: var(--bk-gray-50); border-top: 1px solid var(--border-subtle); }
.crew__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; margin-top: 24px; }
.crew__member { margin: 0; }
.crew__member .photo { border-radius: var(--radius-lg); }
.crew__member figcaption { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.crew__member strong { font-size: 16px; font-weight: 800; color: var(--text-body); }
.crew__member span { font-size: 13px; color: var(--text-muted); }
.stats { background: var(--bk-ink-900); color: #fff; }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; padding: 52px 0; text-align: center; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__value { font-size: clamp(34px, 5vw, 54px); font-weight: 900; color: var(--bk-red); line-height: 1; }
.stat__label { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark-muted); }

/* ---- studio gallery ---- */
.gallery { padding: 8px 0 64px; }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 22px; }
.gallery__item { margin: 0; }
.gallery__item .photo { transition: transform var(--dur-base) var(--ease-out); }
.gallery__item:hover .photo { transform: scale(1.02); }

/* ---- studio booking form ---- */
.booking { padding: 64px 0 72px; background: var(--bk-gray-50); border-top: 1px solid var(--border-subtle); scroll-margin-top: 80px; }
.booking__inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: start; }
.booking .talkback { margin-top: 0; }
.booking__form .field { margin-top: 0; }
.booking__form > .field { margin-bottom: 16px; }
.booking.is-open { box-shadow: inset 0 3px 0 var(--bk-red); }
.pkg.is-chosen { border-color: var(--bk-red); box-shadow: var(--shadow-lg); }
.pkg.is-chosen .pkg__code { color: var(--bk-red); }
@media (max-width: 900px) { .booking__inner { grid-template-columns: 1fr; gap: 28px; } }

/* ---- video in a media slot (silent loop; image = poster) ---- */
.photo--video { background: var(--bk-ink-900); }
.photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* light rich-text inside content */
.pagehead__body ul, .pagehead__body ol, .mantra__body ul, .faq__a ul, .faq__a ol { margin: 8px 0 0 18px; padding: 0; }
.pagehead__body a, .mantra__body a, .faq__a a, .hero__sub a { text-decoration: underline; }

/* ---- project page (/work/:path) ---- */
.crumb { display: inline-block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 18px; }
.crumb:hover { color: var(--bk-red); }
.casehead { padding-bottom: 28px; }
.casehero { padding: 0 0 40px; }
.casehero .photo { border-radius: var(--radius-lg); }
.photo--player video { background: #000; }
.casebody { padding: 8px 0 56px; }
.casebody__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
.prose { font-size: 17px; line-height: 1.7; color: var(--text-body); max-width: 68ch; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px 20px; padding: 0; }
.prose li { margin: 4px 0; }
.prose strong { font-weight: 800; }
.prose a { text-decoration: underline; }
.facts { margin: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px 22px; background: #fff; }
.facts__h { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--bk-red); margin-bottom: 10px; }
.fact { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.fact dt { font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.fact dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-body); }
.fact dd a { text-decoration: underline; }
.case__more { margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--bk-red); }
.worksec--related { padding-top: 8px; }
@media (max-width: 860px) { .casebody__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- media slot: one big + two small (layout "trio") ---- */
.mediatrio { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; width: 100%; }
.mediatrio__main, .mediatrio__side { min-height: 0; min-width: 0; }
.mediatrio__side { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.photo--fill { width: 100%; height: 100%; margin: 0; }
@media (max-width: 640px) {
  .mediatrio { grid-template-columns: 1fr; gap: 10px; aspect-ratio: auto !important; }
  .mediatrio__main { aspect-ratio: 16 / 10; }
  .mediatrio__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .mediatrio__side .photo--fill { aspect-ratio: 1 / 1; height: auto; }
}

/* ---- dry rental ---- */
.steps--inline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 28px 0 0; padding: 0; list-style: none; }
.steps--inline .step h3, .steps--inline .step h2 { font-size: 16px; margin: 6px 0 4px; }
.steps--inline .step p { margin: 0; font-size: 14px; color: var(--text-muted); }
.rental { padding: 34px 0 64px; }
.rental__grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.rental__dates { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px 18px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); background: #fff; position: sticky; top: 74px; z-index: 3; }
.rental__dates label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); }
.rental__dates input { font: inherit; padding: 9px 11px; border: 1px solid var(--border-subtle); border-radius: 9px; }
.rental__hint { flex: 1 1 220px; margin: 0; font-size: 13px; color: var(--text-muted); }
.rental__empty { margin: 28px 0; font-size: 17px; color: var(--text-muted); }
/* categorieën in een eigen kolom naast het raster */
.rental__browse { display: grid; grid-template-columns: 172px 1fr; gap: 26px; align-items: start; margin-top: 26px; }
.rentcats { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 2px; }
.rentcats__h { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 8px; }
.rentcat { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  font: inherit; font-size: 14px; font-weight: 700; text-align: left; color: var(--text-body);
  background: none; border: 0; border-radius: 9px; padding: 8px 10px; cursor: pointer;
  transition: background var(--dur-base), color var(--dur-base); }
.rentcat span { font-size: 11px; font-weight: 800; color: var(--text-muted); }
.rentcat:hover { background: var(--bk-gray-100); }
.rentcat.is-on { background: var(--bk-ink-900); color: #fff; }
.rentcat.is-on span { color: rgba(255,255,255,.6); }
/* alle kaarten even hoog, ook over de rijen heen — een rommelig raster leest traag */
.rentgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 14px; }
.rentcard[hidden] { display: none; }
.rentcard__body h3 a { color: inherit; }
.rentcard__body h3 a:hover { color: var(--bk-red); }
.rentcard { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  overflow: hidden; background: #fff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rentcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rentcard.is-added { border-color: var(--bk-red); box-shadow: 0 0 0 1px var(--bk-red) inset; }
.rentcard.is-added .js-rent-add { border-color: var(--bk-red); color: var(--bk-red); }
.rentcard__img { position: relative; aspect-ratio: 5 / 2; background: var(--bk-gray-100); display: flex; align-items: center; justify-content: center; }
.rentcard__img img { width: 100%; height: 100%; object-fit: cover; }
.rentcard__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.rentcard__body h3 { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* de omschrijving is meegenomen, niet de essentie: één regel, netjes afgekapt */
.rentcard__body p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rentcard__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.rentcard__price { font-weight: 800; font-size: 14px; white-space: nowrap; }
.rentcard__price small { font-weight: 600; font-size: 10px; color: var(--text-muted); }
/* de knop past er naast de prijs niet bij op deze breedte, dus staat hij er
   bewust onder over de volle breedte in plaats van er half naast te vallen */
.rentcard .js-rent-add { flex: 1 1 100%; padding: 6px 10px; font-size: 11.5px; min-height: 30px; border-width: 1px; }
.rental__basket { position: sticky; top: 74px; }
.basket { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: #fff; padding: 20px; box-shadow: var(--shadow-lg); }
.basket h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; font-weight: 900; }
.basket__lines { display: flex; flex-direction: column; gap: 8px; }
.basket__lines .hint { margin: 0; font-size: 13px; color: var(--text-muted); }
.bline { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; font-size: 13px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.bline__t { font-weight: 700; }
.bline__q { display: inline-flex; align-items: center; gap: 4px; }
.bline__q button { width: 22px; height: 22px; border: 1px solid var(--border-subtle); background: #fff; border-radius: 6px; cursor: pointer; font-weight: 800; line-height: 1; }
.bline__q button:hover { border-color: var(--bk-red); color: var(--bk-red); }
.bline__p { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bline__x { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.bline__x:hover { color: var(--bk-red); }
.basket__tot { margin: 14px 0 0; font-size: 13px; }
.basket__tot > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.basket__tot dt, .basket__tot dd { margin: 0; }
.basket__tot dd { font-variant-numeric: tabular-nums; }
.basket__grand { font-weight: 900; font-size: 15px; border-top: 1px solid var(--border-subtle); margin-top: 6px; padding-top: 8px !important; }
.basket__note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.basket__form { margin-top: 16px; border-top: 1px solid var(--border-subtle); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.basket__form h3 { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.basket__form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.basket__form input, .basket__form textarea { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--border-subtle); border-radius: 9px; }
.basket__form .btn { margin-top: 4px; justify-content: center; }
.basket__ok h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; }
.basket__ok p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 860px) { .rentgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rentgrid { grid-template-columns: 1fr; } }
@media (max-width: 1160px) {
  .rental__browse { grid-template-columns: 1fr; gap: 16px; }
  .rentcats { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .rentcats__h { width: 100%; margin-bottom: 2px; }
  .rentcat { width: auto; border: 1px solid var(--border-subtle); }
}
@media (max-width: 1000px) {
  .rental__grid { grid-template-columns: 1fr; gap: 26px; }
  .rental__basket { position: static; }
  .steps--inline { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px) { .rental__dates { position: static; } }
.basket__form .opt { flex-direction: row; align-items: flex-start; gap: 9px; cursor: pointer; font-weight: 400; color: var(--text-body); }
.basket__form .opt input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--bk-red); flex: none; }
.basket__form .opt b { font-size: 13px; font-weight: 800; }
.basket__form .opt em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bk-red); background: var(--bk-red-tint); border-radius: var(--radius-pill); padding: 2px 7px; margin-left: 4px; white-space: nowrap; }
.basket__form .opt small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
/* label heeft display:flex — zonder dit wint dat van het hidden-attribuut */
.basket__form label[hidden], .basket [hidden] { display: none !important; }

/* ---- dry rental: pagina per artikel ---- */
.rentitem { padding-bottom: 40px; }
.rentitem__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.rentitem__media .photo { border-radius: var(--radius-lg); }
.rentitem__info .crumb { margin-bottom: 14px; }
.rentitem__price { margin: 14px 0 0; font-size: 26px; font-weight: 900; }
.rentitem__price small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.rentitem__desc { margin: 18px 0 0; font-size: 16px; line-height: 1.65; color: var(--text-body); max-width: 56ch; }
.rentitem__act { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rentitem__act [data-rent-count] { font-size: 13px; }
.rentitem__note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); max-width: 52ch; }
.rentitem__info.is-added .js-rent-add { background: var(--bk-ink-900); }
/* kaartjes "meer uit deze categorie": zelfde tegel, maar helemaal aanklikbaar */
.rentgrid--related { margin-top: 20px; }
.rentcard--link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.rentcard--link .rentcard__img { display: flex; align-items: center; justify-content: center; }
.rentcard--link .rentcard__body { display: flex; }
.rentcard--link h3 { margin: 0; font-size: 14px; font-weight: 800; }
@media (max-width: 860px) { .rentitem__grid { grid-template-columns: 1fr; gap: 24px; } }

/* specificaties + extra foto's op een verhuurartikel */
.specs { width: 100%; border-collapse: collapse; margin: 22px 0 0; font-size: 14px; }
.specs caption { text-align: left; font-size: 11px; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); padding-bottom: 8px; }
.specs th, .specs td { padding: 9px 0; border-top: 1px solid var(--border-subtle); vertical-align: top; text-align: left; }
.specs th { width: 42%; font-weight: 700; color: var(--text-muted); }
.specs td { font-weight: 600; color: var(--text-body); }
.rentthumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rentthumb { width: 68px; aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--border-subtle);
  border-radius: 8px; overflow: hidden; background: var(--bk-gray-100); cursor: pointer; }
.rentthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rentthumb.is-on { border-color: var(--bk-red); box-shadow: 0 0 0 1px var(--bk-red) inset; }

/* ---------- telefoon: zijmarge voor de hero ----------
   .hero__inner zet met een padding-shorthand de zijmarge van .container op 0.
   Op een breed scherm is dat prima (de container is dan toch al ingesprongen),
   op een telefoon plakten de titel en de regiewand tegen de schermrand.
   Deze blokken staan bewust helemaal achteraan: een media query telt niet mee
   voor de specificiteit, dus moesten ze ná .hero--wall .hero__inner komen. */
@media (max-width: 720px) {
  .hero__inner,
  .hero--wall .hero__inner { padding-left: var(--container-pad); padding-right: var(--container-pad); }
}