/* Blue sampled from Lusion; red from Provincie Fryslân's published colour sheet. */
:root{--studio-blue:#0016ec;--studio-black:#121416;--frisian-red:#c73326;--ivory:#f0f1fa;--ink:#121416;--coral:#c73326;--sage:#e4e6ef}
html{scrollbar-color:var(--studio-blue) var(--ivory)}
::selection{background:var(--studio-blue);color:white}
.pill.dark,.case-button{background:var(--studio-black)}
.pill.dark:hover,.case-button:hover{background:var(--studio-blue)}
.pill,.round-button,.case-motion{background:#e4e6ef}
.menu{background:var(--studio-blue);color:#fff}.menu-link{border-color:#ffffff44}.menu-link:hover{color:#fff;opacity:.7}
.hero-stage{background:#121416}.header-scrolled{background:#f0f1faf0!important}.header.world-header{background:transparent!important}
.reel-frame{background:var(--studio-blue)}.reel-tint{background:var(--studio-blue)}
.art-web,.art-software{background:#e4e6ef}.art-seo{background:var(--studio-blue);color:#fff}.art-seo .art-tag{color:white}
.contact{background:var(--studio-blue);color:white}.contact .pill{background:white;color:var(--studio-black)}
.contact .section-kicker span{background:transparent;color:inherit}
.world-exit h2 em{color:#fff}.world-exit h2 em:after{content:'▪';color:var(--frisian-red);margin-left:.1em}
.scroll-thread .thread-shine{stroke:#f99f96}.ribbon-light{stroke:#f99f96}
.case-header{background:linear-gradient(#f0f1faf5,#f0f1fae8 70%,transparent)}
.project-detail .case-header{background:linear-gradient(#121416f5,#121416df 65%,transparent);color:#f0f1fa}
.project-detail .case-header .case-button{background:#f0f1fa;color:#121416}.project-detail .case-header .case-button:hover{background:#0016ec;color:white}
.project-detail .case-motion{background:#ffffff15;color:white}
.case-progress{background:var(--frisian-red);height:3px}
.case-contact,.case-footer{background:var(--studio-blue);color:white}
.case-contact>div,.case-footer{border-color:#ffffff40}.case-contact .case-button{background:#fff;color:#121416}
.case-outcome{background:#e4e6ef}.case-approach{background:#121416}.case-approach .case-kicker{color:#c4c9e0}
.case-step p{color:#c8cad4}.case-step>span{color:#aab5ff}
.case-view-cursor{background:var(--studio-blue);color:white;width:86px;height:86px}
.case-view-cursor[data-mode=zoom]{background:var(--frisian-red)}
.case-label,.case-opening-copy,.case-media figcaption,.portfolio-info>span,.portfolio-info p,.portfolio-count,.case-delivery-item p{color:#606374}
.portfolio-filters button[aria-pressed=true]{background:var(--studio-blue);border-color:var(--studio-blue);color:white}
.portfolio-index-title h1{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:clamp(70px,14vw,230px);font-weight:430;line-height:1.06;letter-spacing:-.075em;margin:35px 0}
.portfolio-title-mark{font-size:.55em;color:var(--frisian-red);font-weight:300;letter-spacing:0}
.portfolio-grid{gap:65px 28px}.portfolio-card:nth-child(even){margin-top:0}.portfolio-cover{aspect-ratio:1.55;border-radius:20px;background:#e4e6ef;transform:perspective(1200px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1),border-radius .6s}
.portfolio-cover img{transform:translate3d(var(--card-x,0px),var(--card-y,0px),0) scale(var(--card-scale,1));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.portfolio-card:hover .portfolio-cover{border-radius:20px}.portfolio-card:hover img{--card-scale:1.045}
.portfolio-card[data-project-group=tools] .portfolio-cover img{transform:translate3d(var(--card-x,0px),var(--card-y,0px),0) scale(var(--card-scale,1));padding:5%;object-fit:contain}
.portfolio-card[data-project-group=tools]:hover .portfolio-cover img{--card-scale:1.025}
.portfolio-info{padding-top:20px}.portfolio-info h3{transition:color .3s;display:flex;justify-content:space-between;gap:15px}.portfolio-info h3:after{content:'↗';font-size:.65em;margin-top:.2em;color:var(--frisian-red);transition:transform .4s}.portfolio-card:hover h3{color:var(--studio-blue)}.portfolio-card:hover h3:after{transform:translate(3px,-3px)}.portfolio-open{display:none!important}
/* The opening image travels from a split composition into a full-width stage. */
.project-detail main{display:block}.case-stage{background:#121416;color:#f0f1fa;position:relative}.case-stage-pin{position:relative;display:grid;grid-template-columns:55% 45%;min-height:100svh;padding:145px 5vw 65px;align-content:center;gap:30px 0}
.project-detail .case-top{padding:0 5vw 0 0;grid-column:1;grid-row:1}.project-detail .case-top h1{font-size:clamp(46px,6vw,104px);font-weight:430;line-height:1;letter-spacing:-.065em;margin:30px 0 24px;overflow-wrap:anywhere}.project-detail .case-subtitle{font-size:clamp(20px,2.1vw,32px);max-width:570px}.project-detail .case-opening-copy{color:#b5b7c2;font-size:14px;line-height:1.6;max-width:520px}.project-detail .case-eyebrow{font-size:8px;line-height:1.7;gap:18px}.project-detail .case-eyebrow>span:last-child{max-width:44%}
.project-detail .case-meta{grid-column:1;grid-row:2;padding:0 6vw 0 0;border:0;grid-template-columns:1fr 1fr;gap:20px}.case-stage .case-label{color:#9faaff}.case-stage .case-meta p{font-size:12px}.case-stage .case-services{gap:6px}.case-stage .case-services span{font-size:9px;border-color:#ffffff30;padding:7px 10px}.case-stage .case-meta>div:last-child{grid-column:1/-1}
.project-detail .case-hero{position:relative;top:auto;grid-column:2;grid-row:1/span 2;margin:0;min-height:0;height:100%;max-height:none;border-radius:20px;background:#20232c;align-self:stretch}.project-detail .case-hero>img{object-fit:contain;transform:none;will-change:transform}.project-detail .case-hero.hero-cover>img{object-fit:cover}.case-scroll-cue{grid-column:2;font-size:9px;letter-spacing:.08em;justify-self:end;display:flex;align-items:center;gap:16px;color:#c4c9e0}.case-scroll-cue span{font-size:22px;color:#c73326}.case-hero .case-launch{right:22px;bottom:22px}
.case-chapters{display:flex;justify-content:center;gap:32px;padding:24px 5vw;border-bottom:1px solid #12141620;font-size:11px;background:#f0f1fa;position:relative;z-index:5}.case-chapters a:hover{color:var(--studio-blue)}[id]{scroll-margin-top:105px}
.case-gallery{gap:32px;padding-bottom:65px}.case-image-wrap{border-radius:20px;background:#e4e6ef;transform:translateY(var(--media-y,0px));transition:none;isolation:isolate}.case-image-wrap img{transform:scale(var(--media-scale,1));transform-origin:center;transition:transform .9s cubic-bezier(.2,.7,.2,1)}.case-image-wrap:hover{--media-scale:1.015}.case-media figcaption{font-size:11px;max-width:850px;padding-top:20px;line-height:1.65}.case-media.wide{margin:20px 0}.case-media.pair:nth-child(even){padding-top:80px}
.case-image-wrap:after{content:'BEKIJK IN DETAIL ↗';position:absolute;right:18px;bottom:18px;background:#121416e8;color:white;border-radius:30px;padding:12px 16px;font-size:9px;letter-spacing:.04em;pointer-events:none}
.case-next{min-height:78svh;display:flex;flex-direction:column;justify-content:space-between;background:#121416;padding-top:55px;padding-bottom:40px}.case-next:before{display:none}.case-next-visual{position:absolute;inset:0;background:linear-gradient(90deg,#000b,#0003),var(--next-image) center/cover;z-index:-1;transform:scale(var(--next-scale,1.08));transition:transform 1s cubic-bezier(.2,.7,.2,1)}.case-next:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#0009);z-index:-1}.case-next h2{font-size:clamp(60px,10vw,180px);font-weight:430;max-width:90%;margin:70px 0}.case-next:hover .case-next-visual{transform:scale(1.02)}
.case-lightbox{background:#121416;color:#f0f1fa}.case-lightbox::backdrop{background:#000d}.case-lightbox-controls button{background:#f0f1fa;color:#121416}.case-lightbox-stage{background:#20232c}
.studio-transition{position:fixed;inset:0;z-index:200;background:var(--studio-blue);pointer-events:none;transform:translateY(101%);border-radius:50% 50% 0 0;display:grid;place-items:center;color:white;font-size:clamp(35px,5vw,80px);letter-spacing:-.06em}.studio-transition span:after{content:'▪';color:var(--frisian-red)}
@media(min-width:1001px) and (min-height:650px){.js-case-motion .case-stage{height:185svh}.js-case-motion .case-stage-pin{position:sticky;top:0;height:100svh;overflow:hidden}.js-case-motion .case-stage .case-top,.js-case-motion .case-stage .case-meta{transform:translateX(calc(var(--hero-progress,0)*-55px));opacity:calc(1 - var(--hero-progress,0)*1.9)}.js-case-motion .case-stage .case-hero{position:absolute;left:calc(55% - var(--hero-progress,0)*50%);right:5%;top:calc(145px - var(--hero-progress,0)*35px);height:calc(100% - 210px + var(--hero-progress,0)*65px);width:auto;z-index:2}.js-case-motion .case-scroll-cue{position:absolute;right:5vw;bottom:25px}.js-case-motion .case-stage .case-hero>img{transform:scale(calc(1 + var(--hero-progress,0)*.025))}}
html:not(.js-case-motion) .case-image-wrap{transform:none}html:not(.js-case-motion) .case-next-visual{transform:none}
@media(max-width:1000px){.case-stage-pin{padding-top:130px;grid-template-columns:1fr;gap:32px}.project-detail .case-top{padding:0;grid-column:1;grid-row:auto}.project-detail .case-top h1{font-size:clamp(54px,11vw,100px)}.project-detail .case-meta{grid-column:1;grid-row:auto;padding:0}.project-detail .case-hero{grid-column:1;grid-row:auto;height:60svh;min-height:330px;max-height:680px}.case-scroll-cue{grid-column:1}.project-detail .case-hero.hero-cover>img{object-fit:contain}}
@media(max-width:600px){.portfolio-index-title h1{font-size:16vw;gap:10px}.portfolio-title-mark{font-size:.5em}.portfolio-cover{aspect-ratio:1.35}.portfolio-grid{gap:38px}.case-stage-pin{padding:125px 6vw 30px;gap:27px}.project-detail .case-top h1{font-size:14vw;margin-top:25px}.project-detail .case-eyebrow{font-size:7px}.project-detail .case-hero{height:43svh;min-height:280px;border-radius:14px}.case-hero .case-launch{bottom:14px;right:14px}.project-detail .case-subtitle{font-size:25px}.case-chapters{gap:0;justify-content:space-between;font-size:9px;padding:22px 6vw}.case-gallery{padding:0 6vw 40px;gap:20px}.case-image-wrap{border-radius:14px;transform:none}.case-media.pair:nth-child(even){padding-top:0}.case-media figcaption{padding:15px 0 12px;font-size:10px}.case-media.wide{margin:0}.case-image-wrap:after{font-size:8px;padding:9px 12px;bottom:12px;right:12px}.case-next{min-height:60svh}.case-next h2{font-size:15vw}.case-contact h2{font-size:14vw}}
@media(prefers-reduced-motion:reduce){.studio-transition{display:none}.portfolio-cover,.portfolio-cover img,.case-image-wrap,.case-image-wrap img,.case-next-visual{transform:none!important;transition:none!important}}
body.paused .portfolio-cover,body.paused .portfolio-cover img,html:not(.js-case-motion) body:is(.project-detail,.project-index) .portfolio-cover,html:not(.js-case-motion) body:is(.project-detail,.project-index) .portfolio-cover img{transform:none!important;transition:none!important}
@media(min-width:1001px) and (min-height:650px){.js-case-motion .case-stage .case-hero{grid-area:auto;align-self:auto}.js-case-motion .case-scroll-cue{grid-area:auto}}
.case-media.pair img{height:auto;max-height:780px}.case-image-wrap{min-height:0}
.project-detail .case-header.on-light{background:linear-gradient(#f0f1faf5,#f0f1fae8 70%,transparent);color:#121416}
.project-detail .case-header.on-light .case-button{background:#121416;color:#f0f1fa}.project-detail .case-header.on-light .case-button:hover{background:#0016ec}
.project-detail .case-header.on-light .case-motion{background:#e4e6ef;color:#121416}
html:not(.js-case-motion) .case-image-wrap img{transform:none!important;transition:none!important}