:root {
  /* Designtokens uit Figma hero-slide */
  --color-bg: #EFEFEF;
  --color-purple: #824082;
  --color-indigo: #09006C;
  --color-accent-lime: #D0FF6B;

  --font-heading: "MADE Mirage", Georgia, serif;
  --font-body: "Poppins", sans-serif;
}

@font-face {
  font-family: "MADE Mirage";
  src: url("fonts/made_mirage_thin-webfont.woff2") format("woff2"),
       url("fonts/made_mirage_thin-webfont.woff") format("woff");
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "MADE Mirage";
  src: url("fonts/made_mirage_regular-webfont.woff2") format("woff2"),
       url("fonts/made_mirage_regular-webfont.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MADE Mirage";
  src: url("fonts/made_mirage_medium-webfont.woff2") format("woff2"),
       url("fonts/made_mirage_medium-webfont.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "MADE Mirage";
  src: url("fonts/made_mirage_bold-webfont.woff2") format("woff2"),
       url("fonts/made_mirage_bold-webfont.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "MADE Mirage";
  src: url("fonts/made_mirage_black-webfont.woff2") format("woff2"),
       url("fonts/made_mirage_black-webfont.woff") format("woff");
  font-weight: 900;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  background: var(--color-bg);
}

/* Toetsenbord focus blijft zichtbaar, ook al kiezen we een rustige stijl */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: 3px;
}

/* Visueel verborgen, maar wel voorgelezen door screenreaders (aria-live aankondiging) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Slide-teller: laat zien hoever je bent in de presentatie ---- */
.slide-counter {
  position: fixed;
  top: 32px;
  left: 40px;
  z-index: 90;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--color-purple);
  pointer-events: none;
}

/* ---- Swipe-hint: korte, zelf verdwijnende aanwijzing bij het laden ---- */
.swipe-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-purple);
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.swipe-hint--hidden {
  opacity: 0;
}

.swipe-hint-arrow {
  display: inline-block;
  animation: swipe-hint-nudge 1.4s ease-in-out infinite;
}

.swipe-hint-arrow:last-child {
  animation-direction: reverse;
}

@keyframes swipe-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

/* ---- Vloeiend canvas: elk element schaalt individueel mee met de viewport (vw/%),
   in plaats van één vast canvas te transformeren. Zo reflowt alles net als een normale
   responsieve site - niets wordt afgesneden of vervormd, en er zijn geen letterbox-balken.
   Posities blijven % t.o.v. het Figma-canvas (1920x1080); lettergroottes en vaste
   beeldmaten gebruiken clamp() met een vw-waarde afgeleid van diezelfde 1920px-breedte
   (px-waarde / 19.2 = vw), zodat de verhoudingen exact overeenkomen met het ontwerp. */
.swiper {
  width: 100%;
  height: 100vh;
}

.rotate-notice {
  display: none;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* ---- Hero slide ---- */
/* Posities zijn overgenomen als percentages van het Figma-canvas (1920x1080, node 35:26) */
.slide-hero {
  justify-content: flex-start;
  align-items: stretch;
}

.hero-logo {
  position: absolute;
  left: 4.3%;
  top: 31.5%;
  width: 21.4%;
  height: 36.7%;
  object-fit: contain;
  object-position: left top;
}

.hero-photo {
  position: absolute;
  left: 14.1%;
  top: 29%;
  width: clamp(90px, 8.54vw, 164px);
  height: clamp(90px, 8.54vw, 164px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-accent-lime);
  z-index: 1;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titel en subtitel staan elk los op hun eigen Figma-positie (left 495px/top 455px
   resp. left 495px/top 552px op het 1920x1080-canvas) i.p.v. via marge onder elkaar -
   de ruime line-height van de subtitel (214%) hoort bij het origineel en zorgt zelf al
   voor extra witruimte boven de tekst. */
.hero-text h1 {
  position: absolute;
  left: 25.78%;
  top: 42.13%;
  width: 38.67%;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 6.58vw, 126.3px);
  line-height: 0.98;
  color: var(--color-indigo);
  margin: 0;
}

.hero-subtitle {
  position: absolute;
  left: 25.78%;
  top: 51.11%;
  width: 17.76%;
  z-index: 1;
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.76vw, 33.7454px);
  line-height: 2.14;
  color: var(--color-purple);
  margin: 0;
}

.hero-contact {
  position: absolute;
  left: 4.3%;
  top: 88.4%;
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
  z-index: 1;
}

.hero-contact a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-purple);
  text-decoration: none;
  font-size: 1rem;
  white-space: nowrap;
}

.hero-contact a:hover {
  text-decoration: underline;
}

.contact-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* ---- Categorie tussenslide ---- */
/* Posities overgenomen van het Figma-canvas (1920x1080, node 3527:7) */
.slide-category {
  justify-content: flex-start;
  align-items: stretch;
  background: #000;
}

.category-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(1400px circle at 13% 108%, var(--color-indigo) 0%, rgba(20, 20, 20, 0) 62%);
  pointer-events: none;
}

.category-content {
  position: absolute;
  left: 4.7%;
  top: 41.9%;
  z-index: 1;
}

.slide-category h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 6.58vw, 126.3px);
  color: var(--color-accent-lime);
  line-height: 1;
}

.category-eyebrow {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.76vw, 33.7454px);
  color: var(--color-purple);
  margin-top: 0.4rem;
}

/* ---- Case slide ---- */
.slide-case {
  flex-direction: column;
  gap: 2rem;
  padding: 6vh 6vw;
}

