* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: clamp(0px, 0.93vw, 12px); line-height: 1.4; height: 100%; background: white; scroll-behavior: smooth;}
body {font-family: 'Barlow',serif; color: #164A68; font-size: 1.42rem;}
.container {margin: 0 auto; max-width: 95rem; width: 100%; padding: 0 clamp(1rem, 2vw, 2rem);}
blockquote, h3 {font-family: 'HendersonSans-Bas'; font-weight: normal; font-size: 2.3rem;}
p {margin-bottom: 1.25em;}
img {display: block;}

.header {background: white; z-index: 99; position: sticky; top: 0; width: 100%;}
.header .container {display: flex; padding-top: 3rem; align-items: flex-end; justify-content: space-between;}
.header .container h1 {position: relative; font-size: 2rem; font-weight: normal;}
.header .container h1 a {display: block; margin-bottom: 1.4rem; color: #285a77; text-decoration: none; position: relative;}
.header .container h1 a span {position: absolute; display: none; bottom: 0; margin-bottom: -0.5rem; font-family: 'HendersonSans-Bas';}
.header .container h1 a img {height: 8.5rem; width: auto; display: block;}
.header .container ul {display: flex; width: 60%; justify-content: space-between;}
.header .container ul li {list-style: none;}
.header .container ul li a {color: #164A68; text-decoration: none; padding: 1.2rem 0; display: block;}
.header .container > a {display: none;}

body.smallheader .header {transform: translateY(-8.7rem); box-shadow: 0px 0px 1rem rgba(0,0,0,0.1);}
body.smallheader .header .container h1 a img {opacity: 0;}
body.smallheader .header .container h1 a span {display: block;}

.banner {background: url(/img/header.jpg) center center / cover no-repeat; height: 30vw; border-bottom: 0.7rem solid #547B96;}

.main .content {padding: 4.5rem 0; position: relative;}
.main .content span.anchor {height: 3rem; position: absolute; width: 100%; top: 0; margin-top: -3rem; pointer-events: none; width: 3rem; opacity: 0; display: block;}
.main .content h2 {font-weight: normal; text-transform: uppercase; font-size: 2.6rem; letter-spacing: 0.2rem; text-align: center; margin-bottom: 2rem;}

.main .content:nth-child(1) .container {display: flex; gap: 3rem;}
.main .content:nth-child(1) .container blockquote {width: 47%; position: relative; bottom: 0.5rem;}
.main .content:nth-child(1) .container > * {width: 53%;}

.main .content:nth-child(4) .container > h2 + p {font-size: 2rem; line-height: 1.3; margin: 0 auto 4.5rem; font-weight: 300;}
.main .content:nth-child(4) .container > p {max-width: 60rem; width: 100%; text-align: center; margin: 0 auto 2rem;}

.main .content:nth-child(even) {background: #e9eeeb;}

.services {display: grid; grid-gap: 2.7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 3rem 0 1.5rem;}
.services > div {position: relative; background: white;}
.services > div img {width: 100%; margin-bottom: 1rem; height: auto;}
.services > div > div {padding: 1rem 3rem 1.5rem;}
.services > div > div h3 {margin-bottom: 1.3rem;}

.services.prices {margin-bottom: 5rem;}
.services.prices > div::before {position: relative; content: ""; height: 0.9rem; background: #9d8094; width: 100%; display: block; margin-bottom: 1rem}
.services.prices > div:nth-child(2)::before {background: #547B96;}
.services.prices > div:nth-child(3)::before {background: #164a68;}

.overmij {display: flex; gap: 3rem; max-width: 69rem; width: 100%; margin: 2.5rem auto;}
.overmij > img {width: 44%; height: auto;}
.overmij > div {background: #e9eeeb; padding: 1rem 3rem 2rem; width: 56%;}

.projects > .carousel {max-width: 70rem; width: 100%; margin: 2.5rem auto 2.5rem;}
.projects > .carousel ul li {list-style: none; position: relative; width: 100%; background: #e9eeeb; display: flex; flex-direction: column;}
.projects > .carousel ul li img {max-width: 100%; height: auto;}
.projects > .carousel ul li h3 {text-align: center; padding: 1rem 1rem 1.2rem; flex-grow: 1; display: flex; align-items: center; line-height: 1.2;}
.projects > .carousel ul li h3 > span {display: block; width: 100%;}

.services.reviews {padding-bottom: 3rem;}
.services.reviews > div > div {height: 100%; padding-top: 2.5rem; display: flex; justify-content: space-between; flex-direction: column;}
.services.reviews h3 {font-size: 1.35rem; line-height: 1; margin-top: 0.75rem;}
.services.reviews .stars {
    background: url(/img/star.svg) left center / contain repeat-x;
    aspect-ratio: 5;
    height: 1.5rem;
}


.footer {background: #547B96; color: white; padding: 2rem 0 3rem; line-height: 1.6;}
.footer a {color: white; text-decoration: none;}
.footer p {margin: 0;}
.footer .container {display: flex; justify-content: space-between; position: relative; width: 100%;}
.footer .container > p::before {width: 1px; height: 100%; top: 0.5rem; content: ""; background: white; position: absolute; margin-left: -4.5rem;}
.footer .container h2 {opacity: 0; position: absolute; pointer-events: none;}
.footer .container blockquote {font-size: 2rem; line-height: 1.4;}
  
@media (max-width: 600px) {
    /* MOBILE VIEW */
    html {font-size: 3.2vw;} 
    .container {padding-left: 1.5rem; padding-right: 1.5rem;}
    blockquote, h3 {font-size: 2rem;}
    .header .container {flex-direction: column; align-items: flex-start; padding-top: 1.5rem;}
    .header .container > a {
        position: absolute; 
        display: block; 
        right: 1.25rem; 
        width: 3rem; 
        height: 3rem; 
        top: 1.2rem;
        cursor: pointer;
        overflow: hidden;
        color: transparent;
    }
    .header .container > a::before,
    .header .container > a::after,
    .header .container > a span {
        content: "";
        width: 0.1rem;
        height: 3rem;
        background: #164a68;
        transform: translate(-50%,calc(-50% - 0.75rem)) rotate(90deg);
        transform-origin: 50% 50%;
        position: absolute;
        left: 50%;
        top: 50%;
    }
    .header .container > a span {transform: translate(-50%,-50%) rotate(90deg);}
    .header .container > a::after {transform: translate(-50%,calc(-50% + 0.75rem)) rotate(90deg);}
    body.showmenu .header .container > a span {display: none;}
    body.showmenu .header .container > a::before {transform: translate(-50%,-50%) rotate(45deg);}
    body.showmenu .header .container > a::after {transform: translate(-50%,-50%) rotate(-45deg);}
    .header .container ul {display: none; padding-bottom: 2rem;}
    .header .container h1 a img {height: 5rem; margin-bottom: 1.5rem;}
    body.showmenu .header .container ul {display: block;}
    .main .content {padding-bottom: 0;}
    .main .content h2 {font-size: 2rem; letter-spacing: 0.1rem; text-align: left;}
    .main .content:nth-child(2n) {background: transparent;}
    .main .content:nth-child(1) .container {flex-direction: column; gap: 0rem;}
    .main .content:nth-child(1) .container > *,
    .main .content:nth-child(1) .container blockquote {width: auto;}
    .main .content:nth-child(4) .container > h2 + p {font-weight: normal; font-size: 1.42rem; margin-bottom: 3.5rem;}
    .main .content:nth-child(4) .container p {text-align: left;}
    .services {grid-template-columns: repeat(1, minmax(0, 1fr)); margin-bottom: 2rem;}
    .services > div {background: #e9eeeb;}
    .services > div > div, .overmij > div {padding-left: 2.25rem; padding-right: 2.25rem;}
    .services.prices {margin-bottom: 2rem;}
    .projects > .carousel ul li h3 {padding-top: 0.6rem; padding-bottom: 0.8rem; font-size: 1.5rem;}
    .overmij {flex-direction: column; gap: 0rem;}
    .overmij > div,
    .overmij > img {width: auto;}
    body.smallheader .header {transform: none; box-shadow: 0px 0px 1rem rgba(0,0,0,0.1);}
    body.smallheader .header .container h1 a img {opacity: 1;}
    body.smallheader .header .container h1 a span {display: none;}
    .footer {padding: 4rem 0 4rem; line-height: 1.8;}
    .footer .container {flex-direction: column; gap: 2.5rem;}
    .footer .container blockquote br {display: none;}
    .main .content span.anchor {margin-top: -6.5rem;}
    .carousel .next, .carousel .prev {margin: 0!important; width: 2rem!important}
    .carousel .next::before, 
    .carousel .prev::before,
    .carousel .next::after, 
    .carousel .prev::after {background: white!important;}
}