:root{--ink:#0b0b0b;--paper:#f3efeb;--accent:#e9ad96;--line:rgba(11,11,11,.22);--mono:"DM Mono",monospace;--sans:"Manrope",Arial,sans-serif}


*{box-sizing:border-box}


html{scroll-behavior:smooth}


body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px}


.grain{inset:0;pointer-events:none;position:fixed;opacity:.15;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}


.nav{position:absolute;top:0;left:0;width:100%;padding:28px 4.5vw;display:flex;align-items:center;justify-content:space-between;z-index:2}


.brand{font-size:26px;font-weight:700;text-decoration:none;color:var(--ink);letter-spacing:-2px}


.brand span{color:#d06c4d}


.nav nav{display:flex;gap:25px;margin-left:auto}


.nav a,.menu-button{font:500 11px var(--mono);color:var(--ink);text-decoration:none;text-transform:uppercase;letter-spacing:.04em}


.menu-button{display:none;border:0;background:none;padding:5px}

.language-switch{display:flex;align-items:center;gap:5px;margin-left:20px;font:500 10px var(--mono);letter-spacing:.05em;position:relative;z-index:3}

.language-switch button{border:0;background:none;color:inherit;font:inherit;padding:4px 1px;cursor:pointer;opacity:.46}

.language-switch button.active{opacity:1;text-decoration:underline;text-underline-offset:4px}

.home-page .language-switch{color:var(--paper)}


.section{padding:130px 8vw;border-top:1px solid var(--line)}


.hero{border:0;min-height:100vh;padding:145px 8vw 45px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(ellipse at 70% 68%,rgba(232,167,143,.65),transparent 38%),radial-gradient(ellipse at 19% 50%,rgba(232,167,143,.4),transparent 34%),linear-gradient(115deg,#f7f3f0,#e9e2df 53%,#f5f2ef)}

.home-page .hero{position:relative;overflow:hidden;background:#161617;color:var(--paper)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.home-page .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(5,5,6,.74),rgba(5,5,6,.26) 61%,rgba(5,5,6,.53));z-index:0}
.home-page .hero>*:not(.hero-video){position:relative;z-index:1}
.home-page .nav a,.home-page .menu-button,.home-page .brand{color:var(--paper)}
.home-page .brand span{color:#e9ad96}
.home-page .hero-intro{padding:16px 18px;background:rgba(7,7,8,.42);backdrop-filter:blur(4px)}
.home-page .nav.open nav a{color:var(--ink)}


.eyebrow,.section-number,.item-label{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.06em}


.hero-title{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin:70px 0}


.hero h1{margin:0;font-size:clamp(62px,11vw,172px);font-weight:500;line-height:.9;letter-spacing:-.09em}


.hero-title p{font-size:clamp(15px,1.55vw,23px);line-height:1.35;margin:0;text-transform:uppercase;letter-spacing:.03em}


.hero-intro{margin:0 6vw 8px 0}


.hero-intro span{display:block;margin-top:17px;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase}


.hero-footer{display:flex;justify-content:space-between;font:500 11px var(--mono);text-transform:uppercase}


.hero-footer a{color:inherit;text-decoration:none}


.hero-footer a span{font-size:18px;margin-left:8px}


.split{display:grid;grid-template-columns:28% 1fr;gap:6vw}


.copy{max-width:860px}


.large-copy p{font-size:clamp(25px,3.5vw,51px);line-height:1.16;letter-spacing:-.055em;margin:0 0 38px}


.about{display:grid;grid-template-columns:28% 1fr;gap:6vw}
.about-content{max-width:1040px}
.about-statement{font-size:clamp(29px,4.35vw,64px);line-height:1.08;letter-spacing:-.065em;margin:0;max-width:940px}
.about-strengths{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:90px}
.about-strengths article{border-top:1px solid var(--ink);padding:15px 12px 20px 0;min-height:265px;display:flex;flex-direction:column}
.about-strengths span,.section-label{font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase}
.about-strengths h2{font-size:clamp(22px,2vw,31px);line-height:.98;letter-spacing:-.06em;font-weight:500;margin:55px 0 16px}
.about-strengths p{font-size:14px;line-height:1.5;margin:0;max-width:230px}
.about-future{display:grid;grid-template-columns:28% 1fr;gap:28px;margin:100px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.about-future p:last-child{font-size:clamp(21px,2.4vw,34px);line-height:1.15;letter-spacing:-.045em;margin:0;max-width:700px}
.about-education{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:75px;padding:25px;background:var(--ink);color:var(--paper)}
.about-education>p:last-child{font-size:17px;line-height:1.35;margin:0;text-align:right}
.about-education span{font-size:12px;opacity:.7}

.muted{color:#6c6865}


.education-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}


.education article{min-height:405px;padding:27px;display:flex;flex-direction:column;justify-content:space-between;background:var(--ink);color:var(--paper)}


.education article+article{background:#df9d86}


.education h2{font-size:clamp(32px,3.8vw,55px);font-weight:500;line-height:1;letter-spacing:-.06em;margin:0}


.education ul{padding:0;margin:0;list-style:none;font-size:14px;line-height:1.8}


.section-heading{display:flex;justify-content:space-between;align-items:start}


.section-heading h2,.sustainability h2,.contact h2{font-size:clamp(51px,7vw,105px);font-weight:500;line-height:.89;letter-spacing:-.08em;margin:0;text-align:right}


.selected-projects{background:linear-gradient(110deg,#f3efeb,#ebe5e1);position:relative;overflow:hidden}


.projects-intro{font-size:17px;line-height:1.55;max-width:480px;margin:75px 0 0 28%}


.project-grid{margin-top:55px;display:grid;grid-template-columns:1.08fr .92fr;gap:14px}


.project-card{position:relative;min-height:460px;padding:27px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:var(--ink);text-decoration:none;isolation:isolate;transition:transform .45s cubic-bezier(.2,.65,.25,1),box-shadow .45s ease}


.project-card:hover{transform:translateY(-7px);box-shadow:0 18px 30px rgba(20,15,12,.15)}


.project-card:focus-visible{outline:3px solid var(--ink);outline-offset:4px}


.project-card__top,.project-card__details{display:flex;justify-content:space-between;gap:18px;align-items:start;position:relative;z-index:2;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase}


.project-index{font-size:13px}


.project-card__main{position:relative;z-index:2}


.project-event{font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}


.project-card h3{font-size:clamp(40px,5vw,72px);line-height:.88;letter-spacing:-.075em;font-weight:500;margin:0}


.project-card__details{border-top:1px solid currentColor;padding-top:13px;align-items:end}


.project-card__details p{margin:0;max-width:190px;font-size:10px;line-height:1.45}


.project-card__details b{display:block;opacity:.6;font-weight:500;margin-bottom:4px}


.project-arrow{font-size:27px;line-height:.7;transition:transform .35s ease}


.project-card:hover .project-arrow{transform:translate(5px,-5px)}


.project-card--blijdorp{min-height:620px;background-image:linear-gradient(120deg,rgba(243,239,235,.93) 0%,rgba(243,239,235,.4) 64%,rgba(202,82,51,.18)),url("assets/blijdorp-crew-base.png");background-size:cover;background-position:center}


.project-orbit{position:absolute;width:370px;height:370px;border:1px solid rgba(11,11,11,.75);border-radius:50%;right:-60px;top:45px;box-shadow:inset 0 0 0 27px rgba(255,255,255,.18)}


.project-orbit:after{content:"CREW / PEOPLE / FLOW / CARE";position:absolute;top:23%;left:-25%;font:500 9px var(--mono);letter-spacing:.3em;white-space:nowrap;transform:rotate(42deg)}


.project-card--defqon{background:#111;color:var(--paper);background-image:radial-gradient(circle at 45% 30%,rgba(239,91,47,.9) 0 1px,transparent 2px),radial-gradient(circle at 45% 30%,rgba(239,91,47,.45) 0 18%,transparent 19%),linear-gradient(145deg,#191614,#0a0a0a 75%)}


.project-card--defqon:after{content:"01:00";position:absolute;right:-14px;bottom:62px;font-size:clamp(90px,14vw,190px);font-weight:500;letter-spacing:-.13em;color:rgba(244,237,231,.1);z-index:0}


.project-card--ade{background:var(--accent)}


.project-card--ade:after{content:"ADE";position:absolute;right:-5px;top:70px;font-size:clamp(120px,17vw,250px);font-weight:700;letter-spacing:-.16em;color:rgba(255,255,255,.4);line-height:.8;z-index:-1}


.project-stat{position:absolute;right:26px;bottom:95px;text-align:right;display:flex;align-items:end;gap:10px}


.project-stat b{font-size:73px;line-height:.7;letter-spacing:-.1em;font-weight:500}


.project-stat span{font:500 9px/1.35 var(--mono);text-transform:uppercase}


.project-card--kappa{background:#b4b3a1 url("assets/kappa-mr-security.png") center 42%/cover no-repeat;color:var(--paper)}


.project-card--kappa:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,11,11,.72),rgba(11,11,11,.12) 78%),linear-gradient(150deg,transparent 50%,rgba(11,11,11,.3))}


.project-lines{position:absolute;inset:0;background:repeating-linear-gradient(122deg,transparent 0 35px,rgba(11,11,11,.35) 36px 37px,transparent 38px 70px);opacity:.8;transform:translateX(22%)}


.experience-list{margin:90px 0 0 28%;border-top:1px solid var(--line)}


.experience-list article{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;padding:28px 0;border-bottom:1px solid var(--line)}


h3{font-size:27px;line-height:1.05;letter-spacing:-.05em;margin:12px 0 0;font-weight:600}


.experience-list article>p{margin:0;line-height:1.55;font-size:14px}


.sustainability-copy{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:end}


.sustainability-copy>div{font-size:17px;line-height:1.55;max-width:550px}


.sustainability-copy>div p{margin:0 0 25px}


.tag-list{display:flex;flex-wrap:wrap;gap:9px;margin:70px 0 0 28%}


.tag-list span{border:1px solid var(--ink);border-radius:999px;padding:12px 17px;font-size:15px}


.profile{display:grid;grid-template-columns:28% 1fr;gap:6vw}


.big-statement{font-size:clamp(30px,4.6vw,67px);letter-spacing:-.065em;line-height:1.06;margin:0;max-width:970px}


.profile-details{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:750px;font-size:14px;line-height:1.65;margin-top:75px}


.contact{padding:130px 8vw 30px;background:var(--ink);color:var(--paper)}


.contact h2{text-align:left;margin:75px 0}


.contact-links{border-top:1px solid rgba(255,255,255,.35);display:grid;grid-template-columns:2fr 1fr 1fr}


.contact-links a{padding:22px 0;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);font-size:14px}


.contact-links span{font-size:20px}


.copyright{font:500 10px var(--mono);margin-top:100px;text-transform:uppercase}


.experience-grid{margin:85px 0 0 28%;display:grid;grid-template-columns:1fr;gap:14px}

.experience-card{min-height:235px;padding:24px;position:relative;display:grid;grid-template-columns:90px minmax(0,1.1fr) minmax(190px,.7fr) 36px;gap:28px;align-items:end;text-decoration:none;color:var(--paper);overflow:hidden;background:#111;isolation:isolate;transition:transform .4s ease,box-shadow .4s ease}

.experience-card[hidden]{display:none!important}

.experience-card:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(8,8,8,.7),rgba(8,8,8,.08) 70%);z-index:-1}

.experience-card:hover{transform:translateY(-6px);box-shadow:0 16px 28px rgba(0,0,0,.18)}

.experience-card>span,.experience-card small{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.06em}

.experience-card p{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}

.experience-card h3{font-size:clamp(29px,3.8vw,57px);line-height:.9;font-weight:500;margin:0;letter-spacing:-.075em}

.experience-card__role{align-self:end;border-left:1px solid currentColor;padding-left:17px}
.experience-card__role strong{display:block;font-size:15px;line-height:1.22;font-weight:600;margin-bottom:14px}
.experience-card i{align-self:end;font-style:normal;font-size:26px}

.experience-card--blijdorp{background:#443c37 url("assets/blijdorp-crew-base.png") center/cover no-repeat;color:var(--ink)}

.experience-card--blijdorp:before{background:linear-gradient(120deg,rgba(243,239,235,.9),rgba(243,239,235,.15) 73%)}

.experience-card--ade{background:radial-gradient(circle at 76% 25%,rgba(247,215,150,.8),transparent 17%),linear-gradient(140deg,#d17f62,#151311)}

.experience-card--ade:after{content:"37";position:absolute;right:20px;top:25px;font-size:130px;line-height:.7;letter-spacing:-.13em;color:rgba(255,255,255,.14);z-index:-1}

.experience-card--boiler{background:#171313 url("assets/boiler-room-crowd.jpg") center/cover no-repeat}

.experience-card--gob{background:#181818 url("assets/gob-event.jpg") center/cover no-repeat}

.experience-card--kappa-new{background:#7dbdd5 url("assets/experience-kappa-2026.png") center/cover no-repeat}

.experience-card--circoloco{background:#ca0000 url("assets/experience-circoloco.png") center/cover no-repeat}

.experience-card--loveland{background:#1c1712 url("assets/experience-loveland.png") center/cover no-repeat}

.experience-card--aoa{background:#172111 url("assets/experience-aoa-event.png") center/cover no-repeat}

.experience-card--defqon-new{background:#1b0a06 url("assets/experience-defqon.png") center/cover no-repeat}

.experience-card--dgtl{background:#b8aaa0 url("assets/experience-dgtl.png") center/cover no-repeat}

.experience-pagination{margin:34px 0 0 28%;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:18px;border-top:1px solid var(--line);padding-top:18px}

.experience-pagination button{border:0;background:none;color:var(--ink);font:500 11px var(--mono);cursor:pointer;padding:7px;transition:opacity .25s ease}

.experience-pagination button:disabled{opacity:.25;cursor:default}

.experience-pagination__pages{display:flex;gap:5px}

.experience-pagination__pages button{opacity:.38}

.experience-pagination__pages button.active{opacity:1;text-decoration:underline;text-underline-offset:5px}

.experience-pagination__status{justify-self:end;margin:0;font:500 9px var(--mono);text-transform:uppercase;letter-spacing:.06em}

.experience-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--accent)}

.experience-marquee__track{display:flex;width:max-content;animation:experience-marquee 34s linear infinite}

.experience-marquee__group{display:flex;align-items:center;white-space:nowrap}

.experience-marquee__group span{display:flex;align-items:center;font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.04em}

.experience-marquee__group span:after{content:"↗";margin:0 28px;opacity:.5}

@keyframes experience-marquee{to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){.experience-marquee__track{animation-play-state:paused}}


.more-projects{display:inline-flex;gap:24px;margin:42px 0 0 28%;align-items:center;color:var(--ink);text-decoration:none;font:500 12px var(--mono);text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:8px}

.more-projects span{font-size:19px}

.more-projects-note{margin:70px 0 0 28%;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:45px;font-size:13px;line-height:1.6}

.more-projects-note span{font:500 10px var(--mono);text-transform:uppercase;white-space:nowrap}

.more-projects-note p{margin:0;max-width:560px}


@media(max-width:760px){.nav{padding:22px 6vw}


.nav nav{display:none}


.menu-button{display:block;margin-left:auto}

.language-switch{margin-left:13px}


.nav.open nav{display:flex;position:absolute;right:6vw;top:62px;background:var(--paper);padding:18px;flex-direction:column;gap:15px}


.section{padding:78px 6vw}


.hero{padding:110px 6vw 30px;min-height:720px}


.hero-title{display:block;margin:auto 0}


.hero-title p{margin-top:24px}


.hero-intro{margin:0}


.hero-footer{font-size:9px;gap:18px}


.split,.profile{display:block}


.section-number{margin:0 0 55px}


.education-grid,.sustainability-copy,.profile-details{grid-template-columns:1fr}


.education article{min-height:300px}


.section-heading{display:block}


.section-heading h2{text-align:left}


.experience-list,.tag-list{margin-left:0;margin-top:55px}


.experience-list article{grid-template-columns:1fr;gap:22px}


.experience-grid{margin:55px 0 0;grid-template-columns:1fr}

.experience-card{min-height:390px;display:flex;flex-direction:column;justify-content:space-between;gap:0}

.experience-card__role{align-self:auto;border-left:0;border-top:1px solid currentColor;padding:13px 38px 0 0;width:100%}

.experience-card i{position:absolute;right:24px;bottom:23px}

.more-projects,.more-projects-note{margin-left:0}

.more-projects-note{display:block}

.more-projects-note p{margin-top:12px}

.experience-pagination{margin-left:0;grid-template-columns:auto 1fr auto;gap:10px}

.experience-pagination__pages{justify-self:center}

.experience-pagination__status{grid-column:1/-1;grid-row:2;justify-self:center}

.experience-marquee{padding:18px 0}

.experience-marquee__group span{font-size:11px}


.projects-intro{margin:50px 0 0;font-size:15px}


.project-grid{grid-template-columns:1fr;margin-top:35px}


.project-card,.project-card--blijdorp{min-height:480px}


.project-card h3{font-size:51px}


.project-card--defqon:after{font-size:140px}


.project-stat{bottom:102px}


.sustainability h2{margin-bottom:50px;text-align:left}


.contact{padding:80px 6vw 25px}


.contact h2{margin:45px 0}


.contact-links{grid-template-columns:1fr}


.copyright{margin-top:65px}


}

.roles{min-height:100vh}
.role-list{margin:85px 0 0 28%;border-top:1px solid var(--line)}
.role-list article{display:grid;grid-template-columns:12% 1fr;gap:25px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .3s ease}
.role-list article:hover{padding-left:18px}
.role-list span{font:500 10px var(--mono);letter-spacing:.06em}
.role-list h3{font-size:clamp(32px,4.8vw,70px);font-weight:500;letter-spacing:-.075em;margin:0;line-height:.94}
.nav nav{gap:16px}
.nav nav a{font-size:10px}
@media(max-width:760px){.about{display:block}
.about-statement{font-size:clamp(30px,9vw,49px)}
.about-strengths{grid-template-columns:1fr;margin-top:60px}
.about-strengths article{min-height:220px}
.about-strengths h2{margin-top:42px;font-size:30px}
.about-future{grid-template-columns:1fr;gap:20px;margin-top:65px}
.about-education{display:block;margin-top:55px}
.about-education>p:last-child{text-align:left;margin-top:28px}
.role-list{margin:55px 0 0}
.role-list article{grid-template-columns:45px 1fr}
.role-list h3{font-size:39px}
}