/* Wrapper om de beeldcompositie van elke case (alle .case-card's erin). Op een kort
   scherm (weinig hoogte t.o.v. breedte - bv. een browservenster op een laptop met
   adresbalk/bladwijzerbalk die van de 1920x1080-Figma-canvas afwijkt) schaalt de hele
   compositie automatisch iets kleiner, zodat niets tegen de onderrand afsnijdt. Eén
   herbruikbaar mechanisme i.p.v. per case handmatig posities bijschaven. */
/* De compositie leeft in een 16:9-vak (de Figma-canvas) dat als "contain" in het
   scherm past en gecentreerd staat: op een breed/laag venster (browser met
   bladwijzerbalk) bepaalt de hoogte de maat, op 16:10 de breedte. Alle %-posities en
   %-breedtes van de beelden rekenen t.o.v. dit vak, dus er valt nooit iets onderaf weg. */
.case-visual {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100%, calc(100vh * 16 / 9));
  height: min(100%, calc(100vw * 9 / 16));
}

@media (max-height: 860px) {
  .case-visual {
    transform: scale(0.88);
    transform-origin: top center;
  }
}

/* Extra vangnet voor liggend mobiel (bv. 844x390): op zo'n korte hoogte was de
   titeltekst zelf (die buiten .case-visual staat, expres niet mee-scaled) nog net
   te laag gepositioneerd en viel de tweede regel buiten beeld. */
@media (max-height: 480px) {
  .case-title-block {
    top: 66% !important;
  }

  /* Te weinig hoogte voor de extra zin; titel + disciplines zijn hier genoeg. */
  .case-intro {
    display: none;
  }

  .case-title-block h3 {
    font-size: 1.4rem !important;
  }

  .case-tags {
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
  }

  .case-tags--meta {
    font-size: 0.65rem !important;
  }
}

.case-content h3 {
  font-family: var(--font-heading);
  color: var(--color-indigo);
  font-size: clamp(1.5rem, 2.5vw, 48px);
}

.case-content p {
  color: var(--color-purple);
  max-width: 60ch;
  margin-top: 0.5rem;
}

.case-media {
  width: min(80vw, 960px);
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-embed {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
}

/* ---- Case: CXN Rebranding ---- */
/* Posities overgenomen van het Figma-canvas (1920x1080, node 1411:2) */
.case-cxn {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  background: #38374d;
}

.case-card {
  position: absolute;
  display: block;
  height: auto;
}

.case-card--desktop {
  left: 3.18%;
  top: 0.93%;
  width: 57.08%;
}

.case-card--mob1 {
  left: 59.12%;
  top: 18.06%;
  width: 20.94%;
}

.case-card--mob2 {
  left: 78.75%;
  top: 4.46%;
  width: 20.94%;
}

.case-title-block {
  position: absolute;
  left: 5.21%;
  top: 78.9%;
  z-index: 1;
}

.case-title-block h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 48px);
  line-height: 1.05;
}

.case-tags {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.25vw, 24px);
  margin-top: 0.6rem;
}

.case-tags--meta {
  font-size: clamp(0.75rem, 1vw, 19px);
  opacity: 0.75;
  margin-top: 0.3rem;
}

/* Eén korte zin per case (wat was het), tussen titel en disciplines. Kleur volgt per
   case die van .case-tags; iets kleiner en smal gehouden zodat hij de compositie niet
   in de weg zit. */
.case-intro {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 0.94vw, 18px);
  line-height: 1.45;
  /* Breed genoeg voor één regel op grote schermen (minder hoogte over de beelden) */
  max-width: 52em;
  margin-top: 0.5rem;
  opacity: 0.9;
}

.case-cxn .case-title-block h3,
.case-cxn .case-tags,
.case-cxn .case-intro {
  color: #fff;
}

/* ---- Case: KWA Symposium ---- */
/* Posities overgenomen van de referentieafbeelding (canvas 1920x1080) */
.case-kwa {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  background: var(--color-bg);
}

.case-kwa .case-title-block {
  top: 82.9%;
  z-index: 2;
}

.case-kwa .case-title-block h3,
.case-kwa .case-tags,
.case-kwa .case-intro {
  color: var(--color-indigo);
}

.case-kwa-card--social1 {
  position: absolute;
  left: 4.84%;
  top: 6.3%;
  width: 23.18%;
  height: auto;
  z-index: 0;
}

.case-kwa-card--social2 {
  position: absolute;
  left: 15.36%;
  top: 39.8%;
  width: 23.18%;
  height: auto;
  z-index: 1;
}

.case-kwa-card--keyvisual {
  /* Iets kleiner/hoger dan de originele Figma-maat: op een lager/breder scherm
     (bv. een browservenster op een 16" MacBook met minder hoogte door de
     browserchrome) werd de onderkant anders afgesneden. */
  position: absolute;
  left: 39.58%;
  top: 2%;
  width: 54%;
  height: auto;
  z-index: 0;
}

