/* Aanpassingen voor de telefoonversie (sept 2026).
   Staat los van de Webflow-opmaak, zodat die onaangeroerd blijft. */

/* Client work: afbeeldingen over de volle breedte, tekst iets ingesprongen */
@media screen and (max-width: 767px) {
  #MY-CLIENT-WORK .grid-18 .videoimage > a { display: block; }
  #MY-CLIENT-WORK .grid-18 .videoimage img { display: block; width: 100%; height: auto; }
  #MY-CLIENT-WORK .grid-18 .videosubtitle { padding-left: 20px; padding-right: 20px; }
}

/* Client work: titel niet meer onder de menubalk */
@media screen and (max-width: 479px) {
  #MY-CLIENT-WORK { margin-top: 60px; }
}

/* About: ruimte tussen tekst en foto, en tekst niet tegen de rand */
@media screen and (max-width: 767px) {
  .section-10 .column-2 { padding-right: 10px; }
  .section-10 .image-31 { padding-top: 40px; }
}

/* About op computer/laptop: de oorspronkelijke opmaak had vaste marges van 600px
   links en rechts, waardoor de tekst op kleinere schermen werd samengeperst. */
@media screen and (min-width: 992px) {
  .section-10 .columns { margin-left: auto; margin-right: auto; max-width: 1360px; padding-left: 40px; padding-right: 40px; }
}

/* Contact: links wit in plaats van blauw, maar wel herkenbaar als link */
.section-11 a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: opacity .2s; }
.section-11 a:hover { opacity: .6; }

/* Homepage op telefoon (staand): showreel op volle breedte in 16:9,
   verticaal gecentreerd op zwart, in plaats van bijgesneden tot schermvullend */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .body-2 { background-color: #000; }
  .background-video.w-background-video { height: 56.25vw; margin-top: calc(50vh - 28.125vw); margin-top: calc(50svh - 28.125vw); }
}

/* Projectpagina's op telefoon/tablet: foto's onder elkaar op volle breedte
   (zoals op de ASML-pagina) in plaats van op halve breedte links */
@media screen and (max-width: 991px) {
  .section-5 .w-layout-grid > img { width: 100%; height: auto; }
}

