@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), 25dvh);
    --sectionHeight: calc(100dvh - 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;
  }
}
@property --current-translate {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --current-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
@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, 45dvh);
    --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) {
  .dienst1 {
    --offset: 0, 2rem, 0;
  }
  .dienst2 {
    --offset: calc(6.5 * var(--colWidth)), 0, 0;
  }
  .dienst3 {
    --offset: calc(0.75 * var(--colWidth)), calc(0.75 * var(--colWidth)), 0;
  }
  .dienst4 {
    --offset: calc(2 * var(--colWidth)), calc(1.5 * var(--colWidth)), 0;
  }
  .dienst5 {
    --offset: calc(0 * var(--colWidth)), calc(3.5 * var(--colWidth)), 0;
  }
  .dienst6 {
    --offset: calc(7.5 * var(--colWidth)), calc(0 * var(--colWidth)), 0;
  }
  .dienst7 {
    --offset: calc(1.25 * var(--colWidth)), calc(1.25 * var(--colWidth)), 0;
  }
  .dienst8 {
    --offset: calc(7 * var(--colWidth)), calc(0.25 * var(--colWidth)), 0;
  }
  .dienst9 {
    --offset: calc(3.5 * var(--colWidth)), calc(1 * var(--colWidth)), 0;
  }
  .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-behavior: smooth;
  scroll-padding-top: var(--headerHeight);
}
html.scrollSnap {
  scroll-snap-type: y proximity;
}
html.scrollSnap.MOBILE {
  scroll-snap-type: y mandatory;
}
@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: -100dvh;
    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 {
  anchor-name: --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;
  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));
  animation: hideWerkLink both;
  animation-timeline: scroll(root);
}
nav {
  margin-bottom: -11px;
}
.DESKTOP nav {
  display: contents;
}
.MOBILE nav {
  position: fixed;
  position-anchor: --hamburger;
  position-area: left;
  border: none;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
  transition-behavior: allow-discrete;
}
.MOBILE nav:not(:popover-open) {
  translate: 100px 0;
  scale: 0.25;
  opacity: 0;
}
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 {
  position: relative;
  margin: 0 var(--colWidth) 0 0;
  justify-content: space-between;
}
@supports (animation-timeline: scroll(root)) {
  .DESKTOP nav ul {
    animation: scrollPosition linear;
    animation-timeline: scroll(root);
  }
}
@supports not (animation-timeline: scroll(root)) {
  .DESKTOP nav ul:has(a[href="#diensten"].activeFallback) {
    --current-translate: 0px;
    --current-scale: 1;
  }
  .DESKTOP nav ul:has(a[href="#fotosWerk"].activeFallback) {
    --current-translate: var(--colWidth);
    --current-scale: 1;
  }
  .DESKTOP nav ul:has(a[href="#contact"].activeFallback) {
    --current-translate: calc(2 * var(--colWidth));
    --current-scale: 1.6;
  }
  .DESKTOP nav ul::before,
  .DESKTOP nav ul::after {
    transition: translate 0.3s ease, scale 0.3s ease;
  }
}
.DESKTOP nav ul::before,
.DESKTOP nav ul::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5ch;
  border-bottom: 2px solid var(--hoofdKleur);
  transform-origin: left;
}
.DESKTOP nav ul::before {
  translate: var(--current-translate) 0;
  scale: var(--current-scale) 1;
}
.DESKTOP nav ul::after {
  opacity: 0.5;
  filter: blur(1px);
  translate: var(--hover-translate, var(--current-translate)) 0;
  scale: var(--hover-scale, var(--current-scale)) 1;
  transition: translate 0.3s ease, scale 0.3s ease;
}
.DESKTOP nav ul:has(li:nth-child(1):hover) {
  --hover-translate: 0px;
  --hover-scale: 1;
}
.DESKTOP nav ul:has(li:nth-child(2):hover) {
  --hover-translate: var(--colWidth);
  --hover-scale: 1;
}
.DESKTOP nav ul:has(li:nth-child(3):hover) {
  --hover-translate: calc(2 * var(--colWidth));
  --hover-scale: 1.6;
}
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);
}
.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: transparent;
  margin-block: auto 7px;
  border-bottom: none;
  transition: background-color 0.3s ease;
}
.MOBILE nav ul li a.activeFallback::before {
  background-color: var(--hoofdKleur);
}
@keyframes scrollPosition {
  0% {
    --current-translate: 0px;
    --current-scale: 1;
  }
  50% {
    --current-translate: var(--colWidth);
    --current-scale: 1;
  }
  100% {
    --current-translate: calc(2 * var(--colWidth));
    --current-scale: 1.6;
  }
}
@keyframes hideWerkLink {
  0%,
  20% {
    opacity: 1;
    visibility: visible;
  }
  35%,
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes onloadScatter {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
    scale: 0.1;
  }
  100% {
    transform: translate3d(var(--offset, 0, 0, 0));
    opacity: 1;
    scale: 1;
  }
}
@keyframes exitDienst {
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
    scale: 0.1;
  }
}
@keyframes enableSlickScroll {
  0%,
  30% {
    overflow-y: hidden;
  }
  31%,
  69% {
    overflow-y: auto;
  }
  70%,
  100% {
    overflow-y: hidden;
  }
}
@keyframes revealInzet {
  0%,
  75% {
    box-shadow: 0 0 transparent;
  }
  90%,
  100% {
    box-shadow: 0 -2rem white;
  }
}
@starting-style {
  .MOBILE nav {
    scale: 0.25;
    translate: 100px 0;
    opacity: 0;
  }
}
section {
  min-height: calc(100dvh - var(--headerHeight));
  scroll-snap-align: start;
  padding-top: 16px;
}
.MOBILE section {
  overflow-y: auto;
}
section.diensten {
  text-transform: uppercase;
  position: relative;
  view-timeline-name: --section1;
}
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: 50dvh;
  text-shadow: 0.5px 0.5px black;
}
.MOBILE section.diensten ul {
  margin-left: calc(var(--colWidth) + 1.25rem);
}
section.diensten ul li {
  padding-block: 0.5rem;
  color: white;
  transform: translate3d(var(--offset, 0, 0, 0));
}
.MOBILE section.diensten ul li {
  text-indent: -1.25rem;
}
.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 li[class*=dienst] {
  animation: onloadScatter 1s ease-in both;
}
@supports (animation-timeline: view()) {
  .DESKTOP section.diensten li[class*=dienst] {
    animation: onloadScatter 1s ease-in both, exitDienst both;
    animation-timeline: auto, --section1;
    animation-range: normal, exit;
  }
}
.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);
  view-timeline-name: --section2;
}
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: min-content;
}
section.fotosWerk .slick::-webkit-scrollbar {
  display: none;
}
.MOBILE section.fotosWerk .slick {
  flex: 0 0 calc(100dvh - 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 .slick {
  overflow-y: auto;
}
@supports (animation-timeline: view()) {
  .MOBILE section.fotosWerk .slick {
    animation: enableSlickScroll both;
    animation-timeline: --section2;
  }
}
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 p {
  max-width: 27ch;
}
section.contact p.text {
  line-height: 1.4;
  max-width: none;
}
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 .inzet {
  animation: revealInzet both;
  animation-timeline: scroll(root);
}
section.contact .gegevens {
  padding: 1rem var(--gutterWidth) 0 var(--inzetPadding);
  line-height: 1.8rem;
  flex: 0 0 calc(0.75 * 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 div + 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;
}
section.contact .logo {
  display: block;
  width: 220px;
  margin-left: calc(-2 * var(--gutterWidth));
}
.MOBILE section.contact .logo {
  width: 180px;
  margin-left: calc(-5 * var(--gutterWidth));
}
@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: 100dvh;
  }
  .MOBILE section.fotosWerk .slick {
    flex: 1;
    overflow: auto;
  }
}