/* ---- Case: Rodenstock ---- */
/* Posities overgenomen van de referentieafbeelding (canvas 1920x1080) */
.case-rodenstock {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  background: linear-gradient(180deg, #5DB5B1 0%, #000849 46.39%);
}

.case-rodenstock .case-title-block {
  top: 82.9%;
}

.case-rodenstock .case-title-block h3,
.case-rodenstock .case-tags,
.case-rodenstock .case-intro {
  color: #fff;
}

.case-rodenstock-card--caravan1 {
  position: absolute;
  left: 5.21%;
  top: 18.06%;
  width: 22.5%;
  height: auto;
  z-index: 1;
}

.case-rodenstock-card--caravan2 {
  position: absolute;
  left: 28.75%;
  top: 18.06%;
  width: 22.5%;
  height: auto;
  z-index: 1;
}

.case-rodenstock-card--caravan3 {
  position: absolute;
  left: 52.71%;
  top: 18.06%;
  width: 22.5%;
  height: auto;
  z-index: 1;
}

.case-rodenstock-card--stoepbord {
  position: absolute;
  left: 64.22%;
  top: 9.72%;
  width: 32.66%;
  height: auto;
  z-index: 1;
}

/* ---- Case: Flitsmeister Merchandise ---- */
/* Exacte posities/maten overgenomen van de Figma-specs (canvas 1920x1080, node 6) */
.case-flitsmeister {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  background: #38374d;
}

/* Geen verticale verschuiving: de keyvisuals bovenaan moeten zichtbaar blijven.
   Het zwarte shirt mag onderaan afsnijden (dat is bewust, zie hieronder). */
.case-flitsmeister .case-title-block {
  top: 78.24%;
}

.case-flitsmeister .case-title-block h3,
.case-flitsmeister .case-tags,
.case-flitsmeister .case-intro {
  color: #fff;
}


.case-fm-card--keyvisual1 {
  position: absolute;
  left: 4.271%;
  top: 5.926%;
  width: 27.5%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
  z-index: 1;
}

.case-fm-card--keyvisual2 {
  position: absolute;
  left: 33.125%;
  top: 13.704%;
  width: 39.167%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
  z-index: 1;
}

.case-fm-card--stickers {
  position: absolute;
  left: 75.26%;
  top: 7.87%;
  width: 20.729%;
  height: auto;
  z-index: 1;
}

.case-fm-card--box {
  position: absolute;
  left: 2.344%;
  top: 43.056%;
  width: 25.625%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
  z-index: 2;
}

.case-fm-card--mug {
  position: absolute;
  left: 25.729%;
  top: 38.704%;
  width: 19.01%;
  height: auto;
  z-index: 2;
}

.case-fm-card--sunglasses {
  position: absolute;
  left: 23.281%;
  top: 59.63%;
  width: 21.406%;
  height: auto;
  z-index: 3;
}

.case-fm-card--bottles {
  position: absolute;
  left: 34.01%;
  top: 40.833%;
  width: 25.208%;
  height: auto;
  z-index: 2;
}

.case-fm-card--cap {
  /* Voorgrond: mag over beide shirts heen vallen zodra het venster smaller wordt -
     dat overlap-effect geeft juist diepte, dus bewust de hoogste beeld-z-index. */
  position: absolute;
  left: 61.354%;
  top: 29.259%;
  width: 21.875%;
  height: auto;
  z-index: 5;
}

.case-fm-card--tshirt-black {
  /* Loopt bewust tot voorbij de onderrand: mag afgesneden worden door de slide-rand
     (.swiper-slide heeft overflow:hidden). */
  position: absolute;
  left: 51.406%;
  top: 38.704%;
  width: 38.75%;
  height: auto;
  z-index: 4;
}

.case-fm-card--tshirt-white {
  position: absolute;
  left: 71.719%;
  top: 33.241%;
  width: 27.76%;
  height: auto;
  z-index: 3;
}

/* Zachte grondschaduw onder de mok/zonnebril, zoals in het origineel */
.case-fm-shadow {
  position: absolute;
  left: 31.771%;
  top: 57.407%;
  width: 7.448%;
  height: 4.352%;
  background: #000;
  filter: blur(17px);
  opacity: 0.35;
  z-index: 2;
}

/* Vignette achter de titel, zoals op de hero van flitsmeister.nl: donker vanuit de
   hoek met de tekst, uitvloeiend naar transparant, zodat de titel altijd goed leesbaar
   blijft boven de productfoto's. */
.case-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 0% 100%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 4;
}

/* Lichte variant voor cases met een witte achtergrond + donkere titeltekst (bv. The
   Car Parfum): i.p.v. de tekst donkerder te maken, maakt dit de ondergrond lichter
   zodat de tekst leesbaar blijft boven een drukke foto. */
.case-vignette--light {
  background: radial-gradient(ellipse 55% 45% at 0% 100%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Blur alleen aan de kant van de tekst laten uitdoven, anders vervaagt het scherpe
     randje van de vignette-ellips zelf ook de rest van de foto zichtbaar. */
  mask-image: radial-gradient(ellipse 55% 45% at 0% 100%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at 0% 100%, #000 0%, transparent 70%);
}

/* Sinds de extra zin (.case-intro) is het titelblok hoger: de vignette moet verder
   omhoog/opzij reiken. Stibat krijgt de limoen van de slide zelf (geen witte vlek op
   het groen), The Car Parfum een iets grotere witte. */
.case-stibat .case-vignette--light {
  background: radial-gradient(ellipse 60% 36% at 0% 100%, rgba(210, 222, 30, 0.97) 0%, rgba(210, 222, 30, 0.92) 60%, rgba(210, 222, 30, 0) 100%);
  /* Geen blur/masker nodig: de limoen gaat naadloos over in de achtergrond */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.case-tcp .case-vignette--light {
  background: radial-gradient(ellipse 60% 48% at 0% 100%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.75) 40%, rgba(255, 255, 255, 0) 72%);
  mask-image: radial-gradient(ellipse 60% 48% at 0% 100%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 60% 48% at 0% 100%, #000 0%, transparent 72%);
}

.case-flitsmeister .case-title-block {
  z-index: 5;
}

/* ---- Case: Manic Fabric ---- */
/* Posities geschat van de referentieafbeelding (canvas 1920x1080), zelfde techniek
   als de Flitsmeister-slide: width:% + height:auto (behoudt beeldverhouding). */
.case-manic {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  background: #fff;
}

.case-manic .case-title-block {
  top: 82.87%;
}

.case-manic .case-title-block h3 {
  color: var(--color-indigo);
}

.case-manic .case-tags,
.case-manic .case-intro {
  color: var(--color-purple);
}

.case-manic-card--bg {
  /* Transparante versie, groter gezet zodat hij de achtergrond echt vult (bleedt
     bewust boven/onder het canvas uit). */
  position: absolute;
  left: 32%;
  top: -20%;
  width: 85%;
  height: auto;
  z-index: 0;
}

.case-manic-card--logo {
  position: absolute;
  left: 5.83%;
  top: 7.22%;
  width: 6.04%;
  height: auto;
  z-index: 1;
}

.case-manic-card--daddyo {
  position: absolute;
  left: 19.79%;
  top: 19.44%;
  width: 14.74%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));
  z-index: 2;
}

.case-manic-card--mask {
  position: absolute;
  left: 7.45%;
  top: 37.96%;
  width: 19.11%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));
  z-index: 1;
}

