/* Digital Studio website / (c) Digital Studio - digital-studio.be */
/* Eigen onderdelen bovenop de basisstijl */

:root {
  --studio-red: #E30613;
  --studio-ink: #0b0b0d;
  --studio-line: rgba(0, 0, 0, 0.14);
}

html { scroll-padding-top: 6rem; }
body { background: #fff; color: #454545; }
:focus-visible { outline: 2px solid var(--studio-red); outline-offset: 3px; }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 3000;
  background: var(--studio-red); color: #fff; padding: 0.75rem 1rem; font-weight: 600;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Logo als tekst */
.studio-logo, .footer__logo {
  font-family: var(--font-primary);
  font-weight: 800; letter-spacing: -0.035em; text-decoration: none;
}
.studio-logo { font-size: 1.5rem; }
.header__logo .studio-logo { position: static; opacity: 1; }
.footer__logo { font-size: 1.75rem; }

/* Rechterkant van de header */
.header__right { display: flex; align-items: center; gap: 1.5rem; position: relative; z-index: 1; }
.studio-header-cta {
  display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.25rem;
  border-radius: 999px; border: 1px solid currentColor; color: #000;
  font-weight: 600; font-size: 0.9375rem; transition: background-color .3s, color .3s;
}
.studio-header-cta:hover { background: #000; color: #fff; }
.header.-dark .studio-header-cta { color: #fff; }
.header.-dark .studio-header-cta:hover { background: #fff; color: #000; }
.header.-dark.is-sticky.-sticky-light .studio-header-cta { color: #000; }
.header.-dark.is-sticky.-sticky-light .studio-header-cta:hover { background: #000; color: #fff; }
.nav-button-open { background: none; border: 0; padding: 0.5rem; cursor: pointer; color: inherit; }
@media (max-width: 575px) { .studio-header-cta { display: none; } }

/* Menu: actieve pagina */
.navList a[aria-current="page"] { color: var(--studio-red) !important; }

/* Kopjes van binnenpagina's */
.studio-pagehead { position: relative; overflow: hidden; }
.studio-pagehead__shape {
  position: absolute; width: 46rem; height: 46rem; right: -14rem; top: -18rem; border-radius: 50%;
  background: #fff; box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.07); pointer-events: none;
}
.studio-pagehead .container { position: relative; z-index: 1; }
.studio-pagehead__title { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.02; }
.studio-pagehead__intro { max-width: 40rem; }
.studio-seohead .masthead__title { font-size: clamp(2.25rem, 5.4vw, 4.5rem); line-height: 1.04; }
.studio-seohead__intro { max-width: 42rem; }
.studio-seohead .breadcrumbs { margin-bottom: 1.5rem; }

/* Vergelijking zelf vs Digital Studio */
.studio-versus__old { color: #6b6b71; text-decoration: line-through; text-decoration-color: rgba(227, 6, 19, 0.6); }

/* AI-blok naast beeld: niet te ver naar links schuiven op kleine schermen */
@media (max-width: 991px) { .studio-ai { margin-left: 0 !important; } }

/* Pakketten kiezen */
.studio-plan { display: block; position: relative; cursor: pointer; height: 100%; transition: transform .4s cubic-bezier(.25,1,.5,1), box-shadow .4s; border: 2px solid transparent; }
.studio-plan:hover { transform: translateY(-4px); }
.studio-plan__input { position: absolute; opacity: 0; pointer-events: none; }
label.studio-plan:has(.studio-plan__input:checked) { border-color: var(--studio-red); }
label.studio-plan:has(.studio-plan__input:focus-visible) { outline: 2px solid var(--studio-red); outline-offset: 4px; }
.studio-plan__pick { display: inline-flex; align-items: center; gap: 0.625rem; font-weight: 600; }
.studio-plan__dot { width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 2px solid currentColor; position: relative; }
.studio-plan__input:checked ~ .priceCard__content .studio-plan__dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--studio-red);
}
.studio-plan__input:checked ~ .priceCard__content .studio-plan__pick { color: var(--studio-red) !important; }

/* Keuzebolletjes */
.studio-chips { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.studio-chip { position: relative; cursor: pointer; margin: 0; }
.studio-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.studio-chip span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem;
  border: 1px solid #c9c9cf; border-radius: 999px; color: #000; font-weight: 500; font-size: 0.9375rem;
  transition: background-color .25s, border-color .25s, color .25s;
}
.studio-chip:hover span { border-color: #000; }
.studio-chip input:checked + span { background: #000; border-color: #000; color: #fff; }
.studio-chip input:focus-visible + span { outline: 2px solid var(--studio-red); outline-offset: 3px; }
.studio-config { border-top: 1px solid var(--studio-line); padding-top: 3rem; }
.studio-legend { font-size: 0.875rem; font-weight: 500; color: #000; margin-bottom: 1rem; }

/* Projectkaarten zonder foto */
.studio-reference-card { background: var(--studio-ink); overflow: hidden; }
.studio-reference-card--1 { background: #f1f1f3; }
.studio-reference-card--2 { background: var(--studio-red); }
.studio-reference-card__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.studio-reference-card__name {
  font-family: var(--font-primary); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95;
  font-size: clamp(2.25rem, 5vw, 4.25rem); color: #fff; max-width: 10ch;
  transition: transform .8s cubic-bezier(.25,1,.5,1);
}
.studio-reference-card__host { color: rgba(255, 255, 255, 0.65); font-weight: 500; }
.studio-reference-card--1 .studio-reference-card__name { color: #000; }
.studio-reference-card--1 .studio-reference-card__host { color: #6b6b70; }
.studio-reference-card--2 .studio-reference-card__name .text-accent { color: #000; }
.portfolioCard:hover .studio-reference-card__name { transform: translateY(-6px); }
.studio-reference-card::after {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  right: -22%; bottom: -30%; background: rgba(255, 255, 255, 0.06);
  transition: transform 1.2s cubic-bezier(.25,1,.5,1);
}
.studio-reference-card--1::after { background: #fff; box-shadow: 0 2rem 4rem rgba(0,0,0,.06); }
.portfolioCard:hover .studio-reference-card::after { transform: scale(1.12); }

/* Stappen */
.studio-steps { list-style: none; padding: 0; margin-bottom: 0; }

/* Lijst met links (regio's, diensten) */
.studio-linklist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--studio-line); }
.studio-linklist li { border-bottom: 1px solid var(--studio-line); }
.studio-linklist a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 0; color: #000; font-weight: 500; font-size: 1.125rem;
  transition: color .3s, padding-left .4s cubic-bezier(.25,1,.5,1);
}
.studio-linklist a:hover { color: var(--studio-red); padding-left: 0.5rem; }
.studio-linklist .icon { flex: none; width: 1rem; height: 1rem; }

/* Overzichtspagina's */
.studio-hubrow { color: inherit; transition: background-color .3s; }
.studio-hubrow:hover h2 { color: var(--studio-red) !important; }

/* Vragen */
.studio-faq { border-top: 1px solid #000; }
.studio-faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; padding: 1.5rem 0;
}
.studio-faq__item summary::-webkit-details-marker { display: none; }
.studio-faq__item summary .icon { flex: none; color: var(--studio-red); transition: transform .4s cubic-bezier(.25,1,.5,1); }
.studio-faq__item[open] summary .icon { transform: rotate(45deg); }
.studio-faq__item summary:hover { color: var(--studio-red) !important; }
.studio-faq__a { padding-bottom: 1.5rem; max-width: 44rem; }
.studio-faq__a p { margin-bottom: 0.75rem; }
.studio-faq__a a { color: #000; text-decoration: underline; text-decoration-color: var(--studio-red); }

/* Artikels en dienstpagina's */
.blogPost.-single .blogPost__content h2 { margin-top: 2.5rem; }
.blogPost.-single .blogPost__content a:not(.button) { color: #000; text-decoration: underline; text-decoration-color: var(--studio-red); text-underline-offset: 0.2em; }
.blogPost.-single .blogPost__content a:not(.button):hover { color: var(--studio-red); }
.blogPost.-single .blogPost__content .button { margin-top: 1rem; }
.blogPost.-single .blogPost__content ul.ticks { list-style: none; padding-left: 0; }
.blogPost.-single .blogPost__content ul.ticks li { position: relative; padding-left: 1.75rem; }
.blogPost.-single .blogPost__content ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 0.75rem; height: 0.375rem;
  border-left: 2px solid var(--studio-red); border-bottom: 2px solid var(--studio-red); transform: rotate(-45deg);
}
.studio-sidebox { padding: 2rem; position: sticky; top: 7rem; background: #fff; }

/* Contact */
.studio-contact-side a { display: inline-block; }
.studio-break { overflow-wrap: anywhere; }
.studio-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.studio-check { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; color: #000; font-size: 0.9375rem; }
.studio-check input { width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; accent-color: var(--studio-red); flex: none; }
.js-ajax-form.is-sent > div:not(.js-ajax-form-alert) { display: none; }
.js-ajax-form.is-sent .ajax-form-alert__content { font-size: 1.75rem; font-weight: 700; color: #000; }

/* CTA-band */
.studio-cta { position: relative; overflow: hidden; }

/* Toestemming statistieken */
.studio-consent {
  position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 2500; max-width: 30rem; margin-left: auto;
  background: #fff; color: #000; padding: 1.25rem 1.5rem; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}
.studio-consent p { margin-bottom: 1rem; font-size: 0.9375rem; }
.studio-consent__buttons { display: flex; gap: 0.625rem; flex-wrap: wrap; }

/* Minder beweging */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .split__line { transform: none !important; }
  [data-anim], [data-anim-child] { opacity: 1 !important; transform: none !important; }
}

/* Knoppen: geen hoofdletters per woord, nette tussenruimte */
.button { text-transform: none !important; }
.studio-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
.studio-price { display: flex; flex-direction: column; gap: 0.25rem; }
.studio-price__from { font-size: 0.875rem; font-weight: 500; opacity: 0.7; }
.studio-steps .number { display: block; line-height: 1; }

/* Formulier: keuzebolletjes en vinkjes niet als volle breedte-labels */
.contact-form.-type-1 label.studio-chip { width: auto; }
.contact-form.-type-1 label.studio-check { width: 100%; display: flex; }
.contact-form.-type-1 fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Menu: lange submenu's passen ook op kleinere schermen */
.navList .subnav-list > li > a { font-size: clamp(1.25rem, 2.6vh, 2rem); }
.nav__content__left { max-height: calc(100vh - 9rem); overflow-y: auto; scrollbar-width: none; }
.nav__content__left::-webkit-scrollbar { display: none; }
.nav__info h2 { color: #8b8b93; }

/* Eenvoudige losse pagina's (uitschrijven, bevestigen) */
.studio-simple { min-height: 100vh; padding: 2.5rem 0; position: relative; overflow: hidden; }
.studio-simple::after { content: ""; position: absolute; width: 40rem; height: 40rem; right: -12rem; bottom: -16rem; border-radius: 50%; background: #fff; box-shadow: 0 2rem 6rem rgba(0,0,0,.07); z-index: -1; }
.studio-simple__body { max-width: 40rem; margin-top: 18vh; }


/* ---------------------------------------------------------------
   Rustige basis: kleinere titels, veel witruimte, foto's
--------------------------------------------------------------- */
.studio-eyebrow {
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: #6b6b71; margin: 0 0 1.25rem;
}
.studio-eyebrow.text-white { color: rgba(255,255,255,.7) !important; }
.studio-h2 {
  font-family: var(--font-primary); font-weight: 600; color: #0b0b0d; margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.625rem); line-height: 1.15; letter-spacing: -0.025em;
}
.studio-lead { font-size: 1.125rem; line-height: 1.7; color: #5a5a60; margin: 0; }
.studio-lead.text-white { color: rgba(255,255,255,.85) !important; }
.studio-prose .studio-lead + .studio-lead { margin-top: 1.25rem; }
.studio-quote { font-family: var(--font-primary); font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.4; color: #0b0b0d; font-weight: 500; letter-spacing: -0.015em; margin: 0; }

.studio-link {
  display: inline-flex; align-items: center; gap: .625rem; font-weight: 600; color: #0b0b0d;
  padding-bottom: .25rem; border-bottom: 1px solid currentColor; transition: gap .3s, color .3s;
}
.studio-link .icon { width: 1rem; height: 1rem; }
.studio-link:hover { gap: 1rem; color: var(--studio-red); }
.studio-link--light { color: #fff; }
.studio-link--light:hover { color: #fff; opacity: .8; }

/* Startpagina */
.studio-hero { padding-top: clamp(9rem, 18vh, 12rem); }
.studio-hero__title {
  font-family: var(--font-primary); font-weight: 600; color: #0b0b0d; margin: 0;
  font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.12; letter-spacing: -0.03em;
}
.studio-hero__media { margin-top: clamp(3rem, 7vh, 5rem); }

/* Foto's */
.studio-photo { position: relative; overflow: hidden; background: #f1f1f3; }
.studio-photo .bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; }
.studio-photo--wide { height: clamp(18rem, 72vh, 46rem); }
.studio-photo--tall { aspect-ratio: 4 / 5; }
.studio-photo--square { aspect-ratio: 1 / 1; }

/* Genummerde rijen (diensten, waarden) */
.studio-rows { list-style: none; padding: 0; margin-bottom: 0; border-top: 1px solid var(--studio-line); }
.studio-rows__item {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; align-items: baseline;
  padding: 1.75rem 0; border-bottom: 1px solid var(--studio-line);
}
.studio-rows__num { font-size: .875rem; color: #6b6b71; font-weight: 500; }
.studio-rows__title { font-family: var(--font-primary); font-size: 1.375rem; font-weight: 600; color: #0b0b0d; margin: 0; letter-spacing: -0.015em; }
.studio-rows__text { margin: 0; color: #5a5a60; font-size: 1.0625rem; line-height: 1.6; }
@media (max-width: 767px) {
  .studio-rows__item { grid-template-columns: 2.5rem 1fr; gap: .5rem 1rem; padding: 1.25rem 0; }
  .studio-rows__text { grid-column: 2; }
}

/* Werk */
.studio-work__image { overflow: hidden; }
.studio-work__image .bg-image { position: absolute; inset: 0; background-size: cover; background-position: center top; transition: transform 1.2s cubic-bezier(.25,1,.5,1); }
.studio-work:hover .studio-work__image .bg-image { transform: scale(1.04); }
.studio-work__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.25rem; }
.studio-work__title { font-family: var(--font-primary); font-size: 1.25rem; font-weight: 600; color: #0b0b0d; margin: 0; }
.studio-work__category { font-size: .875rem; color: #6b6b71; margin: 0; text-align: right; }
.studio-reference-card, .studio-reference-card--1, .studio-reference-card--2 { background: #f1f1f3; }
.studio-reference-card::after { display: none; }
.studio-reference-card__name { color: #0b0b0d !important; font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.5rem); max-width: 14ch; }
.studio-reference-card__host { color: #6b6b71 !important; }
.studio-reference-card--empty { background: transparent; border: 1px dashed rgba(0,0,0,.2); }

/* Kop van binnenpagina's */
.studio-pagehead__title {
  font-family: var(--font-primary); font-weight: 600; color: #0b0b0d; margin: 0;
  font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.12; letter-spacing: -0.03em;
}
.bg-dark-1 .studio-pagehead__title { color: #fff; }
.studio-pagehead__intro { max-width: 36rem; }
.studio-pagehead .breadcrumbs { margin-bottom: 2rem; }

/* Contactblok onderaan */
.studio-cta { padding: clamp(6rem, 14vh, 9rem) 0; color: #fff; }
.studio-cta .bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; }
.studio-cta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,11,13,.82) 0%, rgba(11,11,13,.55) 60%, rgba(11,11,13,.35) 100%); }
.studio-cta .container { position: relative; z-index: 2; }

/* Contact */
.studio-mail { display: inline-block; font-family: var(--font-primary); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; color: #0b0b0d; border-bottom: 1px solid currentColor; }
.studio-mail:hover { color: var(--studio-red); }
.studio-more { border-top: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); padding: 1.125rem 0; }
.studio-more summary { cursor: pointer; font-weight: 600; color: #0b0b0d; list-style: none; display: flex; justify-content: space-between; }
.studio-more summary::-webkit-details-marker { display: none; }
.studio-more summary span { font-weight: 400; color: #6b6b71; margin-left: .5rem; margin-right: auto; }
.studio-more summary::after { content: "+"; font-size: 1.25rem; line-height: 1; }
.studio-more[open] summary::after { content: "-"; }
.studio-cta .studio-h2 { color: #fff; }
.studio-cta .bg-image { z-index: 0; }
@media (max-width: 767px) {
  .studio-photo--wide { height: 26rem; }
  .studio-hero { padding-top: 8rem; }
}
.breadcrumbs { padding-left: 0; list-style: none; font-size: .875rem; color: #6b6b71 !important; }
.breadcrumbs-item { font-size: .875rem; }
.breadcrumbs-item.active { color: #0b0b0d; }
.bg-dark-1 .breadcrumbs-item.active { color: #fff; }

/* Klantenraster zonder logo */
.clientsItem .studio-client-name { font-family: var(--font-primary); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: #0b0b0d; text-align: center; padding: 0 1rem; }
.clientsItem.ratio-1\:1 .studio-client-name { font-size: 1.625rem; }
a.clientsItem { display: block; }

/* Sociale iconen zonder lettertype */
.studio-social-svg { width: 1em; height: 1em; display: block; }

/* Volledig-scherm-menu: hoger en iets compacter, ook op laptops */
.nav__container { padding-top: 2.25rem; padding-bottom: 3rem; }
.nav .nav-button-back .icon, .nav .nav-btn-close .icon { width: 3rem; height: 3rem; }
.nav__content { padding-top: 2.75rem; align-items: flex-start; }
.navList li a { font-size: clamp(2rem, 3.1vw, 2.75rem); padding: 6px 0; }
.subnav-list li a { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.nav__info__item { margin-top: 2.25rem; }
@media (min-width: 1600px) {
  .nav__container { padding-top: 2.75rem; }
  .nav-button-back .icon, .nav-btn-close .icon { width: 3.2vw !important; height: 3.2vw !important; }
  .nav__content { padding-top: 3rem; }
  .navList li a { font-size: 2.7vw; }
  .subnav-list li a { font-size: 2.2vw; }
}
@media (max-height: 820px) and (min-width: 768px) {
  .nav__content { padding-top: 1.5rem; }
  .navList li a { font-size: clamp(1.75rem, 2.6vw, 2.4rem); padding: 4px 0; }
  .subnav-list li a { font-size: clamp(1.5rem, 2.2vw, 2rem); }
}
@media (max-width: 767px) {
  .nav__container { padding-top: 1rem; }
  .nav .nav-button-back .icon, .nav .nav-btn-close .icon { width: 2.5rem; height: 2.5rem; }
  .nav__content { padding-top: 1.75rem; }
  .navList li a { font-size: 1.875rem; padding: 4px 0; }
  .subnav-list li a { font-size: 1.625rem; }
}
@media (max-width: 575px) {
  .nav__content__right { flex: 0 0 100%; max-width: 100%; margin-top: 2.5rem; }
  .nav__info { display: block; }
  .nav__info__item { margin-top: 1.5rem; }
  .nav__info__item a, .nav__info__item p { font-size: 1rem; }
}

/* Regels van titels die omhoog schuiven */
.studio-line-mask { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.studio-line { will-change: transform; }

/* Gidsen-slider op de startpagina */
.studio-guides .swiper-slide { height: auto; }
.studio-guides__nav { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 2.5rem; }
.studio-guides__nav .navButton__item { width: 3.25rem; height: 3.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.studio-guides__nav .navButton__item .icon { width: 1.125rem; height: 1.125rem; }
.studio-guides__nav .swiper-button-disabled { opacity: .3; pointer-events: none; }

/* Bronnen onder een gids */
.studio-sources { border-top: 1px solid var(--studio-line); padding-top: 1.5rem; }
.studio-sources ol { padding-left: 1.25rem; margin: 0; }
.studio-sources li { margin-top: .4rem; font-size: .9375rem; }
.studio-sources a { color: #0b0b0d; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.studio-sources a:hover { color: var(--studio-red); }

/* Slider: alle titels even zwart (en wit op gsm), ongeacht h1 of p */
.sliderMain.-type-3 .slider__title { color: #0b0b0d; }
@media (max-width: 767px) { .sliderMain.-type-3 .slider__title { color: #fff; } }
.sliderMain.-type-3 .slider__title .text-accent, .sectionHeading__title .text-accent, h1 .text-accent, h2 .text-accent { color: var(--studio-red); }
.sliderMain.-type-3 .studio-hero-title { padding-right: 2.5rem; }
@media (min-width: 768px) { .sliderMain.-type-3 .slider__title { font-size: clamp(2.25rem, 3.3vw, 3.5rem); overflow-wrap: break-word; hyphens: auto; } }
@media (max-width: 767px) { .sliderMain.-type-3 .studio-hero-title { padding-right: 0; } }

/* Juridische pagina's */
.studio-legal .blogPost__content h2 { margin-top: 2.5rem; }
.studio-legal .blogPost__content h2:first-child { margin-top: 0; }
.studio-legal-table { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.studio-legal-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.studio-legal-table th, .studio-legal-table td { text-align: left; vertical-align: top; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.studio-legal-table th { font-weight: 500; color: #0b0b0d; }
.studio-legal-table td:first-child { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; }
.studio-legal-note { padding: 1rem 1.25rem; background: rgba(0, 0, 0, 0.04); }
.studio-legal__date { color: rgba(0, 0, 0, 0.55); }
.studio-legal-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

@media (max-width: 575px) {
  .studio-legal-table table, .studio-legal-table tbody, .studio-legal-table tr, .studio-legal-table td { display: block; min-width: 0; }
  .studio-legal-table thead { display: none; }
  .studio-legal-table tr { padding: 1rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
  .studio-legal-table td { border: 0; padding: 0.125rem 0; }
  .studio-legal-table td:first-child { font-weight: 600; margin-bottom: 0.25rem; }
  .studio-legal-table td:nth-child(2)::before { content: "Soort: "; color: rgba(0, 0, 0, 0.55); }
  .studio-legal-table td:nth-child(4)::before { content: "Bewaard: "; color: rgba(0, 0, 0, 0.55); }
  .studio-legal-table td:nth-child(5)::before { content: "Type: "; color: rgba(0, 0, 0, 0.55); }
}

/* Slider op gsm: rekening houden met de adres- en knoppenbalk van de browser,
   tekst en knop iets hoger, en uitgaande slides netjes afsnijden */
@media (max-width: 767px) {
  .sliderMain.-type-3,
  .sliderMain.-type-3 .swiper-container { height: calc(100vh - 3.75rem); height: calc(100svh - 3.75rem); }
  .sliderMain.-type-3 .slider__content__wrapper { align-items: center; padding-bottom: 6.5rem; overflow: hidden; }
  .sliderMain.-type-3 .slider__subtitle { margin-bottom: 1.25rem; }
  .sliderMain.-type-3 .slider__button { margin-top: 1.5rem; }
  .sliderMain.-type-3 .slider__title { font-size: clamp(1.875rem, 8.5vw, 2.5rem); }
}
@media (max-width: 767px) and (max-height: 620px) {
  .sliderMain.-type-3 .slider__content__wrapper { padding-bottom: 5rem; }
  .sliderMain.-type-3 .slider__title { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
}

/* Foto en contactblok tussen lange teksten */
.blogPost__content .studio-inline-image { margin: 3rem 0; }
.blogPost__content .studio-inline-image .bg-image { border-radius: 0; }
.blogPost__content .studio-inline-cta { margin: 3rem 0; padding: 2.25rem 2.5rem; background: #f5f5f3; border-left: 3px solid var(--studio-red); }
.blogPost__content .studio-inline-cta__title { font-size: 1.5rem; line-height: 1.3; font-weight: 600; color: #0b0b0d; margin: 0; letter-spacing: -0.01em; }
.blogPost__content .studio-inline-cta__text { margin: 0.75rem 0 0; }
.blogPost__content .studio-inline-cta .button { margin-top: 1.5rem; }
@media (max-width: 575px) {
  .blogPost__content .studio-inline-image, .blogPost__content .studio-inline-cta { margin: 2.25rem 0; }
  .blogPost__content .studio-inline-cta { padding: 1.75rem 1.5rem; }
  .blogPost__content .studio-inline-cta__title { font-size: 1.3rem; }
}
.blogPost.-single .blogPost__content .studio-inline-cta__title { font-size: 1.5rem; line-height: 1.3; font-weight: 600; color: #0b0b0d; letter-spacing: -0.01em; }
.blogPost.-single .blogPost__content .studio-inline-cta__text { margin-top: 0.75rem; font-size: 1.0625rem; line-height: 1.7; color: #3a3a3a; }
.blogPost.-single .blogPost__content a.studio-inline-cta__button { display: inline-flex; margin-top: 1.5rem; color: #fff; text-decoration: none; background-color: #0b0b0d; border: 1px solid #0b0b0d; font-size: 0.9375rem; }
.blogPost.-single .blogPost__content a.studio-inline-cta__button:hover { background-color: var(--studio-red); border-color: var(--studio-red); color: #fff; }
@media (max-width: 575px) { .blogPost.-single .blogPost__content .studio-inline-cta__title { font-size: 1.3rem; } }

/* Smalle foto bovenaan dienst- en regiopagina's */
.studio-top-image { position: relative; overflow: hidden; }
.studio-top-image .bg-image { position: relative; width: 100%; aspect-ratio: 21 / 8; }
@media (max-width: 575px) { .studio-top-image .bg-image { aspect-ratio: 16 / 8; } .studio-top-image.mb-48 { margin-bottom: 2rem; } }
.studio-seo-body { padding-top: 1.5rem; }
@media (max-width: 767px) { .studio-seo-body { padding-top: 0.5rem; } }

/* Knoppen in teksten ([knop] in het beheer): nooit de linkopmaak overnemen */
.blogPost.-single .blogPost__content a.button { text-decoration: none; }
.blogPost.-single .blogPost__content a.button.-black { color: #fff; background-color: #0b0b0d; border: 1px solid #0b0b0d; }
.blogPost.-single .blogPost__content a.button.-black:hover { color: #fff; background-color: var(--studio-red); border-color: var(--studio-red); }
.blogPost.-single .blogPost__content a.button.-outline-black { color: #0b0b0d; background-color: transparent; border: 1px solid #0b0b0d; }
.blogPost.-single .blogPost__content a.button.-outline-black:hover { color: #fff; background-color: #0b0b0d; }
.blogPost.-single .blogPost__content button.button.-outline-black { color: #0b0b0d; }

/* ---------------------------------------------------------------
   Werk: half/half bovenaan, verhaal per hoofdstuk, volledig overzicht
--------------------------------------------------------------- */
.studio-split { padding-top: 5.5rem; }
.studio-split__text { padding: 4rem 0; }
.studio-split__count { font-size: .9375rem; color: #6b6b71; letter-spacing: .01em; }
.studio-split__count strong { color: #0b0b0d; font-weight: 600; }
.studio-split__media { overflow: hidden; }
@media (max-width: 991px) {
  .studio-split { padding-top: 7rem; }
  .studio-split__text { padding: 1rem 0 0; }
}

.studio-story__lead { font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.35; font-weight: 500; letter-spacing: -.02em; color: #0b0b0d; text-align: center; margin: 0; }
.studio-chapter { border-top: 1px solid rgba(0,0,0,.08); }
.studio-chapter__head { position: sticky; top: 7rem; }
.studio-chapter__num { display: block; font-size: .875rem; font-weight: 600; letter-spacing: .14em; color: var(--studio-red); margin-bottom: 1rem; }
.studio-chapter__title { font-size: clamp(1.875rem, 2.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; color: #0b0b0d; margin: 0; }
.studio-chapter__text { font-size: 1.0625rem; line-height: 1.75; color: #3a3a3a; margin: 1.25rem 0 0; }
.studio-chapter__count { font-size: .875rem; color: #6b6b71; margin: 1.25rem 0 0; }
@media (max-width: 991px) { .studio-chapter__head { position: static; } }

.studio-storycard { display: block; color: inherit; text-decoration: none; }
.studio-storycard__frame { border-radius: 10px; overflow: hidden; background: #f2f2f0; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 18px 40px -24px rgba(0,0,0,.35); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.studio-storycard__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); }
.studio-storycard__bar i { width: 8px; height: 8px; border-radius: 50%; background: #e3e3e0; }
.studio-storycard__bar span { margin-left: 10px; font-size: 11px; color: #8a8a90; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.studio-storycard__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.studio-storycard__shot .bg-image { position: absolute; inset: 0; background-size: cover; background-position: top center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.studio-storycard__shot.is-empty { display: grid; place-items: center; background: #0b0b0d; }
.studio-storycard__initial { font-size: clamp(4rem, 8vw, 6rem); font-weight: 800; color: #fff; letter-spacing: -.05em; line-height: 1; }
.studio-storycard__initial em, .studio-tile__mark em, .studio-client__mark em { font-style: normal; color: var(--studio-red); }
.studio-storycard__name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: #0b0b0d; margin: 1.25rem 0 0; }
.studio-storycard__name span { display: inline-block; color: var(--studio-red); transition: transform .3s; }
.studio-storycard__text { font-size: 1rem; line-height: 1.65; color: #4a4a4f; margin: .5rem 0 0; }
.studio-storycard:hover .studio-storycard__frame { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 26px 50px -24px rgba(0,0,0,.45); }
.studio-storycard:hover .bg-image { transform: scale(1.04); }
.studio-storycard:hover .studio-storycard__name span { transform: translate(3px, -3px); }

.studio-story__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 4vw, 3.5rem); border-radius: 14px; background: #f5f5f3; }
.studio-story__end-title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; margin: 0; color: #0b0b0d; }

.studio-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.studio-filter__button { display: inline-flex; align-items: center; gap: .5rem; height: 42px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.14); background: #fff; color: #0b0b0d; font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.studio-filter__button span { font-size: .75rem; color: #6b6b71; }
.studio-filter__button:hover { border-color: #0b0b0d; }
.studio-filter__button.is-active { background: #0b0b0d; border-color: #0b0b0d; color: #fff; }
.studio-filter__button.is-active span { color: rgba(255,255,255,.65); }

.studio-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1199px) { .studio-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .studio-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
@media (max-width: 479px) { .studio-tiles { grid-template-columns: 1fr; } }
.studio-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #0b0b0d; color: #fff; text-decoration: none; isolation: isolate; transition: opacity .35s, transform .35s; }
.studio-tile.is-hidden { display: none; }
.studio-tile__image { position: absolute; inset: 0; background-size: cover; background-position: top center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.studio-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,13,0) 30%, rgba(11,11,13,.88) 100%); z-index: 1; transition: background .4s; }
.studio-tile__mark { position: absolute; top: 1.1rem; left: 1.25rem; font-size: 3.25rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: rgba(255,255,255,.14); }
.studio-tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .2rem; }
.studio-tile__sector { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.studio-tile__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.studio-tile__what { font-size: .875rem; line-height: 1.45; color: rgba(255,255,255,.78); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .4s; }
.studio-tile__host { font-size: .8125rem; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.studio-tile:hover .studio-tile__image, .studio-tile:focus-visible .studio-tile__image { transform: scale(1.05); }
.studio-tile:hover::after, .studio-tile:focus-visible::after { background: linear-gradient(180deg, rgba(11,11,13,.2) 0%, rgba(11,11,13,.92) 100%); }
.studio-tile:hover .studio-tile__what, .studio-tile:focus-visible .studio-tile__what { max-height: 4.5em; opacity: 1; }
.studio-tile:hover .studio-tile__host, .studio-tile:focus-visible .studio-tile__host { opacity: 1; transform: none; }
.studio-tile.is-empty .studio-tile__what { max-height: 4.5em; opacity: 1; }
@media (hover: none) { .studio-tile__what { max-height: 4.5em; opacity: 1; } .studio-tile__host { opacity: 1; transform: none; } }

/* Startpagina: klanten */
.studio-clients-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1199px) { .studio-clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .studio-clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
.studio-client { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #f3f3f1; color: #0b0b0d; text-decoration: none; isolation: isolate; }
.studio-client.has-img { background: #0b0b0d; color: #fff; }
.studio-client__image { position: absolute; inset: 0; background-size: cover; background-position: top center; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.studio-client.has-img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,11,13,0) 40%, rgba(11,11,13,.9) 100%); }
.studio-client__mark { position: absolute; top: 1.25rem; left: 1.4rem; font-size: clamp(3.5rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; color: #0b0b0d; }
.studio-client__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.25rem 1.4rem 1.35rem; display: flex; flex-direction: column; gap: .25rem; }
.studio-client__name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.studio-client__what { font-size: .875rem; line-height: 1.45; opacity: .75; }
.studio-client__go { font-size: .8125rem; font-weight: 500; margin-top: .35rem; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.studio-client:not(.has-img) { border: 1px solid rgba(0,0,0,.08); transition: background .35s, color .35s; }
.studio-client:not(.has-img):hover { background: #0b0b0d; color: #fff; }
.studio-client:not(.has-img):hover .studio-client__mark { color: #fff; }
.studio-client:hover .studio-client__image { transform: scale(1.06); }
.studio-client:hover .studio-client__go, .studio-client:focus-visible .studio-client__go { opacity: 1; transform: none; }
@media (hover: none) { .studio-client__go { opacity: 1; transform: none; } }
.studio-clients-slider .swiper-slide { height: auto; }
.studio-clients-slider .studio-guides__nav { margin-top: 2rem; }
.studio-clients-slider .swiper-button-disabled { opacity: .3; pointer-events: none; }
.studio-tile, .studio-tile:hover, .studio-tile:focus { color: #fff; }
.studio-client.has-img, .studio-client.has-img:hover { color: #fff; }
.studio-client:not(.has-img):hover, .studio-client:not(.has-img):focus { color: #fff; }
.studio-storycard:hover .studio-storycard__name { color: #0b0b0d; }

/* Startpagina: klanten in het speelse raster van drie */
.studio-wild__item[hidden] { display: none !important; }
.studio-wild__card { color: #0b0b0d; }
.studio-wild__card:hover .portfolioCard__title { color: #0b0b0d; }
.studio-wild__media { clip-path: inset(0% 0% 0% 0%); will-change: clip-path; }
.studio-wild__frame { position: relative; overflow: hidden; background: #f2f2f0; }
.studio-wild__image { position: absolute; inset: 0; background-size: cover; background-position: top center; transform-origin: center top; }
.studio-wild__image.is-empty { background: #0b0b0d; }
.studio-wild__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 2rem; background: #0b0b0d; color: #fff; }
.studio-wild__fallback[hidden] { display: none; }
.studio-wild__fallback span { font-size: clamp(5rem, 9vw, 8rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; }
.studio-wild__fallback em { position: absolute; display: none; }
.studio-wild__fallback span::after { content: "."; color: var(--studio-red); }
.studio-wild__fallback small { margin-top: 1rem; font-size: .875rem; color: rgba(255,255,255,.6); }
.studio-wild__nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 3rem; }
.studio-wild__nav .studio-guides__nav { margin-top: 0; }
.studio-wild__track { position: relative; flex: 1; max-width: 320px; height: 2px; background: rgba(0,0,0,.1); overflow: hidden; }
.studio-wild__track span { position: absolute; top: 0; height: 100%; background: #0b0b0d; transition: left .7s cubic-bezier(.2,.7,.2,1), width .3s; }
@media (max-width: 767px) { .studio-wild__nav { margin-top: 2rem; } }

/* Overzicht: meer ruimte voor de CTA, leesbaardere namen en een chiquere hover */
.studio-overview-end { margin-top: clamp(4.5rem, 9vw, 8rem); }
.studio-tile::after { display: none; }
.studio-tile__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,13,0) 25%, rgba(11,11,13,.55) 55%, rgba(11,11,13,.95) 100%); }
.studio-tile__shade::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(227,6,19,0) 10%, rgba(227,6,19,.55) 55%, rgba(120,0,8,.95) 100%);
  opacity: 0; transform: translateY(18%); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.studio-tile__image { transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter .9s; }
.studio-tile__body { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.studio-tile__name { font-size: 1.1875rem; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.studio-tile__sector { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.studio-tile__line { display: block; width: 0; height: 2px; background: #fff; margin-bottom: .6rem; transition: width .8s cubic-bezier(.2,.7,.2,1) .05s; }
.studio-tile:hover .studio-tile__shade::after, .studio-tile:focus-visible .studio-tile__shade::after { opacity: 1; transform: none; }
.studio-tile:hover .studio-tile__image, .studio-tile:focus-visible .studio-tile__image { transform: scale(1.07); filter: grayscale(.35) contrast(1.05); }
.studio-tile:hover .studio-tile__body, .studio-tile:focus-visible .studio-tile__body { transform: translateY(-6px); }
.studio-tile:hover .studio-tile__line, .studio-tile:focus-visible .studio-tile__line { width: 2.5rem; }
.studio-tile:hover .studio-tile__name, .studio-tile:focus-visible .studio-tile__name { text-shadow: none; }
.studio-tile.is-empty .studio-tile__shade { background: none; }
@media (prefers-reduced-motion: reduce) { .studio-tile__shade::after, .studio-tile__image, .studio-tile__body, .studio-tile__line { transition: none; } }
@media (max-width: 767px) { .studio-wild__nav { flex-direction: row-reverse; justify-content: flex-end; } .studio-wild__track { max-width: none; } }

/* Overzicht referenties: foto boven, tekst eronder */
.studio-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 2rem; }
@media (max-width: 991px) { .studio-rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.5rem; } }
@media (max-width: 575px) { .studio-rgrid { grid-template-columns: 1fr; gap: 2.75rem; } }
.studio-reference-card { display: flex; flex-direction: column; color: #0b0b0d; text-decoration: none; }
.studio-reference-card.is-hidden { display: none; }
.studio-reference-card, .studio-reference-card:hover, .studio-reference-card:focus { color: #0b0b0d; }
.studio-reference-card__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #f2f2f0; isolation: isolate; }
.studio-reference-card__media.is-empty { background: #0b0b0d; }
.studio-reference-card__image { position: absolute; inset: 0; background-size: cover; background-position: top center; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.studio-reference-card__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 5rem; font-weight: 800; letter-spacing: -.05em; color: rgba(255,255,255,.18); }
.studio-reference-card__tint { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(227,6,19,0) 20%, rgba(227,6,19,.35) 100%); opacity: 0; transition: opacity .6s; }
.studio-reference-card__body { display: flex; flex-direction: column; padding-top: 1.25rem; }
.studio-reference-card__sector { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--studio-red); }
.studio-reference-card__name { margin-top: .4rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.studio-reference-card__text { margin-top: .6rem; font-size: .9375rem; line-height: 1.6; color: #55555b; }
.studio-reference-card__more { margin-top: 1rem; font-size: .875rem; font-weight: 500; color: #0b0b0d; }
.studio-reference-card__more i { display: inline-block; font-style: normal; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.studio-reference-card:hover .studio-reference-card__image, .studio-reference-card:focus-visible .studio-reference-card__image { transform: scale(1.05); }
.studio-reference-card:hover .studio-reference-card__tint, .studio-reference-card:focus-visible .studio-reference-card__tint { opacity: 1; }
.studio-reference-card:hover .studio-reference-card__more i, .studio-reference-card:focus-visible .studio-reference-card__more i { transform: translateX(5px); }
.studio-reference-card:hover .studio-reference-card__name, .studio-reference-card:focus-visible .studio-reference-card__name { color: var(--studio-red); }
.studio-reference-card__name { transition: color .3s; }
@media (prefers-reduced-motion: reduce) { .studio-reference-card__image, .studio-reference-card__tint, .studio-reference-card__more i { transition: none; } }

/* Scrollbalk in huisstijl: zwart met rood */
html { scrollbar-color: var(--studio-red) #0b0b0d; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0b0d; }
::-webkit-scrollbar-thumb { background: var(--studio-red); border-radius: 10px; border: 2px solid #0b0b0d; }
::-webkit-scrollbar-thumb:hover { background: #ff2a36; }
::-webkit-scrollbar-corner { background: #0b0b0d; }

/* Referentie: eigen profielpagina in het wit */
.studio-reference-hero__back { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2.25rem; font-size: .9375rem; font-weight: 500; color: #6b6b71; transition: color .3s, gap .4s cubic-bezier(.2,.7,.2,1); }
.studio-reference-hero__back svg { width: 1rem; height: 1rem; }
.studio-reference-hero__back:hover, .studio-reference-hero__back:focus-visible { color: #0b0b0d; gap: .8rem; }
.studio-reference-hero__back:hover svg { color: var(--studio-red); }
.studio-reference-hero__subtitle { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--studio-red); }
.studio-reference-hero__title { margin-top: .9rem; font-size: clamp(2.5rem, 4.6vw, 4.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: #0b0b0d; }
.studio-reference-hero__facts { display: flex; flex-wrap: wrap; gap: 1.5rem 2.75rem; margin: 2.5rem 0 0; padding-top: 1.75rem; border-top: 1px solid rgba(11,11,13,.1); }
.studio-reference-hero__facts dt { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a8a90; }
.studio-reference-hero__facts dd { margin: .4rem 0 0; font-size: 1rem; font-weight: 500; color: #0b0b0d; white-space: nowrap; }
.studio-reference-hero__media .bg-image { background-position: left top; }
.studio-reference-hero__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0b0b0d;
  font-size: clamp(10rem, 24vw, 22rem); font-weight: 800; letter-spacing: -.05em; color: rgba(255,255,255,.12); }
.studio-reference-hero__mark em { font-style: normal; color: var(--studio-red); }

.studio-reference-story__label { display: flex; align-items: baseline; gap: .9rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #0b0b0d; padding-top: .6rem; }
.studio-reference-story__label span { font-size: .75rem; color: var(--studio-red); }
.studio-reference-story__label span::after { content: " -"; }
@media (max-width: 991px) { .studio-reference-story__label { margin-bottom: 1.5rem; } }
.studio-reference-story__lead { font-size: clamp(1.625rem, 2.6vw, 2.375rem); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: #0b0b0d; }
.studio-reference-story__title { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: #0b0b0d; }
.studio-reference-story__text { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.8; color: #55555b; }

.studio-reference-show__browser { margin: 0 auto; max-width: 1180px; }
.studio-reference-show__frame { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(11,11,13,.07), 0 50px 100px -50px rgba(11,11,13,.45); }
.studio-reference-show__bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: #f4f4f2; border-bottom: 1px solid rgba(11,11,13,.06); }
.studio-reference-show__bar i { width: 10px; height: 10px; border-radius: 50%; background: #dcdcd8; }
.studio-reference-show__bar i:first-child { background: var(--studio-red); }
.studio-reference-show__bar span { margin: 0 auto; padding: 4px 18px; border-radius: 6px; background: #fff; font-size: 12px; color: #8a8a90; }
.studio-reference-show__frame img { display: block; width: 100%; height: auto; }
.studio-reference-show__caption { margin-top: 1.1rem; font-size: .875rem; color: #8a8a90; }

.studio-reference-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 3.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(11,11,13,.12); }
.studio-reference-features li { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.5rem 1.75rem 0; border-bottom: 1px solid rgba(11,11,13,.12); font-size: 1.0625rem; font-weight: 500; color: #0b0b0d; }
.studio-reference-features li span { font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--studio-red); }
@media (max-width: 767px) { .studio-reference-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .studio-reference-features { grid-template-columns: 1fr; } }

.studio-reference-quote__text { max-width: 18ch; font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; color: #0b0b0d; }
.studio-reference-quote__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(11,11,13,.12); }
.studio-reference-quote__foot p { font-size: 1.125rem; color: #55555b; }

.studio-reference-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(11,11,13,.12); }
.studio-reference-nav__item { position: relative; display: flex; align-items: center; gap: 1.75rem; padding: 3.5rem clamp(1.5rem, 5vw, 5rem); color: #0b0b0d; text-decoration: none; overflow: hidden; transition: background-color .5s; }
.studio-reference-nav__item.-next { flex-direction: row-reverse; text-align: right; border-left: 1px solid rgba(11,11,13,.12); }
.studio-reference-nav__item, .studio-reference-nav__item:hover { color: #0b0b0d; }
.studio-reference-nav__thumb { position: relative; flex: none; width: 7.5rem; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #0b0b0d; }
.studio-reference-nav__thumb .bg-image { position: absolute; inset: 0; background-size: cover; background-position: top center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.studio-reference-nav__text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.studio-reference-nav__label { display: inline-flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8a8a90; }
.studio-reference-nav__item.-next .studio-reference-nav__label { flex-direction: row-reverse; align-self: flex-end; }
.studio-reference-nav__label svg { width: .9rem; height: .9rem; color: var(--studio-red); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.studio-reference-nav__name { font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; transition: color .3s; }
.studio-reference-nav__what { font-size: .9375rem; color: #6b6b71; }
.studio-reference-nav__item:hover, .studio-reference-nav__item:focus-visible { background: #f6f6f4; }
.studio-reference-nav__item:hover .studio-reference-nav__name, .studio-reference-nav__item:focus-visible .studio-reference-nav__name { color: var(--studio-red); }
.studio-reference-nav__item:hover .studio-reference-nav__thumb .bg-image { transform: scale(1.08); }
.studio-reference-nav__item.-prev:hover .studio-reference-nav__label svg { transform: translateX(-4px); }
.studio-reference-nav__item.-next:hover .studio-reference-nav__label svg { transform: translateX(4px); }
@media (max-width: 767px) {
  .studio-reference-nav { grid-template-columns: 1fr; }
  .studio-reference-nav__item { padding: 2rem 1.25rem; gap: 1.1rem; }
  .studio-reference-nav__item.-next { border-left: 0; border-top: 1px solid rgba(11,11,13,.12); }
  .studio-reference-nav__thumb { width: 5.5rem; }
}

.studio-reference-back { position: fixed; left: 2.5rem; bottom: 2.5rem; z-index: 60; display: inline-flex; align-items: center; gap: .6rem;
  height: 3.25rem; padding: 0 1.4rem 0 1.1rem; border-radius: 3.25rem; background: #0b0b0d; color: #fff; font-size: .9375rem; font-weight: 500;
  box-shadow: 0 14px 30px -14px rgba(11,11,13,.6);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .45s, visibility .45s, transform .5s cubic-bezier(.2,.7,.2,1), background-color .4s; }
.studio-reference-back.is-visible { opacity: 1; visibility: visible; transform: none; }
.studio-reference-back, .studio-reference-back:hover { color: #fff; }
.studio-reference-back svg { width: 1.125rem; height: 1.125rem; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.studio-reference-back:hover, .studio-reference-back:focus-visible { background: var(--studio-red); }
.studio-reference-back:hover svg { transform: translateX(-4px); }
@media (max-width: 767px) { .studio-reference-back { left: 1rem; bottom: 1rem; height: 2.75rem; padding: 0 1rem 0 .85rem; font-size: .875rem; } }


/* Startpagina op gsm: slider over het volledige scherm, ook achter het logo en de menuknop.
   Logo en menuknop wit zolang je bovenaan staat; bij het scrollen wordt de balk weer wit met zwart. */
@media (max-width: 767px) {
  main[data-page="home"] .sliderMain.-type-3 { margin-top: 0; }
  main[data-page="home"] .sliderMain.-type-3,
  main[data-page="home"] .sliderMain.-type-3 .swiper-container { height: 100vh; height: 100svh; }
  main[data-page="home"] .sliderMain.-type-3 .slider__content__wrapper { padding-top: 3.75rem; }
  main[data-page="home"] .sliderMain.-type-3 .swiper-col::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7rem; z-index: 3; pointer-events: none;
    background: linear-gradient(180deg, rgba(11,11,13,.45), rgba(11,11,13,0)); }
  main[data-page="home"] .header:not(.is-sticky) .studio-logo,
  main[data-page="home"] .header:not(.is-sticky) .header__menu,
  main[data-page="home"] .header:not(.is-sticky) .header__menu .icon,
  main[data-page="home"] .header:not(.is-sticky) .nav-button-open { color: #fff !important; }
}