@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Poppins-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Poppins-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/SourceSansPro-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/SourceSansPro-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/SourceSansPro-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/SourceSansPro-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.8 'Source Sans Pro',sans-serif;color:#2a2a2a;background:#fff}
h1,h2,h3,h4,.section-title{font-family:Poppins,sans-serif;font-weight:500;margin:0}
h1{font-size:clamp(38px,4.67vw,67px);line-height:1.232}
h2,.section-title{font-size:clamp(32px,3.25vw,47px);line-height:1.3}
h3{font-size:clamp(26px,2.54vw,36.5px);line-height:1.333}
h4{font-size:19.4px;line-height:1.389}
p{margin:0 0 1em}
p.large{font-size:clamp(18px,1.59vw,22.8px)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{padding-left:5vw;padding-right:5vw}
.btn{display:inline-block;background:#ea83c4;color:#fff;font:500 16px/1.6 Poppins,sans-serif;letter-spacing:.02em;text-decoration:none;text-align:center;padding:20px 32px;min-width:207px;border:0;border-radius:7px;cursor:pointer}
.btn:hover{opacity:.8}
.btn.small{font-size:12.5px;min-width:0;padding:19px 32px}

.site-header{display:flex;align-items:center;gap:8px 23px;flex-wrap:wrap;min-height:84px;padding:14px 5vw}
.site-title{font:500 20px/1.2 Poppins,sans-serif;text-decoration:none;margin-right:auto}
.site-header nav{display:flex;gap:23px}
.site-header nav a{text-decoration:none;padding:1.6px 0}
.site-header nav a.active,.site-header nav a:hover{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.social{display:flex;gap:16px;align-items:center}
.site-header .social{margin-left:15px;gap:22px}
.social a{display:block;width:22px;height:22px}
.social svg{width:100%;height:100%;fill:currentColor}

.hero{background:#36200a center/cover no-repeat;box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.15);color:#fff;display:flex;align-items:flex-end;min-height:var(--h)}
.hero h1,.hero h2,.hero h3{text-wrap:balance}
.hero .wrap{width:100%;padding-top:min(5vw,72px);padding-bottom:calc(var(--h)*.1)}
.hero h2,.hero h3,.hero h1{max-width:972px}
.hero h4{margin-top:36px}
.hero.narrow h3{max-width:500px}
.hero.right{text-align:right}
.hero.right h1,.hero.right h2{margin-left:auto}
.hero-home{--h:628px}
.hero-over-ons{--h:372px}
.hero-projecten{--h:408px}
.hero-projecten h2{max-width:570px}
.hero-contact{--h:564px}

.blue{background:#abcff1}
.green{background:#2f937e}

.intro .wrap{display:grid;grid-template-columns:3fr 6fr;gap:11px;padding-top:87px;padding-bottom:70px}
.who .wrap{display:grid;grid-template-columns:minmax(0,697px) minmax(0,588px);justify-content:space-between;gap:11px;align-items:start;padding-top:91px;padding-bottom:48px}
.who h2{margin:0 0 20px}
.who p.large{margin-bottom:.7em}
.who img{width:100%;aspect-ratio:1;object-fit:cover;margin-top:7px}
.who .buttons{display:flex;gap:66px;align-items:center;flex-wrap:wrap;margin:108px 0 0 54px}
.who .buttons .btn{max-width:261px;padding:9px 32px;min-height:67px;display:flex;align-items:center;justify-content:center}

.split .wrap{display:grid;grid-template-columns:minmax(0,520px) minmax(0,631px);justify-content:space-between;gap:40px;padding-top:87px;padding-bottom:87px}
.split h2{margin-bottom:44px}
.split.tall .wrap{padding-top:135px;padding-bottom:135px}
.split p.large{margin-bottom:.5em}

.people .wrap,.projects .wrap{padding-top:50px;padding-bottom:50px}
.projects .wrap{padding-top:68px;padding-bottom:0}
.section-title{text-align:center;line-height:1.8;margin-bottom:20px}
.grid3,.grid4{display:grid;gap:100px}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.projects .grid3{row-gap:100px;padding-bottom:100px}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;margin-bottom:22px}
.projects .card img{aspect-ratio:3/2}
.card h2{font-size:19.4px;line-height:1.3}
.card p{font-size:14.27px;margin:0 0 16px}
.card h2+p{margin-top:0}
.center{text-align:center}
.projects .card h2{margin-bottom:22px}
.projects .card .btn{margin-top:20px}
.board .card h2{margin-top:-1px}

.follow{text-align:center}
.follow .wrap{padding:165px 5vw 162px}
.follow h2{margin-bottom:38px}
.follow p{max-width:969px;margin:0 auto 20px}
.follow.green .btn{margin-top:38px}

.contact .wrap{padding-top:96px;padding-bottom:115px}

.site-footer{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-top:79px;padding-bottom:70px}
.site-footer>div:first-child{max-width:520px}
.site-footer>div:last-child{width:188px}
.site-footer h3{margin-bottom:26px}
.site-footer h4{margin-bottom:34px}
.site-footer .social a{width:28px;height:28px}

@media (max-width:800px){
  .wrap,.site-header{padding-left:6vw;padding-right:6vw}
  .site-header .social{display:none}
  .site-header nav{gap:18px}
  .hero{--h:60vw}
  .hero .wrap{padding-top:40px}
  .intro .wrap,.who .wrap,.split .wrap{grid-template-columns:1fr;gap:24px;padding-top:56px;padding-bottom:56px}
  .split h2{margin-bottom:16px}
  .who .buttons{margin:32px 0;gap:16px}
  .grid3,.grid4{grid-template-columns:1fr;gap:56px}
  .grid4{grid-template-columns:1fr 1fr;gap:32px 20px}
  .follow .wrap{padding-top:80px;padding-bottom:80px}
}