.case-manic-card--quote {
  position: absolute;
  left: 38.96%;
  top: 13.89%;
  width: 18.75%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));
  z-index: 2;
}

.case-manic-card--shirt-small {
  position: absolute;
  left: 32.81%;
  top: 48.61%;
  width: 15%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));
  z-index: 2;
}

.case-manic-card--photo {
  position: absolute;
  left: 65.89%;
  top: 7.22%;
  width: 27.34%;
  height: auto;
  z-index: 3;
}

/* ---- Case: The Car Parfum ---- */
/* Posities geschat van de referentieafbeelding (canvas 1920x1080) */
.case-tcp {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  background: #fff;
}

.case-tcp .case-title-block {
  top: 82.87%;
  z-index: 5;
}

.case-tcp .case-title-block h3 {
  color: var(--color-indigo);
}

.case-tcp .case-tags,
.case-tcp .case-intro {
  color: var(--color-purple);
}

.case-tcp-card--banner {
  /* Op het standaard (niet-verkleinde) formaat iets kleiner dan voorheen, zodat de
     titeltekst meer ademruimte houdt t.o.v. de compositie. Iets lager gezet zodat de
     compositie dichter bij de titel blijft i.p.v. los erboven te "zweven" zodra de
     max-height-breakpoint de boel vanaf de bovenkant verkleint. */
  position: absolute;
  left: 5.21%;
  top: 12.5%;
  width: 70%;
  height: auto;
  z-index: 1;
}

.case-tcp-card--product {
  /* Mag groter zijn en over de achtergrondbanner heen overlappen - de titel zelf
     blijft leesbaar dankzij de hogere z-index + vignette, dus overlap hier is geen
     probleem meer. */
  position: absolute;
  left: 9.27%;
  top: 36%;
  width: 19%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.25));
  z-index: 2;
}

.case-tcp-card--shot1 {
  /* Niet te hoog (bij 30% top zat de video tegen de onderrand) en niet te laag
     (dan ontstaat er een gat t.o.v. de titel zodra de max-height-breakpoint de
     compositie vanaf de bovenkant verkleint) - 25% is de balans daartussen. */
  position: absolute;
  left: 50.94%;
  top: 25%;
  width: 19%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.25));
  z-index: 2;
}

/* Video vervangt shot-01: zelfde box, maar aspect-ratio moet expliciet (geen
   natuurlijke beeldverhouding zoals bij een <img>) en met eigen iframe-opmaak. */
.case-video-9x16 {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
  object-fit: cover;
}

.case-tcp-card--shot2 {
  position: absolute;
  left: 74.74%;
  top: 25%;
  width: 19%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.25));
  z-index: 2;
}

/* ---- Case: Old Amsterdam ---- */
/* Posities geschat van de referentieafbeelding (canvas 1920x1080) */
.case-oa {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  background: #1a1512;
}

.case-oa-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.case-oa-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 10, 0.55) 0%, rgba(20, 14, 10, 0.8) 100%);
  z-index: 0;
}

.case-oa .case-title-block {
  top: 82.87%;
  z-index: 1;
}

.case-oa .case-title-block h3,
.case-oa .case-tags,
.case-oa .case-intro {
  color: #fff;
}

.case-oa-card--spot {
  position: absolute;
  left: 4.32%;
  top: 5.83%;
  width: 26.46%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.4));
  z-index: 1;
}

.case-oa-card--tip {
  position: absolute;
  left: 4.32%;
  top: 43.52%;
  width: 26.46%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.4));
  z-index: 1;
}

.case-oa-card--banner {
  position: absolute;
  left: 33.59%;
  top: 6.76%;
  width: 62.24%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.4));
  z-index: 1;
}

/* ---- Case: Stibat ---- */
/* Mozaïek van 12 tegels (4 kolommen x 3 rijen) op een felgroene achtergrond, elk met
   een lichte eigen rotatie voor een "uitgestrooide foto's"-gevoel. Posities zijn een
   regelmatig grid i.p.v. exact nagemeten van de (gekantelde) referentiefoto - dat
   geeft hetzelfde visuele effect en blijft onderhoudbaar. */
.case-stibat {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  background: #d2de1e;
}

/* Het mozaïek krijgt een vaste verhouding (1.375:1, zoals het er op een laptopvenster
   goed uitzag) en past zich gecentreerd in elk scherm in (breedte of hoogte bepaalt,
   net als "contain"). Schaal 0.88 geeft de marge links/rechts/onder, top: 4.5% extra
   lucht bovenin. Hierdoor ziet deze slide er op elke resolutie hetzelfde uit, i.p.v.
   alleen bij de max-height-breakpoint (deze regel overschrijft die bewust). */
