@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* Recente visuele verfijningen */
:root{--sans:"Poppins",Arial,sans-serif;--serif:"Poppins",Arial,sans-serif}
/* Subtiele, atmosferische achtergrondlagen: fijn papier en zacht natuurlijk licht. */
body{position:relative;isolation:isolate}
body>header,body>main,body>footer{position:relative;z-index:1}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:paper-grain 11s steps(2,end) infinite}
body::after{inset:-20%;opacity:.55;background:radial-gradient(ellipse at 22% 18%,rgba(255,255,255,.52) 0%,rgba(255,255,255,.16) 25%,transparent 54%),radial-gradient(ellipse at 82% 70%,rgba(229,221,203,.28) 0%,transparent 48%);filter:blur(28px);transform:translate3d(0,0,0);animation:ambient-light 26s ease-in-out infinite alternate}
body:has(.project-page)::after{opacity:.12;animation:none}
body:has(.project-page)::before{opacity:.025}
@keyframes paper-grain{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(-1.5%,1%,0)}50%{transform:translate3d(1%,-1.5%,0)}75%{transform:translate3d(1.5%,1.5%,0)}}
@keyframes ambient-light{0%{transform:translate3d(-2%,-1%,0) scale(1)}50%{transform:translate3d(2%,1.5%,0) scale(1.04)}100%{transform:translate3d(-1%,3%,0) scale(1.01)}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}body::after{animation:none;opacity:.2}}

