/* VRYE JONGENS DESIGN SYSTEM v02 | Fontrollen: Barlow Condensed (display), DM Sans (tekst), Space Mono (microcopy) */
:root{--ink:#191919;--paper:#f3f0e7;--teal:#66c4bd;--yellow:#f2cf43;--white:#fffdf6;--display:'Barlow Condensed',Impact,sans-serif;--text:'DM Sans',Arial,sans-serif;--mono:'Space Mono',monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit}img{max-width:100%}.grain{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.08;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='.87' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}.shell{max-width:1250px;margin:auto;padding-left:clamp(22px,5vw,74px);padding-right:clamp(22px,5vw,74px)}.header{border-bottom:1px solid #19191928}.topbar{max-width:1250px;margin:auto;min-height:112px;padding:12px clamp(22px,5vw,74px);display:grid;grid-template-columns:1fr 150px 1fr;align-items:center}.top-logo{justify-self:center;width:93px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.top-logo:hover{transform:rotate(-8deg) scale(1.07)}.top-logo img{width:100%;display:block}.toplink{text-decoration:none;font:700 11px var(--mono);letter-spacing:-.03em}.toplink span{font-size:16px}.contact-link{justify-self:end;border-bottom:2px solid var(--ink);padding-bottom:5px}.hero{padding-top:29px}.hero-kicker,.hero-bottom{display:flex;justify-content:space-between;gap:15px;font:700 10px var(--mono);letter-spacing:.02em}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#da753e;margin-right:7px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:2%;min-height:435px}.hero-copy{position:relative;padding:28px 0 44px}.hand-label{display:inline-block;background:var(--yellow);font:700 10px var(--mono);padding:11px 13px;transform:rotate(-3deg);margin-bottom:19px}.hero h1,.what h2,.work h2,.contact h2{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:.88;margin:0}.hero h1{font-size:clamp(66px,7.5vw,110px)}.hero h1 em{font-style:normal;color:#d28343}.intro{font-size:clamp(15px,1.65vw,19px);line-height:1.5;max-width:510px;margin:24px 0}.hero-actions{display:flex;align-items:center;gap:23px;flex-wrap:wrap}.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 18px;background:var(--ink);color:#fff;text-decoration:none;font:700 11px var(--mono);min-height:53px;transition:background .2s,transform .2s}.cta:hover{background:#3a706d;transform:translateY(-3px)}.cta span{font-size:20px}.textlink{font:700 10px var(--mono);text-decoration:none;border-bottom:1px solid;padding-bottom:5px}.hero-visual{position:relative;padding:32px 23px 32px 15px}.photo-frame{background:#fff;padding:11px 11px 35px;box-shadow:9px 13px 0 #1313130e;transform:rotate(4deg);transition:transform .45s}.photo-frame:hover{transform:rotate(0)}.main-photo img{display:block;width:100%;height:335px;object-fit:cover;object-position:50% 30%}.photo-caption{display:block;font:700 11px var(--mono);margin:14px 4px -21px}.mini-note{position:absolute;bottom:12px;left:-13px;width:112px;height:112px;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(-13deg);border-radius:50%;background:var(--teal);font:700 16px/.99 var(--display);border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink)}.mini-note span{position:absolute;right:15px;bottom:15px}.hero-bottom{border-top:1px solid #1919192e;padding:17px 0 26px}.marquee{overflow:hidden;background:var(--ink);color:var(--paper);transform:rotate(-.7deg);margin:0 -3px}.marquee-track{white-space:nowrap;display:flex;align-items:center;width:max-content;gap:22px;padding:12px 0;animation:run 32s linear infinite}.marquee span{font:800 26px var(--display);letter-spacing:.03em}.marquee b{color:var(--yellow);font:30px var(--display)}@keyframes run{to{transform:translateX(-50%)}}.what{padding-top:83px;padding-bottom:79px}.eyebrow{font:700 10px var(--mono);margin-bottom:19px;letter-spacing:.02em}.section-head{display:grid;grid-template-columns:1.1fr .8fr;align-items:end;gap:38px;margin-bottom:39px}.what h2,.work h2{font-size:clamp(43px,5.25vw,72px)}.what h2 span,.work h2 span{color:#78756f}.section-head p{font-size:15px;line-height:1.65;max-width:390px;margin:0 0 4px}.service-row{display:grid;grid-template-columns:43px 1.2fr 1fr 20px;gap:15px;align-items:center;border-top:1px solid #19191955;padding:19px 0;transition:background .25s,padding .25s}.service-row:last-child{border-bottom:1px solid #19191955}.service-row:hover{background:#e4e4d9;padding-left:12px;padding-right:12px}.number{font:700 10px var(--mono)}.service-row h3{font:800 clamp(23px,2.8vw,35px)/1 var(--display);margin:0}.service-row p{font-size:13px;line-height:1.45;margin:0}.plus{font-size:20px}.inline-cta{display:inline-flex;gap:25px;text-decoration:none;font:700 11px var(--mono);border-bottom:2px solid var(--ink);padding:18px 0 7px;margin-top:17px}.work{background:#dedbd1;padding:75px 0 67px;overflow:hidden}.work-head{display:flex;justify-content:space-between;gap:25px;align-items:end}.work-hint{display:flex;align-items:flex-end;flex-direction:column;gap:12px;font:700 10px var(--mono);text-align:right}.shuffle{cursor:pointer;background:var(--teal);border:1px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:11px;font:700 10px var(--mono);transition:transform .2s}.shuffle:hover{transform:translate(-2px,-2px)}.collage{margin-top:22px;height:390px;position:relative;isolation:isolate}.snap{position:absolute;width:24%;margin:0;padding:9px 9px 27px;background:#fffdf8;box-shadow:4px 9px 19px #1414142c;cursor:grab;touch-action:none;user-select:none;transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot));transition:box-shadow .15s;will-change:transform}.snap:active{cursor:grabbing}.snap:hover{box-shadow:6px 15px 25px #14141448}.snap::before{content:'';width:65px;height:20px;background:#eac55bb0;position:absolute;top:-11px;left:calc(50% - 32px);transform:rotate(-6deg);z-index:2}.snap img{width:100%;height:240px;object-fit:cover;display:block;pointer-events:none}.snap figcaption{font:700 9px var(--mono);padding:11px 2px 0}.snap-a{left:1%;top:43px;--rot:-9deg;z-index:2}.snap-b{left:21%;top:10px;--rot:4deg;z-index:3}.snap-c{left:41%;top:52px;--rot:-5deg;z-index:4}.snap-d{left:60%;top:15px;--rot:7deg;z-index:3}.snap-e{left:79%;top:47px;--rot:-5deg;z-index:2}.drag-hint{font:700 10px var(--mono);margin:5px 0 0}.drag-hint span{opacity:.45}.contact{display:grid;grid-template-columns:1.4fr .6fr;gap:30px;align-items:center;padding-top:74px;padding-bottom:74px;min-height:360px}.contact h2{font-size:clamp(51px,6.1vw,81px)}.contact h2 em{font-style:normal;color:#469a95}.contact p{max-width:470px;font-size:15px;line-height:1.6;margin:20px 0}.cta-light{background:var(--yellow);color:var(--ink)}.cta-light:hover{background:var(--teal)}.contact-right{justify-self:center;text-align:center;transform:rotate(7deg)}.contact-right .seal{width:210px;height:210px;border-radius:100%;background:var(--ink);display:grid;place-items:center;border:8px solid var(--ink);animation:float 5s ease-in-out infinite}.seal img{width:100%;height:100%;object-fit:contain}.contact-right span{font:700 9px var(--mono);display:block;margin-top:18px}@keyframes float{50%{transform:translateY(-9px) rotate(3deg)}}.footer{background:var(--ink);color:var(--paper);padding:31px 0 20px}.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:25px}.footer-brand{font:800 32px var(--display);text-decoration:none;white-space:nowrap}.footer-brand span{color:var(--yellow)}.foot-links{display:flex;flex-direction:column;gap:8px}.foot-links a{font:500 12px var(--text);text-decoration:none}.foot-links a:hover{text-decoration:underline}.back{font:700 10px var(--mono);text-decoration:none}.foot-bottom{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ffffff30;margin-top:28px;padding-top:15px;font:9px var(--mono);color:#d1d0c9}a:focus-visible,button:focus-visible{outline:3px solid #bd6d3d;outline-offset:4px}
@media(max-width:850px){.hero-grid{min-height:auto}.hero h1{font-size:clamp(60px,9vw,90px)}.main-photo img{height:280px}.service-row{grid-template-columns:27px 1.05fr 1fr 15px;gap:10px}.service-row h3{font-size:27px}.snap img{height:190px}.collage{height:315px}.contact-right .seal{width:150px;height:150px}}
@media(max-width:640px){.topbar{min-height:95px;grid-template-columns:1fr 86px 1fr;padding:10px 20px}.top-logo{width:75px}.toplink{font-size:9px}.hero{padding-top:17px}.hero-kicker{font-size:8px}.hero-kicker span:last-child{display:none}.hero-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}.hero-copy{padding:30px 0 8px}.hand-label{font-size:9px;margin-bottom:14px}.hero h1{font-size:clamp(64px,15.5vw,89px)}.intro{font-size:15px;margin:18px 0 21px;max-width:460px}.hero-actions{gap:17px}.cta{min-height:48px;font-size:10px;padding:12px 13px}.textlink{font-size:9px}.hero-visual{padding:31px 22px 27px 22px;max-width:440px;align-self:center;width:100%}.main-photo img{height:260px}.mini-note{width:85px;height:85px;font-size:13px;left:0}.hero-bottom{padding:15px 0;font-size:8px}.hero-bottom span:last-child{display:none}.marquee span{font-size:23px}.what{padding-top:57px;padding-bottom:62px}.section-head{grid-template-columns:1fr;gap:15px;margin-bottom:25px}.what h2,.work h2{font-size:clamp(43px,10vw,61px)}.section-head p{font-size:14px}.service-row{grid-template-columns:25px 1fr 15px;gap:8px;padding:18px 0}.service-row h3{font-size:26px}.service-row p{grid-column:2;grid-row:2;font-size:12px;max-width:305px}.service-row .plus{grid-column:3;grid-row:1}.service-row .number{grid-column:1;grid-row:1}.inline-cta{font-size:9px}.work{padding:58px 0 56px}.work-head{align-items:start;gap:17px;flex-direction:column}.work-hint{align-items:start;text-align:left;gap:12px}.work-hint>span{display:none}.collage{margin:35px -22px 0;padding:17px 18px 29px;display:flex;gap:13px;overflow-x:auto;overflow-y:hidden;height:auto;scroll-snap-type:x mandatory;scroll-padding:18px;scrollbar-width:thin;overscroll-behavior-x:contain}.snap,.snap-a,.snap-b,.snap-c,.snap-d,.snap-e{position:relative;left:auto;top:auto;flex:0 0 min(72vw,280px);width:min(72vw,280px);transform:rotate(var(--rot));cursor:default;touch-action:pan-x;scroll-snap-align:center}.snap img{height:220px}.drag-hint{margin-top:12px;font-size:9px}.drag-hint span{opacity:1}.contact{grid-template-columns:1fr;gap:20px;padding-top:65px;padding-bottom:65px}.contact h2{font-size:clamp(57px,12vw,78px)}.contact-right{display:none}.foot-inner{align-items:flex-start;flex-direction:column;gap:18px}.footer-brand{font-size:30px}.back{align-self:flex-end;margin-top:-27px}.foot-bottom{flex-direction:column;font-size:8px;margin-top:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Concept 02.1 — contrast voor het originele zwarte logo */
.contact-right .seal{background:var(--paper);border:8px solid var(--ink);box-shadow:6px 7px 0 rgba(25,25,25,.12)}
.contact-right .seal img{width:100%;height:100%;object-fit:contain}