.case-stibat .case-visual {
  inset: auto;
  margin: 0;
  top: 4.5%;
  left: 50%;
  width: min(100%, calc(100vh * 1.375));
  height: auto;
  aspect-ratio: 1.375;
  transform: translateX(-50%) scale(0.88);
  transform-origin: top center;
}

.case-stibat .case-title-block {
  top: 82.87%;
  z-index: 5;
}

.case-stibat .case-title-block h3 {
  color: var(--color-indigo);
}

/* ---- Case: Bredenoord Always-on ---- */
/* Posities overgenomen van de referentieafbeelding (canvas 1920x1080): drie uitingen
   boven (vierkant - breed - vierkant), twee blauwe rechtsonder, titel linksonder. */
.case-bre {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  background: radial-gradient(ellipse 75% 70% at 30% 55%, #8e1111 0%, #6a0a0a 55%, #4a0505 100%);
}

.case-bre-card {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.case-bre-card--sq1 {
  left: 5.73%;
  top: 8.24%;
  width: 21.7%;
}

.case-bre-card--wide1 {
  left: 29.74%;
  top: 8.24%;
  width: 38.6%;
}

.case-bre-card--sq2 {
  left: 70.63%;
  top: 8.24%;
  width: 21.7%;
}

.case-bre-card--sq3 {
  left: 35.52%;
  top: 50%;
  width: 21.7%;
}

.case-bre-card--wide2 {
  left: 58.91%;
  top: 50%;
  width: 38.6%;
}

.case-bre .case-title-block {
  top: 76%;
}

.case-bre .case-title-block h3,
.case-bre .case-tags,
.case-bre .case-intro {
  color: #fff;
}

/* ---- Case: Bredenoord 85 jaar jubileum ---- */
/* Posities overgenomen van de referentieafbeelding (canvas 1920x1080). */
.case-b85 {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 45% 40% at 0% 100%, #d4d6da 0%, rgba(212, 214, 218, 0) 100%),
    #959aa3;
}

/* Stoeptegel-foto "85 years" rechts: hoort bij de achtergrond, dus buiten het
   16:9-vak en rechts verankerd. Loopt links zacht uit in het grijs. */
.case-b85-bg {
  position: absolute;
  /* Maat en positie volgen de schermhoogte (ontwerp: 1428px breed, 368px voorbij de
     rechterrand, 70px boven de bovenrand op 1080 hoog), zodat de tegel op elk
     schermformaat even groot t.o.v. de beelden blijft. */
  right: calc(100vh * -368 / 1080);
  top: -6.5%;
  height: 132.2%;
  width: auto;
  z-index: 0;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%);
}

.case-b85 .case-visual {
  z-index: 1;
}

.case-b85-card--aerial {
  left: 3.13%;
  top: 3.15%;
  width: 48.33%;
}

.case-b85-card--container {
  left: 33.75%;
  top: 49.63%;
  width: 34.32%;
}

.case-b85-card--welcome {
  left: 53.49%;
  top: 16.94%;
  width: 44.06%;
}

/* Vijf regels titel+tags: vanaf de onderkant verankerd (zoals de 40px marge in het
   ontwerp) i.p.v. een top-%, anders valt de laatste regel op lage schermen weg. */
.case-b85 .case-title-block {
  top: auto;
  bottom: 3.7%;
  z-index: 2;
}

.case-b85 .case-title-block h3 {
  color: var(--color-indigo);
}

.case-b85 .case-tags,
.case-b85 .case-intro {
  color: var(--color-purple);
}

/* ---- Case: Gemeente Amsterdam, A'dam Schoon ---- */
/* Posities overgenomen van de referentieafbeelding (canvas 1920x1080). De armen met
   "afval -> punt" lopen bewust onder de onderrand door. */
.case-ams {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #fff;
}

.case-ams-card--abri {
  left: 4.17%;
  top: 7.13%;
  width: 28.13%;
}

.case-ams-card--poster {
  left: 33.07%;
  top: 7.13%;
  width: 29.43%;
}

.case-ams-card--mascotte {
  left: 62.76%;
  top: 3.89%;
  width: 34.38%;
}

.case-ams-card--afvalpunt {
  left: 40.83%;
  top: 29.72%;
  width: 68.18%;
  z-index: 2;
  pointer-events: none;
}

.case-ams .case-title-block {
  top: auto;
  bottom: 3.7%;
  z-index: 3;
}

.case-ams .case-title-block h3 {
  color: var(--color-indigo);
}

.case-ams .case-tags,
.case-ams .case-intro {
  color: var(--color-purple);
}

.case-stibat .case-tags,
.case-stibat .case-intro {
  color: var(--color-purple);
}

.case-stibat-tile {
  position: absolute;
  width: 22.5%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Kolommen (links) en rijen (top), zie de comment hierboven voor de opzet */
.case-stibat-tile--01 { left: 1%;    top: 1%;     transform: rotate(-3deg); }
.case-stibat-tile--02 { left: 25.3%; top: 1%;     transform: rotate(2deg); }
.case-stibat-tile--03 { left: 49.6%; top: 1%;     transform: rotate(-2deg); z-index: 2; }
.case-stibat-tile--04 { left: 73.9%; top: 1%;     transform: rotate(3deg); aspect-ratio: 4/5; }

.case-stibat-tile--05 { left: 1%;    top: 32.25%; transform: rotate(2deg); }
.case-stibat-tile--06 { left: 25.3%; top: 32.25%; transform: rotate(-3deg); }
.case-stibat-tile--07 { left: 49.6%; top: 32.25%; transform: rotate(3deg); }
.case-stibat-tile--08 { left: 73.9%; top: 32.25%; transform: rotate(-2deg); z-index: 2; }

.case-stibat-tile--09 { left: 1%;    top: 63.5%;   transform: rotate(-2deg); }
.case-stibat-tile--10 { left: 25.3%; top: 63.5%;   transform: rotate(3deg); }
.case-stibat-tile--11 { left: 49.6%; top: 63.5%;   transform: rotate(-3deg); }
.case-stibat-tile--12 { left: 73.9%; top: 63.5%;   transform: rotate(2deg); }

/* Video-tegel met eigen geluid/pauze-knoppen (knoppen worden in script.js aangemaakt).
   De wrapper draagt positie/rotatie van de tegel; de video vult hem volledig. */
.video-tile {
  overflow: hidden;
}

/* Video-tegels boven de buurtegels, anders valt de knoppenbalk (rechtsonder) onder de
   overlappende tegel uit de volgende rij. */
.case-stibat .video-tile {
  z-index: 2;
}

.video-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-controls {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.video-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.video-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

/* Klik-om-af-te-spelen tegels (lokale mp4, zie script.js): tonen een poster-
   afbeelding met play-knop, laden de video pas na een klik. */
.local-video-embed {
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.local-video-embed::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  font-size: 1rem;
  pointer-events: none;
}

.local-video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ---- Tekst-animatie: fade + omhoog bij het actief worden van een slide ---- */
@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-contact {
  opacity: 0;
}

.swiper-slide-active .hero-contact {
  animation: fade-slide-up 0.8s ease-out 0.35s forwards;
}

/* Losse woorden (aangemaakt door script.js) faden en schuiven één voor één in */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
}

.swiper-slide-active .word {
  animation: fade-slide-up 0.55s ease-out forwards;
  animation-delay: calc(var(--base-delay, 0s) + (var(--i, 0) * 0.06s));
}

/* ---- Beeld-animatie: dissolve (pure opacity-fade, geen beweging) - de beelden per
   slide verschijnen één voor één zodra de slide actief wordt. ---- */
@keyframes dissolve-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-photo,
.case-card {
  opacity: 0;
}

/* Gloed op de tussenslides: fadet langzaam op vanuit de hoek linksonder. Een masker
   (zacht verlopende cirkel vanuit die hoek) groeit mee, zodat de gloed zich vanuit de
   hoek over het scherm verspreidt - geen schaal of beweging van de gloed zelf. */
@property --glow-reveal {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@keyframes glow-in {
  from {
    opacity: 0;
    --glow-reveal: 0%;
  }
  to {
    opacity: 1;
    --glow-reveal: 100%;
  }
}

.category-glow {
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 var(--glow-reveal), transparent calc(var(--glow-reveal) + 45%));
  mask-image: radial-gradient(circle at 0% 100%, #000 var(--glow-reveal), transparent calc(var(--glow-reveal) + 45%));
}

.swiper-slide-active .category-glow {
  animation: glow-in 2.8s ease-out forwards;
}

/* Minder beweging: gloed meteen volledig tonen (de algemene regel verderop zet alle
   animaties uit, anders bleef de gloed onzichtbaar). */
@media (prefers-reduced-motion: reduce) {
  .category-glow {
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.swiper-slide-active .hero-photo {
  animation: dissolve-in 1s ease-out 0.25s forwards;
}

.swiper-slide-active .case-card:nth-of-type(1) {
  animation: dissolve-in 1s ease-out 0s forwards;
}

.swiper-slide-active .case-card:nth-of-type(2) {
  animation: dissolve-in 1s ease-out 0.15s forwards;
}

.swiper-slide-active .case-card:nth-of-type(3) {
  animation: dissolve-in 1s ease-out 0.3s forwards;
}

.swiper-slide-active .case-card:nth-of-type(4) {
  animation: dissolve-in 1s ease-out 0.45s forwards;
}

.swiper-slide-active .case-card:nth-of-type(5) {
  animation: dissolve-in 1s ease-out 0.6s forwards;
}

.swiper-slide-active .case-card:nth-of-type(6) {
  animation: dissolve-in 1s ease-out 0.75s forwards;
}

.swiper-slide-active .case-card:nth-of-type(7) {
  animation: dissolve-in 1s ease-out 0.9s forwards;
}

.swiper-slide-active .case-card:nth-of-type(8) {
  animation: dissolve-in 1s ease-out 1.05s forwards;
}

.swiper-slide-active .case-card:nth-of-type(9) {
  animation: dissolve-in 1s ease-out 1.2s forwards;
}

.swiper-slide-active .case-card:nth-of-type(10) {
  animation: dissolve-in 1s ease-out 1.35s forwards;
}

/* ---- D-logo intro-animatie (hero-slide) ----
   Alleen de kleurverloop animeert: de D start volledig blauw (beide gradient-stops
   gelijk) en de bovenste stop kleurt daarna naar paars, zodat het verloop "verschijnt". */
@keyframes d-gradient-in {
  from { stop-color: #09006c; }
  to { stop-color: #731b81; }
}

.swiper-slide-active .d-gradient-start {
  animation: d-gradient-in 1s ease-out 0.2s forwards;
}

/* Beweging beperken voor wie dat liever heeft */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }

  .hero-contact,
  .word,
  .hero-photo,
  .case-card {
    opacity: 1;
    transform: none;
  }

  .d-gradient-start {
    stop-color: #731b81;
  }
}

/* ---- Zwevend merklogo: vast rechtsonderin, boven de vervolgpagina's ----
   Niet op de hero-slide (die heeft al een groot D-logo in beeld) - zie
   script.js, dat .floating-logo--hidden toggelt op basis van de actieve slide. */
.floating-logo {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 50px;
  height: 50px;
  z-index: 100;
  pointer-events: none;
}

.floating-logo--hidden {
  display: none;
}

/* Swiper navigatie kleuren afstemmen op het palet */
.swiper-button-prev,
.swiper-button-next {
  color: var(--color-indigo);
  transition: color 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: var(--color-indigo);
}

/* Donkere slides (class "nav-light" op de slide, script.js zet body.ui-light):
   alle bediening wit i.p.v. donkerblauw/paars, zodat hij leesbaar blijft. */
.slide-counter,
.overview-toggle,
.swiper-pagination-bullet {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

body.ui-light .swiper-button-prev,
body.ui-light .swiper-button-next,
body.ui-light .slide-counter,
body.ui-light .overview-toggle {
  color: #fff;
}

body.ui-light .overview-toggle {
  border-color: rgba(255, 255, 255, 0.45);
}

/* Door "rewind" is de vorige-pijl op de eerste slide actief (springt naar contact);
   op de hero verbergen we hem, daar is alleen vooruit logisch. */
body.is-first .swiper-button-prev {
  display: none;
}

body.ui-light .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.4;
}

body.ui-light .swiper-pagination-bullet-active {
  background: #fff;
  opacity: 1;
}

/* ---- Overzichtknop (rechtsboven) ---- */
.overview-toggle {
  position: fixed;
  top: 24px;
  right: 40px;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--color-indigo);
  background: transparent;
  border: 1px solid rgba(9, 0, 108, 0.3);
  border-radius: 999px;
  cursor: pointer;
}

.overview-toggle:hover {
  background: rgba(127, 127, 127, 0.12);
}

.overview-toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ---- Overzichtpaneel ---- */
.overview {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  background: rgba(6, 0, 40, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: overview-in 0.25s ease-out;
}

.overview[hidden] {
  display: none;
}

@keyframes overview-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.overview-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 40px 64px;
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.overview-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 48px);
  color: var(--color-accent-lime);
}

.overview-close {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.overview-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.overview-group {
  margin-top: 1.75rem;
}

.overview-group-title {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a0d8;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 0.8rem;
  cursor: pointer;
}

.overview-group-title:hover {
  color: #fff;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.overview-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.overview-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: transform 0.2s ease, outline-color 0.2s ease;
}

.overview-thumb img {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.overview-card:hover .overview-thumb,
.overview-card:focus-visible .overview-thumb {
  transform: translateY(-3px);
  outline-color: rgba(255, 255, 255, 0.6);
}

.overview-card.is-current .overview-thumb {
  outline-color: var(--color-accent-lime);
}

.overview-card:focus-visible {
  outline: none;
}

.overview-card-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #fff;
}

/* ---- Hero: knop "Bekijk portfolio" onder de subtitel ---- */
.hero-cta {
  position: absolute;
  /* Boven de punt van het D-logo (die begint op ~62.7%), direct onder de subtitel */
  left: 25.78%;
  top: 56.5%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8em 1.6em;
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 0.94vw, 18px);
  font-weight: 500;
  color: #fff;
  background: var(--color-indigo);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: background-color 0.2s ease;
}

.hero-cta span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.hero-cta:hover {
  background: var(--color-purple);
}

.hero-cta:hover span {
  transform: translateX(4px);
}

.swiper-slide-active .hero-cta {
  animation: fade-slide-up 0.8s ease-out 0.9s forwards;
}

/* ---- Contactslide (laatste slide) ---- */
.slide-contact .category-content {
  top: 26%;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: 2.5rem;
}

.contact-links a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
  text-decoration: none;
  font-size: clamp(1rem, 1.25vw, 24px);
}

.contact-links a:hover {
  text-decoration: underline;
}

.contact-links .contact-icon {
  /* De iconen zijn donkerblauw; op zwart wit maken. */
  filter: brightness(0) invert(1);
}

.contact-restart {
  margin-top: 2rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #c9a0d8;
  background: none;
  border: 0;
  cursor: pointer;
}

.contact-restart:hover {
  color: #fff;
  text-decoration: underline;
}

.contact-links,
.contact-restart {
  opacity: 0;
}

.swiper-slide-active .contact-links {
  animation: fade-slide-up 0.8s ease-out 0.8s forwards;
}

.swiper-slide-active .contact-restart {
  animation: fade-slide-up 0.8s ease-out 1.1s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta,
  .contact-links,
  .contact-restart {
    opacity: 1;
  }
}

/* Liggend mobiel: knoppen compacter */
@media (max-height: 480px) {
  .overview-toggle {
    top: 12px;
    right: 16px;
    padding: 0.3rem 0.7rem;
  }

  .overview-inner {
    padding: 16px 20px 40px;
  }

  .overview-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .slide-contact .category-content {
    top: 14%;
  }

  .contact-links {
    margin-top: 1rem;
  }

  .contact-restart {
    margin-top: 0.8rem;
  }
}

/* ---- Mini thumbnail-preview bij het hoveren over een paginatie-bulletje ----
   Puur CSS: ::before toont een klein voorbeeld van de bijbehorende slide (hergebruikt
   de echte beelden die al in die slide staan), ::after toont de titel eronder. De
   volgorde (nth-child) moet gelijk blijven aan de volgorde van de slides. */
.swiper-pagination-bullet {
  position: relative;
}

.swiper-pagination-bullet::before,
.swiper-pagination-bullet::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}

.swiper-pagination-bullet::before {
  content: '';
  bottom: 46px;
  width: 150px;
  height: 84px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, 6px) scale(0.92);
}