/* Menubalk: overal echt zwart in plaats van half-doorzichtig (dat oogde grijs) */
.navbar, .navbar.w-nav { background-color: #000; }

/* Projectpagina's: video over de volle breedte in 16:9,
   net zo breed als de foto's eronder (telefoon, tablet en computer) */
.my-contain.project,
.video-div-project {
  width: 100%; min-width: 100%; max-width: none;
  margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
}
.video-div-project .w-video,
.video-div-project.w-video,
.my-contain.project > .w-video {
  width: 100%; min-width: 0; max-width: none; padding-top: 56.25% !important; margin-left: 0; margin-right: 0;
}

/* Scroll-animatie projectpagina's (zie js/reveal.js) */
.jv-reveal {
  opacity: 0; transform: translateY(48px);
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.jv-reveal.jv-in { opacity: 1; transform: none; }
/* Client work-tegels: het grijs-naar-kleur effect bij hover blijft werken */
.videoimage.jv-reveal {
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1), filter .2s;
}
@media (prefers-reduced-motion: reduce) {
  .jv-reveal { opacity: 1; transform: none; transition: none; }
}

/* Client work: bewegende tegels (zie js/loops.js) */
.jv-media { position: relative; display: block; overflow: hidden; }
.jv-loop {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.videoimage.jv-playing .jv-loop { opacity: 1; }
.videoimage.jv-playing { filter: none; }

/* Intro-animatie homepage (zie js/intro.js) */
html.jv-intro body::before {           /* zwart scherm tot de intro klaarstaat, geen flits van de video */
  content: ""; position: fixed; inset: 0; background: #000; z-index: 9998;
}
html.jv-intro-ready body::before { display: none; }
.jv-intro-ov { position: fixed; inset: 0; z-index: 9999; cursor: pointer; }
.jv-intro-top, .jv-intro-bottom {
  position: absolute; left: 0; right: 0; height: 50.5%; background: #000;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
}
.jv-intro-top { top: 0; }
.jv-intro-bottom { bottom: 0; }
.jv-intro-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #fff; font-family: "Open Sans", sans-serif; font-weight: 300;
  font-size: clamp(30px, 6vw, 72px); letter-spacing: -.01em; white-space: nowrap; text-align: center;
  transition: opacity .5s ease, transform 1s cubic-bezier(.76, 0, .24, 1);
}
.jv-intro-word strong { font-weight: 700; }
/* focus shift: het logo komt als een focus-trek van onscherp naar scherp in beeld (geen afgesneden j en g meer) */
.jv-intro-word { display: inline-block; line-height: 1.3; padding: .1em .2em; opacity: 0; will-change: filter, transform, opacity;
  animation: jvFocus 1.8s cubic-bezier(.45, .05, .25, 1) .15s forwards; }
.jv-ch, .jv-ch > span { display: inline; }
.jv-intro-com { opacity: .85; }
.jv-intro-line {
  display: block; height: 1px; margin-top: .35em; background: rgba(255, 255, 255, .7);
  transform: scaleX(0); transform-origin: left center; animation: jvLine 1.1s cubic-bezier(.65, 0, .35, 1) .8s forwards;
}
.jv-open .jv-intro-top { transform: translateY(-100%); }
.jv-open .jv-intro-bottom { transform: translateY(100%); }
.jv-open .jv-intro-logo { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
@keyframes jvFocus {
  0%   { opacity: 0; filter: blur(18px); transform: scale(1.07); letter-spacing: .04em; }
  35%  { opacity: 1; }
  62%  { filter: blur(0); transform: scale(1); letter-spacing: -.01em; }
  74%  { filter: blur(1.4px); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); letter-spacing: -.01em; }
}
@keyframes jvLine { to { transform: scaleX(1); } }

/* Volgend project, onderaan elke projectpagina */
.jv-next { background: #000; border-top: 1px solid #1f1f1f; text-align: center; padding: 70px 20px 90px; }
.jv-next-link { color: #fff; text-decoration: none; display: inline-block; }
.jv-next-label {
  display: block; font-family: "Open Sans", sans-serif; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: #8a8a8a; margin-bottom: 14px;
}
.jv-next-title {
  font-family: "Open Sans", sans-serif; font-weight: 300; font-size: clamp(20px, 3vw, 34px); line-height: 1.3;
  transition: opacity .25s ease;
}
.jv-next-title strong { font-weight: 700; }
.jv-next-arrow { display: inline-block; margin-left: .45em; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.jv-next-link:hover .jv-next-title { opacity: .75; }
.jv-next-link:hover .jv-next-arrow { transform: translateX(8px); }
/* projectpagina's met een witte basis-achtergrond: geen witte balk tussen de secties */
body:has(.jv-next) { background-color: #000; }

/* Projectnaam boven de video op elke projectpagina */
.jv-project-title {
  width: 100%; margin: 0; padding: 36px 20px 28px; box-sizing: border-box;
  color: #fff; text-align: center; font-family: "Open Sans", sans-serif; font-weight: 300;
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1.3; letter-spacing: 0;
}
.jv-project-title strong { font-weight: 700; }
/* overal dezelfde ruimte tussen menubalk en projecttitel */
body:has(.jv-project-title) .navbar + .client-section { margin-top: 60px; padding-top: 0; }
body:has(.jv-project-title) .navbar + .client-section .client-section.utube { margin-top: 0; padding-top: 0; }

/* ================================================================
   Typografie (27-09-2026): één lettertype, rustige vaste schaal.
   Wit = belangrijk, lichtgrijs = lopende tekst, grijs = labels.
   ================================================================ */
body { font-family: "Open Sans", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* menubalk (computer) */
.navbut, .navbut.default { font-size: 11px; letter-spacing: .16em; font-weight: 400; color: rgba(255,255,255,.55); transition: color .25s ease; }
.navbut:hover, .navbut.w--current, .navbut.w--current:hover { color: #fff; letter-spacing: .16em; font-weight: 400; }

/* paginatitels: clientwork / personal artworks */
.heading-3 { font-family: "Open Sans", sans-serif; font-weight: 300; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.005em; }
.heading-3 strong, .heading-3 .text-span-9 { font-weight: 700; }

/* bijschriften onder de tegels op client work */
.videosubtitle { display: block; font-size: 15px; line-height: 1.45; font-weight: 300; color: #bdbdbd; letter-spacing: .005em; padding-top: 14px; }
.videosubtitle strong { font-weight: 600; color: #fff; }

/* personal work */
.heading-1, .text-span-3, .text-span-11, .text-span-16 { font-family: "Open Sans", sans-serif; }
.heading-1 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.25; font-weight: 300; letter-spacing: -.005em; }
.heading-1 .text-span-3 { font-weight: 700; }
.heading-1 .text-span-11, .heading-1 .text-span-16 { font-size: inherit; font-weight: 300; }
.paragraph-project { font-size: 17px; line-height: 1.75; font-weight: 300; color: #d9d9d9; }

/* about */
.text-block-10 { font-family: "Open Sans", sans-serif; font-size: 17px; line-height: 1.75; font-weight: 300; color: #d9d9d9; max-width: 62ch; }

/* contact */
.text-block-11 { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 1.7; font-weight: 300; color: #fff; }
.text-block-11 strong { font-size: 13px; font-weight: 600; color: #8a8a8a; letter-spacing: .04em; }
.section-11 a { text-decoration-color: rgba(255,255,255,.35); }
.section-11 a:hover { opacity: 1; text-decoration-color: #fff; }

/* knop "More of this project" */
.main-button { font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.5); border-radius: 0; padding: 14px 26px; transition: background .25s ease, color .25s ease; }
.main-button:hover { background: #fff; color: #000; border-color: #fff; }

/* credits onderaan projectpagina's (zie js/credits.js) */
.text-block-12.jv-credits-box { text-align: left; font-family: "Open Sans", sans-serif; max-width: 620px; margin: 0 auto; padding: 64px 24px 72px; background: transparent; }
.jv-credits-label { display: block; text-align: center; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 28px; }
.jv-credits { margin: 0; padding: 0; }
.jv-cr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 24px; padding: 11px 0; border-top: 1px solid #1c1c1c; }
.jv-cr:last-child { border-bottom: 1px solid #1c1c1c; }
.jv-cr dt { margin: 0; font-size: 11px; line-height: 22px; letter-spacing: .14em; text-transform: uppercase; color: #8a8a8a; font-weight: 400; text-align: right; }
.jv-cr dd { margin: 0; font-size: 15px; line-height: 22px; color: #fff; font-weight: 400; }
@media screen and (max-width: 479px) {
  .text-block-12.jv-credits-box { padding: 48px 20px 56px; font-size: 15px; }
  .jv-cr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 16px; }
}

/* ================================================================
   Menu op telefoon/tablet: schuift soepel open over het hele scherm,
   items komen één voor één binnen (27-09-2026)
   ================================================================ */
@media screen and (max-width: 991px) {
  .navbar .w-dropdown-list {
    display: block; position: fixed; left: 0; right: 0; top: 60px; bottom: 0; height: auto; min-width: 0;
    background: #000; padding: 28px 24px 40px; box-sizing: border-box; z-index: 50;
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s;
  }
  .navbar .w-dropdown-list.w--open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1), visibility 0s;
  }
  .navbar .w-dropdown-list .dropdown-bg {
    display: block; background: transparent; color: #fff; font-family: "Open Sans", sans-serif;
    font-size: clamp(30px, 9vw, 46px); line-height: 1.15; font-weight: 300; letter-spacing: -.01em;
    padding: 12px 0; border-bottom: 1px solid #161616; white-space: nowrap;
    opacity: 0; transform: translateY(24px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .navbar .w-dropdown-list .dropdown-bg strong { font-weight: 700; }
  .navbar .w-dropdown-list .dropdown-bg.w--current { color: #fff; }
  .navbar .w-dropdown-list .dropdown-bg.w--current::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-left: 14px; vertical-align: middle; }
  .navbar .w-dropdown-list.w--open .dropdown-bg { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
  .navbar .w-dropdown-list.w--open .dropdown-bg:nth-child(1) { transition-delay: .06s; }
  .navbar .w-dropdown-list.w--open .dropdown-bg:nth-child(2) { transition-delay: .12s; }
  .navbar .w-dropdown-list.w--open .dropdown-bg:nth-child(3) { transition-delay: .18s; }
  .navbar .w-dropdown-list.w--open .dropdown-bg:nth-child(4) { transition-delay: .24s; }
  .navbar .w-dropdown-list.w--open .dropdown-bg:nth-child(5) { transition-delay: .30s; }
  .navbar .w-icon-dropdown-toggle { transition: transform .45s cubic-bezier(.22,1,.36,1); }
  .navbar .w-dropdown-toggle.w--open .w-icon-dropdown-toggle { transform: rotate(180deg); }
  .navbar .dropdown-toggle .dropdown { font-family: "Open Sans", sans-serif; font-weight: 400; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar .w-dropdown-list, .navbar .w-dropdown-list .dropdown-bg { transition: none !important; transform: none !important; }
}
@media screen and (max-width: 991px) {
  .navbar .w-dropdown-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@media screen and (max-width: 991px) and (max-height: 520px) {
  .navbar .w-dropdown-list { padding-top: 12px; }
  .navbar .w-dropdown-list .dropdown-bg { font-size: 24px; padding: 7px 0; }
}

/* Contact: LinkedIn en Instagram als twee gelijke, strakke links */
.jv-social { display: flex; justify-content: center; gap: 32px; margin-top: 36px; }
.section-11 .jv-social a { font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #fff;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 6px; transition: border-color .25s ease; }
.section-11 .jv-social a:hover { border-color: #fff; opacity: 1; }

/* Logo rechtsboven: af en toe gaat de zijkant (.com) heel even uit focus, als een lens die ademt */
@media (prefers-reduced-motion: no-preference) {
  .navbar .text-block-2 { animation: jvLogoSoft 11s ease-in-out 5s infinite; }
  .navbar .text-block-2 strong { color: #fff; text-shadow: none; }
}
@keyframes jvLogoSoft {
  0%, 80%   { color: #fff; text-shadow: 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0); }
  86%, 89%  { color: rgba(255, 255, 255, .3); text-shadow: 0 0 2.5px rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .25); }
  95%, 100% { color: #fff; text-shadow: 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0); }
}

/* Menu op telefoon: items komen onscherp binnen en trekken dan scherp (focus pull) */
@media screen and (max-width: 991px) {
  .navbar .w-dropdown-list .dropdown-bg { filter: blur(10px); transition: opacity .2s ease, transform .2s ease, filter .2s ease; }
  .navbar .w-dropdown-list.w--open .dropdown-bg { filter: blur(0); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.45,.05,.25,1); }
}
@media (prefers-reduced-motion: reduce) {
  .navbar .w-dropdown-list .dropdown-bg { filter: none !important; }
}

/* Personal artworks: live website "I Lost My Job Because of AI" (13-10-2026) */
.jv-artwork { padding-bottom: 70px; }
.jv-artwork-img { display: block; }
.jv-artwork-img img { display: block; width: 100%; height: auto; }
.jv-artwork-cta a {
  color: #fff; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 5px; transition: border-color .25s ease;
}
.jv-artwork-cta a:hover { border-color: #fff; }
@media screen and (max-width: 991px) { .jv-artwork { padding-left: 20px; padding-right: 20px; } }
@media screen and (max-width: 479px) { .jv-artwork { padding-left: 0; padding-right: 0; } }

/* ================================================================
   Personal artworks: strak en ingetogen, beelden niet meer schermvullend (13-10-2026)
   ================================================================ */
.body-3 { --jv-max: 1080px; --jv-side: 40px; --jv-gap: 16px; --jv-space: 120px; }
.body-3 .section-7 { display: block; padding-top: 0; padding-left: 0; }
.body-3 .jv-artwork,
.body-3 .section-7 > .container-2,
.body-3 .section-expostion-logos > .my-contain,
.body-3 .section-8 > .container-3,
.body-3 .section-3 > .my-contain {
  max-width: var(--jv-max); min-width: 0; margin-left: auto; margin-right: auto;
  padding-left: var(--jv-side); padding-right: var(--jv-side); box-sizing: content-box;
}
/* tekst: links uitgelijnd met de beelden, prettige regellengte */
.body-3 .heading-1 { display: block; padding: 30px 0 0; margin: 0; }
.body-3 .paragraph-project { display: block; max-width: 640px; padding: 8px 0 0; margin: 0; }
.body-3 .jv-artwork-cta { padding-top: 22px; }
/* nieuw werk bovenaan */
.body-3 .jv-artwork { padding-bottom: var(--jv-space); }
/* My First Vlog + Golden Google Gate */
.body-3 .section-7 > .container-2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--jv-gap); row-gap: 0; background: none;
}
.body-3 .section-7 > .container-2::before, .body-3 .section-7 > .container-2::after { content: none; display: none; }
.body-3 .container-2 > .image-15, .body-3 .container-2 > .image-16 {
  display: block !important; min-width: 0; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; padding: 0; max-width: none;
}
.body-3 .container-2 > div:not(.w-video):not(.div-block-17) { grid-column: 1 / -1; }
.body-3 .container-2 > .video-4 { grid-column: 1 / -1; margin-top: 36px; padding-bottom: 0; }
.body-3 .container-2 > .div-block-17 { grid-area: auto / 1 / auto / -1 !important; margin: var(--jv-space) 0 0; }
.body-3 .container-2 > .div-block-17 > .w-video { grid-area: auto !important; }
.body-3 .container-2 > .div-block-17 > .w-video { margin: 0; }
/* exposities */
.body-3 .section-expostion-logos { padding: var(--jv-space) 0 0; }
.body-3 .grid-3.expostion { grid-column-gap: 40px; grid-row-gap: 24px; padding: 0; }
.body-3 .grid-3.expostion img { padding: 0; max-height: 90px; width: auto; max-width: 100%; }
/* My Fiverr Film */
.body-3 .section-8 { display: block; padding-top: var(--jv-space); }
.body-3 .section-8 .div-block-18 { display: block; padding: 0; }
.body-3 .section-8 .heading-1 { padding-top: 0; }
.body-3 .section-3 { display: block; padding: 32px 0 var(--jv-space); }
.body-3 .grid-11 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: var(--jv-gap); grid-row-gap: var(--jv-gap); padding: 0; }
.body-3 .grid-11 img { min-width: 0; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media screen and (max-width: 767px) {
  .body-3 { --jv-side: 20px; --jv-gap: 10px; --jv-space: 80px; }
  .body-3 .heading-1 { padding-top: 22px; font-size: 24px; line-height: 1.25; }
}
@media screen and (max-width: 479px) {
  .body-3 .section-7 > .container-2 { grid-template-columns: minmax(0, 1fr); row-gap: var(--jv-gap); }
  .body-3 .grid-3.expostion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column-gap: 20px; }
}
.body-3 .container-2 .w-video { min-width: 0 !important; width: 100%; }
/* Exposities: onderaan de pagina, met korte tekst */
.body-3 .section-expostion-logos { padding: 0 0 var(--jv-space); }
.body-3 .section-3 { padding-bottom: var(--jv-space); }
.body-3 .jv-expo-title {
  font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: #8a8a8a; margin: 0 0 14px; padding-top: 48px; border-top: 1px solid #1f1f1f;
}
.body-3 .jv-expo-text {
  font-family: "Open Sans", sans-serif; font-size: 17px; line-height: 1.6; font-weight: 300; color: #d9d9d9;
  max-width: 640px; margin: 0;
}