@media (min-width: 100px) {
  :root,
  *::after,
  *::before {
    --hoofdKleur: #a88331;
    --maxWidth: 1200px;
    --mobileWidth: 768px;
    --docWidth: min(100vw, var(--maxWidth));
    --colWidth: calc(var(--docWidth) / 12);
    --gutterWidth: calc(var(--colWidth) / 4);
    --headerHeight: clamp(100px, calc(var(--colWidth) * 2), 25vh);
    --sectionHeight: calc(100vh - var(--headerHeight));
    --headerPaddingBottom: calc(0.15 * var(--headerHeight));
    --headerPadding: calc(0.118 * var(--headerHeight)) 0 calc(0.1875 * var(--headerHeight));
    --headerPosition: relative;
    --logoHeight: calc(0.694 * var(--headerHeight));
    --navItemWidth: auto;
    --navItemFlex: 1;
    --showMobile: initial;
    --hideMobile: none;
    --slickMargin: 0 var(--colWidth) 1rem;
    --mobileDirection: column;
    --imageHeight: auto;
    --imageWidth: 100%;
    --imageMargin: 0 0 0.5rem;
    --fontSize: calc(0.9375rem + ((1vw - 3.1px) * 0.4494));
    --inzetWidth: 100vw;
    --inzetMargin: 0;
    --inzetPadding: var(--colWidth);
    /* Safari resize fix */
    min-height: 0vw;
  }
}
@media (min-width: 769px) {
  :root,
  *::after,
  *::before {
    --headerPadding: 0 0 calc(0.15 * var(--headerHeight));
    --logoHeight: calc(0.65 * var(--headerHeight));
    --headerPosition: absolute;
    --navItemWidth: calc(3 * var(--colWidth));
    --navItemFlex: 0 0 var(--colWidth);
    --showMobile: none;
    --hideMobile: initial;
    --slickMargin: var(--colWidth) 0;
    --mobileDirection: row;
    --imageHeight: clamp(var(--sectionHeight) * .6, 275px, 45vh);
    --imageWidth: auto;
    --imageMargin: 0 calc(var(--gutterWidth) / 2);
    --inzetWidth: 520px;
    --inzetMargin: var(--colWidth);
    --inzetPadding: var(--gutterWidth);
  }
}
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .visible .dienst1 {
    --offset: 0, 2rem, 0;
  }
  .visible .dienst2 {
    --offset: calc(6.5 * var(--colWidth)), 0, 0;
  }
  .visible .dienst3 {
    --offset: calc(0.75 * var(--colWidth)), calc(.75 * var(--colWidth)), 0;
  }
  .visible .dienst4 {
    --offset: calc(2 * var(--colWidth)), calc(1.5 * var(--colWidth)), 0;
  }
  .visible .dienst5 {
    --offset: calc(0 * var(--colWidth)), calc(3.5 * var(--colWidth)), 0;
  }
  .visible .dienst6 {
    --offset: calc(7.5 * var(--colWidth)), calc(0 * var(--colWidth)), 0;
  }
  .visible .dienst7 {
    --offset: calc(1.25 * var(--colWidth)),
                    calc(1.25 * var(--colWidth)),
                    0;
  }
  .visible .dienst8 {
    --offset: calc(7 * var(--colWidth)), calc(.25 * var(--colWidth)), 0;
  }
  .visible .dienst9 {
    --offset: calc(3.5 * var(--colWidth)), calc(1 * var(--colWidth)), 0;
  }
  .visible .dienst10 {
    --offset: calc(5.25 * var(--colWidth)), calc(1.5 * var(--colWidth)), 0;
  }
}
@media (min-width: 1200px) {
  :root {
    --showMobile: none;
    --hideMobile: initial;
    --fontSize: 19px;
  }
}
* {
  box-sizing: border-box;
}
html {
  overflow: hidden auto;
  scroll-padding-top: calc(var(--headerHeight) + 16px);
}
html.scrollSnap {
  scroll-snap-type: y proximity;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0 auto;
  max-width: 1200px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: var(--fontSize);
  background-color: var(--hoofdKleur);
}
body::before {
  --ornamentMargin: calc(((100vw - var(--docWidth)) / 2) + var(--colWidth));
  content: '';
  position: fixed;
  left: var(--ornamentMargin);
  right: 0;
  top: var(--headerHeight);
  bottom: 0;
  background-size: 150%;
  background-image: url(../images/Ornament-achtergrond.svg);
  background-repeat: no-repeat;
  background-position: -92% 30%;
}
@media (min-width: 768px) {
  body::before {
    right: var(--ornamentMargin);
    top: var(--headerHeight);
    bottom: -100vh;
    background-size: contain;
    background-position: top;
  }
}
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
  padding: 0;
}
h1,
h2,
h3 {
  text-transform: uppercase;
}
.noWrap {
  white-space: nowrap;
}
.hide {
  opacity: 0;
}
.hideMobile {
  display: var(--hideMobile);
}
.showMobile {
  display: var(--showMobile);
}
.payOff {
  padding-block: 1.5rem 0.5rem;
  font-size: var(--fontSize);
  display: block;
  position: relative;
}
.MOBILE .payOff {
  margin: 0 0 0 var(--colWidth);
}
.payOff strong {
  color: black;
  margin-right: 0.37rem;
}
.payOff strong + strong:before {
  content: '';
  display: inline-block;
  width: 0.37rem;
  height: 0.37rem;
  margin-inline: 0 0.37rem;
  background-color: white;
}
.hamburger {
  width: calc(0.33 * var(--logoHeight));
  aspect-ratio: 1;
  margin: 0 var(--colWidth) 0 0;
  border: none;
  background-color: transparent;
  background-image: repeating-linear-gradient(0deg, black 0 10%, transparent 0 40%);
  cursor: pointer;
}
.werkLink {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  top: calc(100% + var(--headerPaddingBottom));
  right: 0;
  aspect-ratio: 1;
  background-color: #000b;
  padding: var(--gutterWidth);
  color: white;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out;
  will-change: opacity;
}
.werkLink span {
  display: block;
  line-height: 2rem;
  margin: 0;
}
.werkLink .triangle {
  display: flex;
}
.werkLink b {
  display: inline-block;
  width: 2rem;
  aspect-ratio: 1;
  background-color: var(--hoofdKleur);
  margin-left: 1.8rem;
  margin-block: -3px;
  -webkit-clip-path: polygon(0% 10%, 100% 50%, 0% 90%);
          clip-path: polygon(0% 10%, 100% 50%, 0% 90%);
}
header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: var(--headerHeight);
  padding: var(--headerPadding);
  background-color: white;
  box-shadow: 0 calc(-1 * var(--docWidth)) 0 var(--docWidth) white;
  text-transform: uppercase;
}
header .logo {
  display: block;
  width: auto;
  height: var(--logoHeight);
  margin-left: var(--colWidth);
}
header div {
  position: relative;
  display: var(--hideMobile);
}
.MOBILE header div {
  position: absolute;
  left: var(--colWidth);
  top: 100%;
  width: 100%;
}
header h1 {
  font-size: var(--fontSize);
  line-height: 0.8;
  margin-block: 0;
  color: var(--hoofdKleur);
  letter-spacing: 0.2px;
  text-shadow: 0.3px 0.3px black;
}
header h1 strong {
  display: block;
  font-weight: 600;
  padding-top: 0.8rem;
}
header .werkLink {
  position: absolute;
  width: calc(100% + 1 * var(--gutterWidth));
}
nav {
  margin-bottom: -11px;
}
.MOBILE nav {
  margin-bottom: -2rem;
}
nav ul {
  font-size: var(--fontSize);
  margin: 0 -1rem -1rem 0;
  padding: 0;
  display: flex;
  flex-direction: var(--mobileDirection);
  width: var(--navItemWidth);
  margin-right: var(--colWidth);
}
.MOBILE nav ul {
  border: 1px solid #ccc;
  background-color: white;
  padding: 1.2rem 1.5rem 1rem 1rem;
  line-height: 1.6rem;
  margin: 0 calc(var(--colWidth) - 1.5rem) 0 0;
}
.DESKTOP nav ul {
  margin: 0 var(--colWidth) 0 0;
  justify-content: space-between;
}
nav ul li {
  flex: var(--navItemFlex);
}
nav ul li a {
  --accentKleur: transparent;
  display: inline-flex;
  align-items: flex-end;
  color: black;
  padding-bottom: 0.3rem;
}
.DESKTOP nav ul li a {
  --accentKleur: var(--hoofdKleur);
  border-bottom: 2px solid transparent;
}
nav ul li a.active,
nav ul li a:hover {
  border-bottom: 2px solid var(--accentKleur);
}
.MOBILE nav ul li a {
  border: none;
}
.MOBILE nav ul li a::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-inline: 0 0.4rem;
  background-color: var(--accentKleur);
  margin-block: auto 7px;
  border-bottom: none;
}
.MOBILE nav ul li a.active::before {
  --accentKleur: var(--hoofdKleur);
}
section {
  height: var(--sectionHeight);
  overflow: hidden auto;
  scroll-snap-align: start;
}
@supports (height:100dvh) {
  section {
    height: calc(100dvh - var(--headerHeight));
  }
}
section.diensten {
  text-transform: uppercase;
  position: relative;
}
section.diensten h1 {
  display: none;
  margin: 1rem var(--colWidth);
}
.MOBILE section.diensten h1 {
  display: block;
}
section.diensten ul {
  padding: 0;
  margin-left: calc(var(--colWidth));
  font-size: var(--fontSize);
  line-height: 1.4rem;
  min-height: 50vh;
  text-shadow: 0.5px 0.5px black;
}
.MOBILE section.diensten ul {
  margin-left: calc(var(--colWidth) + 1.25rem);
}
section.diensten ul li {
  --ofset: 0, 0, 0;
  padding-block: 0.5rem;
  color: white;
  transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
  transform: translate3d(var(--offset));
}
.MOBILE section.diensten ul li {
  text-indent: -1.25rem;
}
.DESKTOP section.diensten ul li {
  opacity: 0;
  scale: 0.1;
}
.DESKTOP section.diensten ul li.limitWidth {
  max-width: calc(3.33 * var(--colWidth));
  text-indent: -1.25rem;
  margin-left: 1.25rem;
}
section.diensten ul li:before {
  content: '';
  display: inline-block;
  width: 0.66rem;
  height: 0.66rem;
  margin-inline: 0 0.66rem;
  background-color: black;
  margin-right: 0.5rem;
}
.DESKTOP section.diensten.visible li[class*=dienst] {
  opacity: 1;
  scale: 1;
}
.MOBILE section.diensten .werkLink {
  margin-left: var(--colWidth);
  padding-inline: 1rem;
  aspect-ratio: 1.3;
}
.MOBILE section.diensten .werkLink span {
  line-height: 1.7rem;
}
.DESKTOP section.diensten .werkLink {
  display: none;
}
section.fotosWerk {
  display: flex;
  flex-direction: var(--mobileDirection);
}
section.fotosWerk h2 {
  position: var(--headerPosition);
  color: white;
  margin: 0 0 0 var(--colWidth);
  font-size: var(--fontSize);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2px;
  padding-top: 1rem;
}
section.fotosWerk .payOff {
  display: none;
}
.MOBILE section.fotosWerk .payOff {
  display: block;
  padding-block: 0.5rem 1.5rem;
}
section.fotosWerk .slick {
  position: relative;
  display: flex;
  flex-direction: var(--mobileDirection);
  align-items: stretch;
  margin: var(--slickMargin);
  scroll-behavior: smooth;
  overscroll-behavior: auto;
  overflow-x: scroll;
  height: -webkit-min-content;
  height: min-content;
}
section.fotosWerk .slick::-webkit-scrollbar {
  display: none;
}
.MOBILE section.fotosWerk .slick {
  flex: 0 0 calc(100vh - var(--headerHeight) - 5rem);
  overflow: hidden;
}
.MOBILE section.fotosWerk .slick::before,
.MOBILE section.fotosWerk .slick::after {
  content: '';
  display: block;
  background-color: white;
  position: sticky;
  top: 0;
  width: 100%;
  height: 1px;
  min-height: 1px;
  z-index: 1;
}
.MOBILE section.fotosWerk .slick::after {
  top: auto;
  bottom: 0;
}
.MOBILE section.fotosWerk.visible .slick {
  overflow-y: auto;
}
section.fotosWerk .slick-list {
  border: solid white;
  border-width: 0 1px;
}
section.fotosWerk .slick-slide {
  --maxZoom: 1.5;
  position: relative;
  transition: transform 400ms ease-in-out;
  will-change: scale;
  transform: scale(1);
  transform: scale3d(1, 1, 1);
}
section.fotosWerk .slick-slide:hover {
  transform: scale(1.5);
  transform: scale3d(var(--maxZoom), var(--maxZoom), var(--maxZoom));
}
section.fotosWerk .slick-slide--onTop {
  z-index: 99;
}
section.fotosWerk .slick-arrow {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  z-index: 1;
  height: var(--imageHeight);
  flex: 0 0 var(--colWidth);
  background-color: var(--hoofdKleur);
  font-size: 2rem;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-weight: 400;
}
section.fotosWerk .slick-prev {
  left: 0;
}
section.fotosWerk.slick-next {
  right: 0;
}
section.fotosWerk img {
  display: block;
  height: var(--imageHeight);
  width: var(--imageWidth);
  border: 1px solid #ffffffbb;
  margin: var(--imageMargin);
}
.MOBILE section.fotosWerk picture:first-child img {
  margin-top: -1px;
}
.MOBILE section.fotosWerk picture:last-child img {
  margin-bottom: -1px;
}
section.contact {
  overflow: visible;
}
.DESKTOP section.contact h2 {
  display: none;
}
.MOBILE section.contact h2 {
  display: block;
}
section.contact .payOff {
  padding-block: 0.5rem 1.5rem;
}
section.contact .inzet {
  opacity: 0.8;
  position: relative;
  display: flex;
  background-color: white;
  min-height: 400px;
  width: var(--inzetWidth);
  margin: 0 0 0 var(--inzetMargin);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 0 transparent;
}
.MOBILE section.contact .inzet {
  min-height: calc(400px + 1rem);
}
section.contact .inzet * {
  opacity: 1;
}
.DESKTOP section.contact.visible .inzet {
  box-shadow: 0 -2rem white;
}
section.contact .gegevens {
  padding: 1rem var(--gutterWidth) calc(0.4 * var(--colWidth)) var(--inzetPadding);
  line-height: 1.8rem;
  flex: 0 0 calc(0.65 * var(--inzetWidth));
  z-index: 1;
}
section.contact h3,
section.contact p,
section.contact a {
  color: black;
  margin: 0;
  font-size: var(--fontSize);
  font-weight: 400;
  text-shadow: 1px 1px 1px white;
}
section.contact h3 + h3,
section.contact p + h3,
section.contact a + h3 {
  margin-top: 1rem;
}
section.contact p,
section.contact a {
  font-size: calc(0.9 * var(--fontSize));
}
section.contact a {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--hoofdKleur);
          text-decoration-color: var(--hoofdKleur);
}
section.contact h3:last-child {
  text-transform: none;
}
section.contact p span {
  display: inline-block;
  width: 1rem;
}
section.contact .foto {
  position: absolute;
  bottom: 0;
  right: -20px;
  /* -20px @ 490px increasing to -100px @ 310px */
  right: calc(-1 * clamp(20px, calc(1.25rem + ((1vw - 4.9px) * -44.4444)), 100px));
  min-height: 0vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
section.contact .foto img {
  display: block;
}
@media (orientation: landscape) {
  .MOBILEhtml {
    scroll-padding-top: 0;
  }
  .MOBILE header {
    top: calc(-1 * var(--headerHeight));
  }
  .MOBILE nav {
    position: sticky;
    top: 0;
  }
  .MOBILE section.fotosWerk {
    height: 100vh;
  }
  .MOBILE section.fotosWerk .slick {
    flex: 1;
    overflow: auto;
  }
}