.swiper-pagination-bullet::after {
  bottom: 28px;
  width: 150px;
  padding: 4px 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  transform: translate(-50%, 6px);
}

.swiper-pagination-bullet:hover::before {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.swiper-pagination-bullet:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.swiper-pagination-bullet:nth-child(1)::before {
  background-color: var(--color-bg);
  background-image: url('assets/dave.png');
}
.swiper-pagination-bullet:nth-child(1)::after {
  content: 'Dave Vink';
}

.swiper-pagination-bullet:nth-child(2)::before {
  background-color: #000;
  background-image: radial-gradient(circle at 20% 120%, var(--color-indigo) 0%, rgba(20, 20, 20, 0) 65%);
}
.swiper-pagination-bullet:nth-child(2)::after {
  content: 'Branding';
}

.swiper-pagination-bullet:nth-child(3)::before {
  background-color: #38374d;
  background-image: url('assets/cases/cxn/desktop.png');
}
.swiper-pagination-bullet:nth-child(3)::after {
  content: 'CXN Rebranding';
}

.swiper-pagination-bullet:nth-child(4)::before {
  background-color: var(--color-bg);
  background-image: url('assets/cases/kwa-symposium/keyvisual.png');
}
.swiper-pagination-bullet:nth-child(4)::after {
  content: 'KWA Symposium';
}

.swiper-pagination-bullet:nth-child(5)::before {
  background-color: #000849;
  background-image: url('assets/cases/rodenstock/caravan-02.png');
}
.swiper-pagination-bullet:nth-child(5)::after {
  content: 'Rodenstock';
}

.swiper-pagination-bullet:nth-child(6)::before {
  background-color: #2e2b45;
  background-image: url('assets/cases/flitsmeister/keyvisual-01.png');
}
.swiper-pagination-bullet:nth-child(6)::after {
  content: 'Flitsmeister Merchandise';
}

.swiper-pagination-bullet:nth-child(7)::before {
  background-color: #fff;
  background-image: url('assets/cases/manicfabric/bethelove-photo.png');
}
.swiper-pagination-bullet:nth-child(7)::after {
  content: 'Manic Fabric';
}

.swiper-pagination-bullet:nth-child(8)::before {
  background-color: #000;
  background-image: radial-gradient(circle at 20% 120%, var(--color-indigo) 0%, rgba(20, 20, 20, 0) 65%);
}
.swiper-pagination-bullet:nth-child(8)::after {
  content: 'Content Creatie';
}

.swiper-pagination-bullet:nth-child(9)::before {
  background-color: #fff;
  background-image: url('assets/cases/the-car-parfum/banner.png');
}
.swiper-pagination-bullet:nth-child(9)::after {
  content: 'The Car Parfum';
}

.swiper-pagination-bullet:nth-child(10)::before {
  background-color: #1a1512;
  background-image: url('assets/cases/old-amsterdam/banner.png');
}
.swiper-pagination-bullet:nth-child(10)::after {
  content: 'Old Amsterdam';
}

.swiper-pagination-bullet:nth-child(11)::before {
  background-color: #d2de1e;
  background-image: url('assets/cases/stibat/tile-03-sharkcat-poster.jpg');
}
.swiper-pagination-bullet:nth-child(11)::after {
  content: 'Stibat';
}

.swiper-pagination-bullet:nth-child(12)::before {
  background-color: #6a0a0a;
  background-image: url('assets/cases/bredenoord/wide-robot.jpg');
}
.swiper-pagination-bullet:nth-child(12)::after {
  content: 'Bredenoord';
}

.swiper-pagination-bullet:nth-child(13)::before {
  background-color: #000;
  background-image: radial-gradient(circle at 20% 120%, var(--color-indigo) 0%, rgba(20, 20, 20, 0) 65%);
}
.swiper-pagination-bullet:nth-child(13)::after {
  content: 'Offline';
}

.swiper-pagination-bullet:nth-child(14)::before {
  background-color: #959aa3;
  background-image: url('assets/cases/bredenoord/85-welcome.webp');
}
.swiper-pagination-bullet:nth-child(14)::after {
  content: 'Bredenoord 85 jaar';
}

.swiper-pagination-bullet:nth-child(15)::before {
  background-color: #fff;
  background-image: url('assets/cases/gemeente-amsterdam/mascotte-glas.webp');
}
.swiper-pagination-bullet:nth-child(15)::after {
  content: 'A’dam Schoon';
}

.swiper-pagination-bullet:nth-child(16)::before {
  background-color: #000;
  background-image: radial-gradient(circle at 20% 120%, var(--color-indigo) 0%, rgba(20, 20, 20, 0) 65%);
}
.swiper-pagination-bullet:nth-child(16)::after {
  content: 'Contact';
}

/* ---- Titelblok op elke case vanaf de onderkant verankerd ----
   Sinds de extra zin (.case-intro) verschilt de hoogte per case; met een vaste top-%
   liep de onderste regel op lagere schermen uit beeld. Nu groeit het blok naar boven
   en heeft elke case dezelfde ondermarge (40px op 1080 hoog). Staat bewust onderaan
   het bestand zodat hij de losse top-%'s per case overschrijft; liggend mobiel
   (max-height 480px) houdt zijn eigen top: 66% !important. */
.slide-case .case-title-block {
  top: auto;
  bottom: 3.7%;
}

/* ---- Portrait (mobiel rechtop): vraag om het scherm te draaien i.p.v. het
   desktop-ontwerp te herschikken - de collage-achtige caseslides (met overlappende
   afbeeldingen) zijn ontworpen voor een liggend/breed scherm. ---- */
@media (orientation: portrait) {
  .swiper {
    display: none;
  }

  .rotate-notice {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background: var(--color-indigo);
    z-index: 9999;
  }

  .rotate-notice p {
    color: #fff;
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    max-width: 32ch;
  }
}