:root{
  --ink:#0b1512; --coal:#14241f; --ash:#a3b0a6; --paper:#f4f0ea;
  --ember:#e0442b; --orange:#ff8a2b; --gold:#ffb85c;
  --ember-deep:#7a2015;
  --pine:#2f8f73; --pine-deep:#0f3a2e; --pine-light:#a9ecd2;
  --font:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--font);line-height:1.55;position:relative;overflow:clip;max-width:100%;overscroll-behavior-x:none}
main{overflow-x:clip}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* zwevende kleurvlakken achter het glas (Pine Sunset) */
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.blob.b1{top:-120px;right:-160px;width:min(760px,120vw);aspect-ratio:1;background:radial-gradient(circle,#ff8a2b,#e0442b 55%,transparent 72%);opacity:.5;filter:blur(90px)}
.blob.b2{top:620px;left:-240px;width:min(720px,120vw);aspect-ratio:1;background:radial-gradient(circle,var(--pine),#0f3a2e 55%,transparent 72%);opacity:.75;filter:blur(90px)}
.blob.b3{top:1500px;right:-200px;width:min(680px,120vw);aspect-ratio:1;background:radial-gradient(circle,#ffb85c,#ff8a2b 50%,transparent 72%);opacity:.34;filter:blur(100px)}
.blob.b4{top:2100px;left:-120px;width:min(620px,120vw);aspect-ratio:1;background:radial-gradient(circle,var(--pine),transparent 70%);opacity:.5;filter:blur(100px)}

/* liquid glass */
.glass{
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}
.btn{display:inline-block;padding:1rem 1.9rem;border-radius:999px;font-weight:600;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn.warm{background:linear-gradient(135deg,#ff8a2b,#e0442b);border-color:rgba(255,200,150,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 34px rgba(224,68,43,.4);color:#fff}
.btn.pine{background:linear-gradient(160deg,rgba(47,143,115,.5),rgba(20,70,56,.25));border-color:rgba(127,216,181,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 34px rgba(0,0,0,.35)}

nav{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:.3rem;padding:.55rem 1.3rem;border-radius:999px;max-width:calc(100% - 1.5rem);align-items:center}
nav a{padding:.45rem 1rem;border-radius:999px;font-size:.95rem;transition:color .2s;white-space:nowrap}
nav a:hover{color:var(--gold)}
.nav-toggle{display:none;background:none;border:0;padding:0;margin:0;color:var(--paper);width:2.1rem;height:2.1rem;border-radius:999px;align-items:center;justify-content:center;cursor:pointer;line-height:0;flex:none}
.nav-toggle svg{display:block;width:1.15rem;height:1.15rem}
.nav-links{display:flex}
.nav-links-inner{display:flex;align-items:center;gap:.2rem}

.wrap{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}

/* HERO (met de achtergrondvideo) */
.hero{position:relative;isolation:isolate;min-height:min(100svh,900px);display:flex;align-items:center;padding:7rem 0 4rem}
.hero-video-wrap{position:absolute;inset:0 0 -140px 0;z-index:-2;overflow:hidden;will-change:filter;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.6) 78%,rgba(0,0,0,.2) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.6) 78%,rgba(0,0,0,.2) 92%,transparent 100%)}
.hero-video-wrap video,.hero-video-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg-video{transition:opacity 1.2s linear}
.hero-video-wrap::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 12% 88%,rgba(47,143,115,.4),transparent 55%),
    linear-gradient(180deg,rgba(11,21,18,.55) 0%,rgba(11,21,18,.78) 50%,rgba(11,21,18,.95) 85%,var(--ink) 100%)}
.hero-inner{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.hero-text{flex:1 1 0;min-width:0}
@media(min-width:761px){.hero-inner{flex-wrap:nowrap}.hero-text{flex:1 1 auto}}
.eyebrow-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:linear-gradient(160deg,rgba(47,143,115,.45),rgba(20,70,56,.2));border:1px solid rgba(127,216,181,.4);font-size:.88rem;letter-spacing:.04em;margin-bottom:1.7rem}
.eyebrow-pill i{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block}
h1{margin:0 0 1.7rem;font-size:clamp(2.4rem,6.6vw,5.6rem);line-height:1.04;padding-bottom:.06em;letter-spacing:-.045em;font-weight:800;
  background:linear-gradient(180deg,#fff7ec 0%,#ffcf94 55%,#ff8a2b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 span{display:block;white-space:nowrap}
.hero p{max-width:34ch;font-size:clamp(1.1rem,2vw,1.45rem);margin:0 0 2.2rem;color:rgba(244,240,234,.9)}
.row{display:flex;flex-wrap:wrap;gap:.9rem}
.head-enter{flex:0 1 460px;min-width:0;display:flex;justify-content:center;position:relative;perspective:1200px}
.head-wrap{position:relative;z-index:2;width:100%;max-width:440px;aspect-ratio:900/841;will-change:transform;transform-style:preserve-3d}
.head-wrap img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5));pointer-events:none}

.reveal{opacity:0;transform:translateX(-50px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.reveal-up{transform:translateY(40px)}
.reveal.in-view{opacity:1;transform:translate(0,0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

h2{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:2rem}

.marquee-section{overflow:hidden;padding:2.2rem 0;display:flex;flex-direction:column;gap:.3rem}
.marquee-row{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-row.left .marquee-track{animation:marquee-left 70s linear infinite}
.marquee-row.right .marquee-track{animation:marquee-right 70s linear infinite}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee-text{flex:none;font-size:clamp(2.2rem,7vw,5.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;white-space:nowrap;padding-right:1.2rem;color:var(--orange)}
.marquee-row.right .marquee-text{color:var(--pine)}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none!important}}

.about-section{position:relative;z-index:2;padding:40px 0 110px}
/* het hele About-me blok als één opgehangen liquid-glass kaartje.
   de zwaai-beweging zit op een buitenste, "onzichtbare" laag (.about-swing) en niet
   op de glass-laag zelf (.about-card) - anders knippert/verdwijnt liquid glass met
   backdrop-filter na een transform-animatie in Safari/WebKit. */
.about-swing{position:relative;transform-origin:28px 28px;opacity:0;transform:translateY(-36px) rotate(0deg);
  transition:transform .25s cubic-bezier(.22,1,.36,1)}
.about-swing.in-view{animation:dangle-in 1.7s cubic-bezier(.22,1,.36,1) forwards}
/* elke keyframe zet expliciet zowel translateY als rotate, in dezelfde volgorde -
   zo blijft de browser altijd component-gewijs interpoleren en kan er nergens
   een "lege" tussenstap ontstaan die het kaartje onzichtbaar maakt */
@keyframes dangle-in{
  0%{opacity:0;transform:translateY(-36px) rotate(0deg)}
  10%{opacity:1;transform:translateY(-10px) rotate(8deg)}
  26%{opacity:1;transform:translateY(0) rotate(8deg)}
  40%{opacity:1;transform:translateY(0) rotate(-5.5deg)}
  54%{opacity:1;transform:translateY(0) rotate(3.5deg)}
  68%{opacity:1;transform:translateY(0) rotate(-2deg)}
  82%{opacity:1;transform:translateY(0) rotate(1deg)}
  100%{opacity:1;transform:translateY(0) rotate(0deg)}
}
/* opnieuw laten bungelen wanneer je via de navigatiebalk naar "About" springt -
   zelfde zwaai als dangle-in, maar zonder de opacity/val-in: het kaartje staat er
   al, het moet alleen opnieuw heen en weer wiebelen */
.about-swing.replay{animation:dangle-replay 1.4s cubic-bezier(.22,1,.36,1)}
@keyframes dangle-replay{
  0%{transform:translateY(0) rotate(0deg)}
  14%{transform:translateY(0) rotate(9deg)}
  30%{transform:translateY(0) rotate(-6deg)}
  46%{transform:translateY(0) rotate(4deg)}
  62%{transform:translateY(0) rotate(-2.3deg)}
  78%{transform:translateY(0) rotate(1.2deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
.about-card{position:relative;border-radius:2.6rem;padding:clamp(2.2rem,4vw,3.5rem)}

.about-card{position:relative;border-radius:44px;padding:clamp(26px,4vw,56px);
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 30px 80px rgba(0,0,0,.4);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
@media(prefers-reduced-motion:reduce){.about-swing{opacity:1;animation:none;transform:none}.about-swing.replay{animation:none}}
.about{display:flex;flex-wrap:wrap;gap:26px}
.about-left{flex:1 1 440px;min-width:0}
.about-left h2{margin-bottom:22px}
.about-left p{font-size:1.12rem;margin:0 0 16px;color:rgba(244,240,234,.82)}
.about-left p:first-of-type{color:var(--paper)}
.about-left p:last-child{margin-bottom:0}
.glance{flex:0 1 380px;min-width:260px;align-self:flex-start;padding:30px;border-radius:32px;
  background:linear-gradient(160deg,rgba(47,143,115,.5),rgba(20,70,56,.22));border:1px solid rgba(127,216,181,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 44px rgba(0,0,0,.35)}
.glance-title{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pine-light);margin-bottom:14px}
.glance-list{display:flex;flex-direction:column;gap:14px;font-size:1rem}
.glance-list span{color:var(--pine-light)}

/* PROJECTEN */
.projects{position:relative;z-index:2;padding-bottom:110px}
.projects h2{margin-bottom:34px}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:22px}
.proj-card{display:block;min-width:0;padding:30px;border-radius:36px;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 22px 56px rgba(0,0,0,.38);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.proj-card[hidden]{display:none}
.proj-card:hover h3{color:var(--gold)}
.proj-top{display:flex;align-items:baseline;gap:18px;margin-bottom:18px}
.proj-num{font-size:46px;font-weight:800;color:var(--orange);line-height:1}
.proj-top span:last-child{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,240,234,.6)}
.proj-card h3{margin:0 0 14px;font-size:1.9rem;letter-spacing:-.02em;line-height:1.15;transition:color .2s}
.proj-card p{margin:0 0 20px;color:rgba(244,240,234,.78)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{padding:6px 14px;border-radius:999px;font-size:.8rem;background:rgba(47,143,115,.4);border:1px solid rgba(127,216,181,.4)}
.proj-more{margin-top:30px;display:flex;justify-content:center}
.proj-more button{font:inherit;color:inherit;cursor:pointer}

/* CONTACT */
.contact{position:relative;z-index:2;padding-bottom:70px}
.contact-band{padding:clamp(40px,6vw,90px) clamp(24px,5vw,70px);border-radius:52px;text-align:center;
  background:linear-gradient(135deg,rgba(255,138,43,.55),rgba(224,68,43,.35) 55%,rgba(47,143,115,.4));border:1px solid rgba(255,220,180,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 34px 90px rgba(0,0,0,.45);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
.contact h2{margin:0 0 16px;font-size:clamp(2.2rem,5.6vw,4.7rem);letter-spacing:-.04em}
.contact p{margin:0 auto 34px;max-width:46ch;font-size:1.2rem;color:rgba(255,246,236,.9)}
.contact .mail-btn{display:inline-block;padding:18px 36px;border-radius:999px;font-weight:700;color:#0b1512;background:linear-gradient(160deg,#fff7ec,#ffd9a8);box-shadow:0 16px 40px rgba(0,0,0,.35);transition:transform .2s}
.contact .mail-btn:hover{transform:translateY(-2px)}
footer{position:relative;z-index:2;padding:10px 24px 40px;color:rgba(244,240,234,.55);font-size:.88rem;text-align:center}

@media(max-width:760px){
  nav{flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:.3rem;top:.8rem;width:3.2rem;height:3.2rem;border-radius:999px;overflow:hidden;
    transition:width .3s ease,height .3s ease,border-radius .3s ease;
    background:rgba(11,21,18,.86);border-color:rgba(255,255,255,.16)}
  .nav-toggle{display:flex;width:2.6rem;height:2.6rem}
  .nav-toggle svg{width:1.35rem;height:1.35rem}
  .nav-links{display:block;width:100%}
  .nav-links-inner{display:flex;flex-direction:column;align-items:stretch;width:100%;margin-inline:auto;padding-top:.35rem}
  nav a{text-align:center;padding:.8rem 1.4rem;white-space:nowrap;font-size:1.15rem}
  .hero{min-height:auto;padding:6.5rem 0 3rem}
  h1{font-size:clamp(2.2rem,10.5vw,3.6rem)}
  /* mobiel: label, titel, dan het hoofd, dan pas de 'Always looking'-tekst en de knoppen */
  .hero-inner{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0}
  .hero-text{display:contents}
  .eyebrow-pill{order:1}
  h1{order:2;margin-bottom:1rem}
  .head-enter{order:3;flex:none;width:100%;min-width:0;margin:.4rem 0 1.6rem}
  .head-wrap{width:min(68vw,320px)}
  .hero p{order:4;margin-inline:auto}
  .row{order:5;justify-content:center}
  .hero-inner{text-align:center}
  .eyebrow-pill{align-self:center}
  h1 span{margin-inline:auto}
  .proj-card{padding:22px}
  .proj-card h3{font-size:1.5rem}
  .contact-band{border-radius:36px}
  .about-section{padding:20px 0 70px}
  .glance{flex:1 1 100%;min-width:0;width:100%;max-width:26rem;margin-inline:auto;align-self:center;padding:24px}
  .projects{padding-bottom:70px}
}
@media(max-width:480px){
  .eyebrow-pill{font-size:.72rem;padding:7px 13px;gap:8px;letter-spacing:.02em}
  .row{flex-direction:column;align-items:stretch;width:100%}
  .btn{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* losse projectpagina's (projects/*.html) */
.project-hero{padding:9rem 6vw 1rem;text-align:center}
.project-hero .eyebrow{display:block;color:var(--ash);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;margin-bottom:.8rem}
.project-title{font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0 auto 1.6rem;max-width:18ch;
  background:none;-webkit-text-fill-color:initial;color:var(--paper);animation:none;justify-self:auto}
.project-intro{max-width:62ch;margin:0 auto;font-size:1.15rem;color:var(--paper)}
.project-banner{border-radius:1.6rem;aspect-ratio:16/9;max-width:680px;margin:2.5rem auto 2.5rem;overflow:hidden;position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.35)}
.project-banner-wrap{padding:0 6vw}
.project-banner.has-photo{background-size:cover;background-position:center}
/* lichte "liquid glass" ondergrond voor een banner i.p.v. de standaard warme t1-t4
   kleurverloop-achtergronden - zelfde geest als .about-card.glass (helder/fris, met
   een zacht rimlicht bovenaan), maar los ervan gescoped zodat alleen deze banner
   dit krijgt */
.project-banner.light-glass{
  /* een stuk ondoorzichtiger/wit dan .about-card.glass: die leunt op een lichte
     ondergrond eronder om "licht" te ogen (via backdrop-filter), maar hier zit de
     banner op de donkere pagina-achtergrond, dus de witte basis moet het zelf doen */
  background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,250,245,.42) 55%,rgba(255,245,238,.3));
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -10px 24px rgba(255,255,255,.1),0 20px 50px rgba(0,0,0,.35);
  backdrop-filter:blur(22px) saturate(120%) brightness(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(120%) brightness(1.4);
}
.project-banner.light-glass::before{
  content:"";position:absolute;top:0;left:6%;right:6%;height:3px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,1) 50%,transparent);
  filter:blur(1.5px);
  box-shadow:0 0 20px 2px rgba(255,255,255,.5)}
/* logo in de banner-plek (i.p.v. een cover-foto): gecentreerd en "contain", zodat
   een logo met eigen (transparante) achtergrond niet bijgesneden wordt zoals bij
   has-photo, maar gewoon netjes op de kleurverloop-ondergrond blijft staan */
.project-banner.has-logo{display:flex;align-items:center;justify-content:center;padding:2.2rem}
.project-banner-logo{width:auto;height:100%;max-width:70%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.3))}
@media(max-width:760px){
  .project-banner.has-logo{padding:1.4rem}
  .project-banner-logo{max-width:80%}
}
.project-body{max-width:680px;margin:0 auto;padding:0 6vw 2rem}
.project-body p{font-size:1.08rem;margin-bottom:1.2rem;color:var(--paper)}
.project-body p.muted{color:var(--ash)}
.project-actions{max-width:680px;margin:0 auto;padding:0 6vw 5rem;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
@media(max-width:760px){
  .project-banner{aspect-ratio:4/3}
}

/* de folder zelf in de banner-plek (glazen kader) op de Folder - Media Design pagina */
.project-banner.folder-banner{display:block;max-width:880px;aspect-ratio:auto;padding:clamp(8px,1.6vw,16px);border-radius:clamp(18px,3vw,32px);transition:transform .25s}
.project-banner.folder-banner-2{margin-top:0}
.project-banner.folder-banner:hover{transform:translateY(-3px)}
.project-banner.folder-banner img{display:block;width:100%;height:auto;border-radius:clamp(12px,2vw,22px)}
@media(max-width:760px){.project-banner.folder-banner{aspect-ratio:auto}}

.mail-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,10,8,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mail-modal[hidden]{display:none}
.mail-modal-card{width:min(100%,460px);padding:clamp(24px,5vw,36px);border-radius:32px;text-align:center;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.07)),rgba(14,28,23,.82)}
.mail-modal-card h3{font-size:1.5rem;line-height:1.2;letter-spacing:-.02em;margin-bottom:.6rem}
.mail-modal-card p{color:rgba(244,240,234,.8);margin-bottom:1.4rem}
.mail-modal-actions{display:flex;flex-direction:column;gap:.8rem}
.mail-modal-actions .btn{text-align:center}
.mail-modal-close{margin-top:1rem;font:inherit;font-size:.95rem;color:rgba(244,240,234,.75);background:none;border:0;cursor:pointer;padding:.4rem .8rem}
.mail-modal-close:hover{color:var(--gold)}

/* afbeelding die bij klikken in een videospeler verandert (Koel Down Rap) */
.project-banner.media-banner{max-width:620px;font:inherit;color:inherit;cursor:pointer;width:100%}
button.project-banner.media-banner{display:block}
.media-banner img,.media-banner video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:clamp(12px,2vw,22px)}
.media-banner.is-playing{cursor:default}
.media-banner.is-playing:hover{transform:none}
.media-play{position:absolute;left:50%;top:50%;width:clamp(64px,14vw,92px);height:clamp(64px,14vw,92px);transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,rgba(255,138,43,.9),rgba(224,68,43,.9));border:1px solid rgba(255,200,150,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 34px rgba(0,0,0,.45);transition:transform .2s}
.media-play svg{width:42%;height:42%;margin-left:6%}
.media-banner:hover .media-play{transform:translate(-50%,-50%) scale(1.08)}