.hero{height:clamp(210px,29vw,330px)}
.hero-slideshow{isolation:isolate}.hero-slide{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms ease}.hero-slide.is-active{opacity:1}.hero-slideshow span{transition:opacity 300ms ease}.hero-slideshow:has(.hero-slide.is-active) span{opacity:0}
.intro{padding-top:clamp(1.35rem,2.75vw,2.5rem);padding-bottom:clamp(1.75rem,3.5vw,3rem)}
.intro-copy{font-size:clamp(1.05rem,1.5vw,1.45rem);line-height:1.4}
.contact-cta{padding-block:clamp(1.75rem,3vw,2.75rem);margin-top:clamp(2rem,3.5vw,3rem)}
.contact-cta p{font-size:clamp(1.3rem,2vw,2rem)}
.section-label,.contact-cta,footer{border-color:#c9c7c1}
.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,3.5vw,3.75rem) clamp(1.25rem,2vw,2rem)}
.project-media{border-radius:12px}
.project-real-cover{overflow:hidden;border-radius:12px}
.project-real-cover img{display:block;width:100%;height:100%;object-fit:cover}
.project-detail-image{overflow:hidden;border-radius:12px;background:#fff}
.project-detail-image.gallery-item{padding:0;border:0;cursor:pointer}
.project-detail-image img{display:block;width:100%;height:100%;object-fit:cover}
.about-portrait{position:relative;align-self:stretch;aspect-ratio:auto;min-height:0;overflow:hidden;border-radius:12px}
.about-portrait img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transform:none}
.section-label,.contact-cta,footer{border-top:0}
.project:nth-child(3n) .project-media{aspect-ratio:1.16}
.lightbox{width:min(96vw,1400px);height:min(94vh,950px);padding:1rem;border:0;background:rgba(20,20,20,.96);overflow:visible}.lightbox::backdrop{background:rgba(20,20,20,.76);backdrop-filter:blur(5px)}.lightbox img{width:100%;height:100%;object-fit:contain}.lightbox-close,.lightbox-nav{position:absolute;z-index:1;border:0;border-radius:50%;background:rgba(247,246,243,.94);color:#171717;cursor:pointer}.lightbox-close{right:.35rem;top:-2.5rem;width:2rem;height:2rem;font:400 1.65rem/1 var(--sans)}.lightbox-nav{top:50%;transform:translateY(-50%);width:2.8rem;height:2.8rem;font:400 1.55rem/1 var(--sans)}.lightbox-prev{left:-3.6rem}.lightbox-next{right:-3.6rem}.lightbox-close:hover,.lightbox-nav:hover{background:#fff}
.project-header{padding-bottom:2.5rem}
.project-page{padding-top:clamp(2rem,4vw,4rem)}
.page,.contact-page{padding-top:clamp(2rem,4vw,4rem)}
.project-header{padding-top:clamp(2rem,4vw,3.5rem)}
.project-intro{margin-bottom:3rem;max-width:680px}
.project-intro p,.project-story>div>p:last-child{font-size:clamp(1rem,1.35vw,1.3rem);line-height:1.5}
.feature-media{margin-bottom:clamp(3.5rem,6vw,5.5rem)}
.project-story{gap:clamp(1.75rem,5vw,5rem);margin-bottom:clamp(3.5rem,6vw,5.5rem)}
.project-story>div>p:last-child{margin-bottom:0}
.contact-page h1{font-size:clamp(3rem,7.5vw,6.5rem);line-height:.9;letter-spacing:-.045em}
.button,.cv-link{background:#9d493c;border-color:#9d493c!important;border-radius:999px;color:#fff!important;font-weight:500}
.button:hover,.cv-link:hover{background:#7e392f;border-color:#7e392f!important}
.socials a,.footer-socials a{padding:7px}
.socials svg,.footer-socials svg{display:block;width:100%;height:100%;fill:currentColor}
@media(max-width:700px){.hero{height:min(46vw,245px)}.intro{padding-top:1.25rem;padding-bottom:1.75rem}.intro-copy{font-size:1.1rem}.contact-cta{padding-block:1.75rem;margin-top:2rem}.contact-cta p{font-size:1.3rem}.page,.contact-page,.project-page{padding-top:1.5rem}.project-header{padding-top:1.75rem;padding-bottom:2rem}.project-intro{margin-bottom:2.25rem}.project-intro p,.project-story>div>p:last-child{font-size:1rem}.feature-media{margin-bottom:3rem}.project-story{margin-bottom:3rem}.contact-page h1{font-size:3.25rem;line-height:.92}}
@media(max-width:700px){.about-portrait{aspect-ratio:.83;align-self:auto}}
@media(min-width:701px) and (max-width:980px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Photography lightbox: full overlay and controls safely inside the viewport. */
.lightbox{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:clamp(1rem,4vw,3rem) clamp(5.5rem,12vw,10rem);border:0;background:rgba(15,15,15,.88);z-index:9999;place-items:center}.lightbox[open]{display:grid}.lightbox::backdrop{background:rgba(15,15,15,.72);backdrop-filter:blur(5px)}.lightbox img{width:auto;height:auto;max-width:calc(100vw - 180px);max-height:calc(100dvh - 140px);object-fit:contain}.lightbox-close,.lightbox-nav{position:fixed;z-index:10000;width:48px;height:48px;background:rgba(20,20,20,.72);color:#fff;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2)}.lightbox-close{top:max(70px,calc(env(safe-area-inset-top) + 32px));right:max(40px,calc(env(safe-area-inset-right) + 32px));font-size:1.8rem}.lightbox-nav{top:50%;transform:translateY(-50%);font-size:1.75rem}.lightbox-prev{left:max(48px,calc(env(safe-area-inset-left) + 32px))}.lightbox-next{right:max(48px,calc(env(safe-area-inset-right) + 32px))}.lightbox-close:hover,.lightbox-nav:hover{background:rgba(35,35,35,.9)}
@media(max-width:520px){.lightbox{padding:1rem}.lightbox img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 150px)}.lightbox-close{top:max(24px,calc(env(safe-area-inset-top) + 16px));right:max(20px,calc(env(safe-area-inset-right) + 16px))}.lightbox-nav{width:44px;height:44px;top:auto;bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));transform:none}.lightbox-prev{left:calc(50% - 56px)}.lightbox-next{right:calc(50% - 56px)}}
.lightbox-nav{width:48px;height:48px;padding:0;border:0;border-radius:0;background:transparent;color:#f7f6f3;font:300 48px/.82 var(--sans);opacity:.65;transition:opacity .25s ease}.lightbox-nav:hover,.lightbox-nav:focus-visible{background:transparent;opacity:1}.lightbox-prev{left:max(56px,calc(env(safe-area-inset-left) + 40px))}.lightbox-next{right:max(56px,calc(env(safe-area-inset-right) + 40px))}
@media(max-width:520px){.lightbox-nav{width:48px;height:48px;top:50%;bottom:auto;transform:translateY(-50%);font-size:44px}.lightbox-prev{left:max(20px,calc(env(safe-area-inset-left) + 16px))}.lightbox-next{right:max(20px,calc(env(safe-area-inset-right) + 16px)}}
/* FaceFactor image sections only: bounded, filled image frames and responsive rows. */
#project-detail .facefactor-gallery{min-width:0;max-width:100%;border:0;outline:0;box-shadow:none}
.facefactor-gallery h2{margin:0 0 1.5rem}
.lightbox:has(img[src*="/facefactor-ai/"]) img{border-radius:12px}
@media(hover:hover){.facefactor-image:hover img{opacity:.88}}
/* Photography gallery: bounded grid; every thumbnail occupies exactly one cell. */

.photography-gallery{width:100%;max-width:1600px;margin:0 auto;padding:0 48px;box-sizing:border-box}
.photography-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;width:100%;max-width:100%;margin:0;padding:0;box-sizing:border-box}
.photography-grid>.photography-item{display:block;width:100%!important;max-width:100%;min-width:0!important;aspect-ratio:4 / 3!important;padding:0!important;margin:0!important;border:0;border-radius:14px;overflow:hidden;background:transparent;cursor:pointer;box-sizing:border-box;grid-column:auto!important}
.photography-grid>.photography-item::before,.photography-grid>.photography-item::after{display:none}
.photography-grid>.photography-item img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;border-radius:inherit;box-sizing:border-box;transition:transform .25s ease,opacity .25s ease}
@media(hover:hover){.photography-grid>.photography-item:hover img{transform:scale(1.015);opacity:.94}}
@media(max-width:1100px){.photography-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:800px){.photography-gallery{padding:0 24px}.photography-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:500px){.photography-gallery{padding:0 16px}.photography-grid{grid-template-columns:1fr!important}}