/* Portfolio met echte schermbeelden. Kleine, geïsoleerde upgrade op bestaande site. */
.project__visual--real,.project__visual--freshbrand{height:clamp(292px,30vw,420px);border-radius:12px;overflow:hidden;isolation:isolate;position:relative;display:block;will-change:auto}
.project__visual--real::before,.project__visual--real::after,.project__visual--freshbrand::before,.project__visual--freshbrand::after{content:none!important;box-shadow:none!important}
.project__visual--real{background:#242c28;color:#fff;padding:58px 28px 49px}
.project__visual--real .visual-caption{z-index:3;color:#e7ece5;position:absolute;top:20px;left:26px;right:26px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.2px;font-weight:800}
.project__visual--rr{background:#e8eeea;color:#172b33}
.project__visual--bf{background:#d4e5d7;color:#133c23}
.project__visual--sa{background:#dcded7;color:#26342d}
.project__visual--real .visual-caption{color:inherit}
.real-frame{width:100%;height:100%;border:1px solid rgba(0,0,0,.13);background:#fff;overflow:hidden;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.14);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.real-frame img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.01)}
@media(hover:hover) and (pointer:fine){.project__visual--real:hover .real-frame{transform:translateY(-5px) scale(1.01)}.project__visual--real:hover{transform:none}}
.project__visual--real .source-label,.project__visual--freshbrand .source-label{position:absolute;left:26px;bottom:15px;color:inherit;font-size:9px;font-weight:700;letter-spacing:.7px;opacity:.76;line-height:1.2}
.project__visual--freshbrand{background:#c9ee8b;color:#182b20;padding:32px;display:flex;align-items:center;justify-content:center}
.project__visual--freshbrand .visual-caption{color:#1b3b26;z-index:3;position:absolute;top:20px;left:26px;right:26px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;font-weight:800}
.freshbrand__content{min-width:0;text-align:left;width:100%;padding:20px 4%;}
.freshbrand__eyebrow{font-size:10px;letter-spacing:4px;font-weight:900;display:block;margin-bottom:20px}
.freshbrand__name{display:block;font-size:clamp(45px,6.4vw,92px);font-weight:900;letter-spacing:-.085em;line-height:1.05;white-space:nowrap;max-width:100%}
.freshbrand__name span{color:#426141}.freshbrand__name em{font-style:normal;color:#fff}
.freshbrand__baseline{display:block;font-size:clamp(14px,1.35vw,20px);font-weight:600;letter-spacing:-.02em;margin-top:21px}
.project__details p{max-width:520px}
@media(max-width:1100px){.project__visual--real,.project__visual--freshbrand{height:330px}.project__visual--real{padding:49px 20px 44px}.freshbrand__name{font-size:clamp(46px,6vw,70px)}}
@media(max-width:700px){.project__visual--real,.project__visual--freshbrand{height:clamp(262px,69vw,420px)}.project__visual--real{padding:48px 15px 44px}.project__visual--real .visual-caption,.project__visual--freshbrand .visual-caption{left:16px;right:16px;font-size:8px}.project__visual--real .source-label,.project__visual--freshbrand .source-label{left:16px;bottom:13px;font-size:8px}.freshbrand__content{padding:16px 0}.freshbrand__eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:15px}.freshbrand__name{font-size:clamp(43px,10vw,74px)}}
@media(max-width:375px){.freshbrand__name{font-size:41px}}
/* Mobile menu: fixed under header within view, close without reflow when linking away */
@media(max-width:900px){.header .main-nav{max-height:calc(100svh - 82px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 20px 45px rgba(0,0,0,.25)}}
@media(prefers-reduced-motion:reduce){.real-frame{transition:none}}

/* B2B-spotlight: echte projectweergave in plaats van een fictief dashboard. */
.spotlight__art--real{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:40px 20px 35px;isolation:isolate;min-width:0}
.spotlight__art--real::before,.spotlight__art--real::after{content:none!important}
.spotlight-real{width:100%;max-width:610px;aspect-ratio:16/10;overflow:hidden;border-radius:9px;box-shadow:0 30px 60px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.08);background:#fff}
.spotlight-real img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.spotlight-real__caption{font-size:9px;line-height:1.5;font-weight:800;letter-spacing:.5px;opacity:.62;color:#29322b;text-align:center}
@media(max-width:700px){.spotlight__art--real{padding:22px 10px 30px}.spotlight-real__caption{font-size:8px}}
/* Ankerknoppen sprongen vroeger 'vloeiend' door het lange scrollverhaal.
   Dat kon tussentijds de verkeerde animatiefase tonen. Laat ankers direct
   naar hun bestemming gaan; handmatig scrollen blijft animatiegestuurd. */
html{scroll-behavior:auto}