@font-face {
  font-family: "Fa Solid 900 V 6";
  src: url('../fonts/fa-solid-900-v6.5.2.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fa Brands 400 V 6";
  src: url('../fonts/fa-brands-400-v6.5.2.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fa 400 V 6";
  src: url('../fonts/fa-regular-400-v6.5.2.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary-dark: #2a2a2a;
  --primary: #c7857a;
  --white: white;
  --primary-light: #f6f3ee;
  --primary-peach: #dcbb8b;
  /* knopvlak; goud blijft accent */
  --button-bg: #2a2a2a;
  --button-bg-hover: #3f3f3f;
  --gray: #e9e9e9;
  --black: black;
  --light-gray: #f9f9fa;
  --dark-gray-50: #afafaf80;
  --primary-30: #4448674d;
  --dark-gray: #afafaf;
  --white-30: #ffffff4d;
  /* de navbalk staat op position: fixed; secties die bovenaan een pagina
     beginnen moeten hier zelf ruimte voor laten */
  --nav-height: 98px;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

body {
  color: var(--primary-dark);
  font-family: Catamaran, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1em;
}

h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Cormorant, sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.2em;
}

h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Cormorant, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2em;
}

h3 {
  margin-top: 10px;
  font-family: Cormorant, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2em;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Cormorant, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2em;
}

h5 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Cormorant, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2em;
}

h6 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Cormorant, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2em;
}

p {
  color: var(--primary-dark);
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Catamaran, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5em;
}

a {
  color: var(--primary-dark);
  align-items: center;
  font-size: 18px;
  line-height: 1.2em;
  text-decoration: none;
  transition: color .3s;
}

a:hover {
  color: #2a2a2ab3;
}

ul {
  grid-row-gap: 15px;
  flex-direction: column;
  margin-top: 10px;
  margin-bottom: 10px;
  list-style-type: disc;
  display: flex;
}


/* Tekstkleur van de opsommingen op privacybeleid en voorwaarden. Dit is een
   background-clip: text-truc: het donkere vlak wordt op de letters geknipt en
   de vulling staat op transparant. Stond op de kale ul-selector en gold dus
   voor ELKE lijst op de site. Dat faalt stil zodra een element eronder een
   eigen achtergrond heeft: die dekt de geknipte achtergrond af en er blijft
   onzichtbare, wel selecteerbare tekst over. Daarom nu alleen op deze tien. */
.list, .list-2, .list-3, .list-4, .list-5, .list-6, .list-7, .list-8, .list-9, .list-10 {
  background-color: var(--primary-dark);
  color: var(--primary);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

li {
  align-items: center;
  line-height: 1.4em;
}

img {
  max-width: 100%;
  display: inline-block;
}

label {
  margin-bottom: 10px;
  font-family: Catamaran, sans-serif;
  display: block;
}

blockquote {
  text-align: center;
  background-image: url('../images/double-quotes.svg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: auto;
  border-left: 1px #000;
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 30px 20px 10px;
  font-family: Cormorant, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

.section {
  background-color: var(--white);
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
}

.section.light-background {
  background-color: var(--primary-light);
}

.section.without-bottom-spacing {
  padding-top: 60px;
  padding-bottom: 60px;
}

.section.primary-color-background-no-padding {
  /* Stond op --primary-peach als vol vlak. Die kleur is overal elders op de
     site een accent (haarlijnen, eyebrows, randen) en nergens een groot
     vlak; als volle band was dit het luidste oppervlak van de hele site.
     Creme houdt het ritme creme-wit-creme-wit-donker en laat de kaart met
     zijn foto het werk doen. */
  background-color: var(--primary-light);
  margin-bottom: -1px;
  padding-top: 60px;
  padding-bottom: 0;
}

.section.light-background-testimonial {
  background-color: var(--white);
  overflow: hidden;
}

.section.primary-light-color-background, .section.primary-dark-color-background {
  background-color: var(--primary-light);
}

.base-container {
  flex-direction: column;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}

.primary-button {
  border: 1px solid var(--primary-peach);
  background-color: var(--button-bg);
  color: var(--white);
  text-align: center;
  letter-spacing: .5px;
  text-transform: none;
  border-radius: 60px;
  padding: 13px 32px;
  font-size: 16px;
  line-height: 1.2em;
  transition: all .3s;
  display: inline-block;
}

.primary-button:hover {
  opacity: 1;
  color: var(--white);
  background-color: var(--button-bg-hover);
}

.primary-button.hover-white {
  border-color: var(--primary-peach);
  background-color: var(--button-bg);
  overflow: hidden;
}

.primary-button.hover-white:hover {
  border-color: var(--primary-peach);
  background-color: var(--button-bg-hover);
  color: var(--white);
}

/* Compacte opener voor de functionele paginas (privacy, voorwaarden,
   veelgestelde vragen). Die hadden alledrie dezelfde fotoband als ontdek;
   de regel is maximaal een gedeelde band per site, en die staat nu op
   ontdek. Scheelt daar bovendien een banner-foto van 2,7 MB. */
.page-kop {
  background-color: var(--white);
  padding-top: calc(var(--nav-height) + 60px);
  padding-bottom: 8px;
}

.page-kop-titel {
  margin: 0;
  font-size: 48px;
}

@media screen and (max-width: 991px) {
  .page-kop { padding-top: calc(var(--nav-height) + 44px); }
  .page-kop-titel { font-size: 38px; }
}

.pages-banner {
  background-color: var(--primary-dark);
  justify-content: center;
  align-items: center;
  min-height: 450px;
  padding-top: calc(var(--nav-height) + 77px);
  padding-bottom: 80px;
  display: flex;
  position: relative;
}

.banner-title {
  color: var(--white);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.banner-title.dark-style {
  color: var(--primary-dark);
}

.utility-page-wrap {
  background-color: var(--primary-light);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin-bottom: 40px;
  padding-top: 40px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}

._404-paragraph {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 50px;
}

._404-logo-wrapper {
  background-color: var(--primary-dark);
  justify-content: center;
  display: flex;
  position: relative;
  inset: 40px 0% auto;
}

._404-content-wrapper {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 700px;
  display: flex;
}

.footer {
  background-color: var(--primary-dark);
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

/* De bovenruimte van de footer kwam van de marge onder .footer-image. Op een
   pagina zonder die cta-band (contact) plakt de inhoud anders tegen de
   bovenrand. Via :has() geldt dit meteen voor elke volgende pagina zonder
   band, zonder dat iemand eraan moet denken. */
.footer:not(:has(.footer-image)) .section-regular-2 {
  padding-top: 88px;
}

@media screen and (max-width: 767px) {
  .footer:not(:has(.footer-image)) .section-regular-2 {
    padding-top: 56px;
  }
}

.section-title-wrapper {
  text-align: center;
  max-width: 740px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
}

.section-subtitle {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: Catamaran, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.banner-title-wrapper {
  z-index: 1;
  text-align: center;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.banner-title-wrapper.faq-width {
  max-width: 1060px;
}

.text-white {
  color: var(--white);
  font-weight: 500;
}

.section-title {
  margin-bottom: 20px;
}

.accordion-toggle {
  white-space: normal;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 10px 0;
  display: flex;
}

.accordion-list {
  background-color: #0000;
  width: 100%;
  display: block;
  position: static;
  overflow: hidden;
}

.accordion-list.w--open {
  background-color: #0000;
  padding-top: 0;
  padding-bottom: 20px;
  display: block;
}

.accordion-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 20px;
  width: 100%;
  display: flex;
}

.accordion-item {
  border: 1px solid var(--primary-30);
  border-radius: 20px;
  width: 100%;
  padding: 20px 30px;
  position: static;
}

.accordion-icon {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  font-family: "Fa Solid 900 V 6", sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.accordion-wrap {
  grid-row-gap: 20px;
  flex-direction: column;
  width: 50%;
  margin-right: 20px;
  display: flex;
}

.accordion-wrap.last-child {
  margin-right: 0;
}

.accordion-list-content {
  margin-top: 0;
  margin-bottom: 0;
}

.accordion-title {
  color: var(--primary-dark);
}

.light-background {
  background-color: var(--light-gray);
}

.contacts-wrapper {
  align-items: center;
  width: 100%;
  display: flex;
}

.contacts-content-wrapper {
  width: 50%;
  padding-right: 40px;
}

.contacts-divider {
  background-color: var(--primary-peach);
  width: 100%;
  height: 1px;
  margin-top: 30px;
  margin-bottom: 20px;
}

.contacts-detail {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 4px;
  display: flex;
}

.contacts-icon {
  color: var(--primary-peach);
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 15px;
  font-family: "Fa Solid 900 V 6", sans-serif;
  line-height: 1.2em;
}

.hidden {
  display: none;
}

.contacts-location-wrapper {
  margin-top: 30px;
}

.button-wrapper {
  margin-top: 50px;
}

.button-wrapper.home-three-banner-spacing {
  margin-top: 30px;
}

.testimonials-slider-image {
  object-fit: cover;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin-right: 15px;
  display: block;
}

.testimonials-slider-position {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.testimonials-slider-author {
  align-items: center;
  margin-top: 50px;
  display: flex;
}

.testimonials-slider-name {
  margin-top: 0;
  margin-bottom: 5px;
}

.home-testimonials-slide {
  flex-direction: column;
  height: 100%;
  margin-right: 40px;
  display: flex;
}

.testimonials-text-wrapper {
  background-color: var(--primary-light);
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 380px;
  padding: 30px;
  display: flex;
}

.testimonials-text-wrapper.white-bg-style {
  background-color: var(--primary-light);
}

.home-team-wrapper {
  width: 100%;
  display: flex;
  overflow: hidden;
}

.home-team-content {
  z-index: 998;
  background-color: var(--primary-dark);
  width: 35%;
  margin-left: -1px;
  padding-left: 16px;
  padding-right: 50px;
  position: relative;
}

.home-team-content.light-background-style {
  background-color: var(--white);
  margin-left: 0;
  padding-left: 15px;
}

.home-team-testimonial {
  width: 65%;
  height: 100%;
}

.home-5-testimonials-slider {
  background-color: #0000;
  height: auto;
  display: flex;
  position: relative;
}

.home-5-testimonials-mask {
  width: 70%;
  overflow: visible;
}

.home-service-numbers-wrapper {
  display: flex;
}

.services-numbers-content {
  width: 35%;
  padding-right: 40px;
}

.services-numbers-cards {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-wrap: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 65%;
  display: grid;
}

.arrow-icon {
  font-family: "Fa Solid 900 V 6", sans-serif;
}

.section-two-side-title-wrapper {
  z-index: 3;
  grid-column-gap: 60px;
  grid-row-gap: 20px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  position: relative;
}

.position-relative {
  background-color: #da000000;
  position: relative;
}

.slide-main-style {
  height: 100%;
}

.no-top-margin {
  color: var(--primary-dark);
  text-align: left;
  word-break: normal;
  margin-top: 0;
}

.left-arrow-testimonials {
  z-index: 999;
  border: 1px solid var(--primary-30);
  color: var(--primary-dark);
  border-radius: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 16px;
  transition: border .2s;
  display: flex;
  position: absolute;
  inset: auto auto 0% -21.3rem;
}

.left-arrow-testimonials:hover {
  border-color: var(--primary);
}

.right-arrow-testimonials {
  z-index: 999;
  border: 1px solid var(--primary-30);
  color: var(--primary-dark);
  border-radius: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin-left: 100px;
  font-size: 16px;
  transition: border .2s;
  display: flex;
  inset: auto auto 0% -21.3rem;
}

.right-arrow-testimonials:hover {
  border-color: var(--primary);
}

.in-section-title {
  color: var(--primary-dark);
  width: 100%;
  margin-top: 0;
  margin-bottom: 30px;
}

.service-numbers {
  margin-bottom: 10px;
  font-family: Catamaran, sans-serif;
  font-size: 80px;
  line-height: 1em;
}

.subscribe-card-wrapper {
  z-index: 999;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--primary-dark);
  border-radius: 20px;
  padding-left: 40px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.subscribe-card-wrapper.light {
  background-color: var(--light-gray);
  /* op het cremevlak lag --light-gray te dicht bij de band; wit met een
     haarlijn geeft dezelfde verhouding als de reviewkaarten */
  background-color: var(--white);
  border: 1px solid #dcbb8b40;
}

.subscribe-card-left {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 50%;
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
}

.subscribe-card-right {
  width: 50%;
}

.subscribe-card-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.contact-button-wrapper {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 80px;
  display: flex;
  position: absolute;
  inset: -40px 0% auto;
}

.section-title-limited-width {
  width: 70%;
  margin-top: 0;
  margin-bottom: 0;
}

.service-numbers-icon {
  width: 25px;
  height: 25px;
  margin-bottom: 30px;
  margin-right: 30px;
  position: absolute;
  inset: auto 0% 0% auto;
}

.in-section-title-wrapper {
  margin-bottom: 30px;
}

.no-margin {
  margin-top: 0;
  margin-bottom: 0;
}

.section-title-wrapper-about {
  z-index: 999;
  text-align: center;
  flex-direction: column;
  align-items: center;
  max-width: 740px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.section-title-wrapper-about.about-us {
  max-width: none;
  margin-bottom: 40px;
}

.service-numbers-item-dark {
  border: 1px solid var(--primary-light);
  background-color: var(--primary-light);
  border-radius: 20px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 30px 70px 30px 30px;
  transition: color .3s, background-color .3s;
  display: flex;
  position: relative;
}

.service-numbers-item-dark:hover {
  border-color: var(--primary-peach);
  background-color: var(--primary-peach);
  color: var(--primary-dark);
}

.service-numbers-item-dark.featured {
  border-color: var(--primary-dark);
  background-color: var(--primary-dark);
  color: var(--white);
}

.text-description {
  text-align: left;
  flex-direction: column;
  max-width: 800px;
  display: flex;
}

.consultation-wrapper {
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: 1200px;
  padding: 0 15px;
  display: flex;
}

.consultation-content {
  width: 100%;
  max-width: 560px;
}

/* dubbele klasse: .consultation-content p wint anders */
.consultation-content .consultation-eyebrow {
  color: var(--primary-peach);
  border-top: 1px solid #dcbb8b73;
  margin: 0 0 20px;
  padding-top: 14px;
  font-family: Catamaran, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-block;
}

.consultation-wrapper .in-section-title {
  color: var(--white);
  margin-bottom: 18px;
}

/* span draagt een eigen kleur */
.consultation-wrapper .text-span-main {
  color: #ffffffc7;
}

.consultation-content p {
  color: #ffffffe6;
  margin-bottom: 0;
}

.consultation-wrapper .primary-button {
  background-color: var(--button-bg-hover);
}

.white-bottom-bg-element {
  background-color: var(--white);
  height: 80px;
  margin-bottom: -1px;
  position: absolute;
  inset: auto 0% 0%;
}

.gallery-grid-large {
  z-index: 10;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: 480px 480px 480px 480px;
  width: 100%;
  overflow: hidden;
}

.primary-overlay {
  opacity: 0;
  background-color: #c7b47a99;
  justify-content: center;
  align-items: center;
  transition: opacity .4s;
  display: flex;
  position: absolute;
  inset: 0%;
}

.primary-overlay:hover {
  opacity: 1;
}

.fa-solid-font {
  color: var(--white);
  font-family: "Fa Solid 900 V 6", sans-serif;
}

.full-height-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

._404-title {
  color: var(--primary-dark);
  margin-top: -40px;
  margin-bottom: 0;
  padding-bottom: 10px;
  font-family: Cormorant, sans-serif;
  font-size: 120px;
}

.home-main-banner-title-wrapper {
  z-index: 1;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-direction: column;
  display: flex;
  position: relative;
}

.home-banner-description {
  max-width: 740px;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: auto;
}

.home-banner-title-dark {
  color: var(--primary-dark);
  text-align: left;
  width: 90%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Cormorant, sans-serif;
  font-size: 65px;
  font-weight: 700;
  line-height: 1.1em;
}

.bg-image-banner-one {
  opacity: .3;
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  inset: auto auto 0% 0%;
}

.text-span-main {
  color: var(--primary-dark);
  font-style: italic;
  font-weight: 300;
}

.home-main-banner-wrapper {
  z-index: 1;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
  position: relative;
}

.link-with-arrow-round {
  border: 1px solid var(--primary-30);
  background-image: url('../images/right-small.svg');
  background-position: 100% 15px;
  background-repeat: no-repeat;
  background-size: 66px 12px;
  border-radius: 50px;
  padding: 13px 58px 13px 32px;
  font-size: 18px;
  line-height: 1em;
  transition-property: all;
  transition-duration: .3s;
  display: inline-block;
}

.link-with-arrow-round:hover {
  color: var(--primary-dark);
  background-image: url('../images/right-small.svg');
  background-position: 92% 15px;
  background-repeat: no-repeat;
  background-size: 0 12px;
  padding-right: 32px;
}

.banner-section-photo {
  background-image: linear-gradient(356deg, var(--primary-peach), #fff0 34%), linear-gradient(to bottom, var(--primary-dark), var(--primary-dark));
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  margin-top: 0;
  padding-top: 300px;
  padding-bottom: 80px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.banner-content-container {
  z-index: 2;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  position: relative;
}

.banner-image {
  opacity: .71;
  filter: blur(1px);
  cursor: default;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.banner-image.gallery {
  object-position: 50% 60%;
}

.banner-image.promotions {
  opacity: .45;
  object-position: 50% 50%;
  background-color: #dcbb8b;
}

.banner-about {
  background-color: var(--primary-light);
  padding-top: calc(var(--nav-height) + 77px);
  padding-bottom: 80px;
  position: relative;
}

.about-banner-image {
  z-index: 999;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 20px;
  width: 100%;
  height: 340px;
  position: relative;
}

.about-banner-images-wrapp {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  padding-top: 60px;
  display: grid;
}

.flex-horizontal-all-center-corners {
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.grid-three-column {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

/* h3: globale regel zet 36px + margin-top */
.subheading-x-large {
  margin: 0;
  font-family: Cormorant, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
}

.image-cover {
  object-fit: fill;
  width: 100%;
  height: 100%;
}

.row-small {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.feature-16-card {
  background-color: var(--primary-light);
  border: 1px solid #dde3e8;
  border-radius: 12px;
  padding: 24px;
}

.feature-16-image {
  aspect-ratio: 2 / 2.8;
  object-fit: fill;
  border-radius: 8px;
  overflow: hidden;
}

.paragraph-regular {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.5;
}

.column-x-small {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  display: flex;
}

.section-regular {
  background-color: #fff;
  padding: 0 0%;
  position: relative;
}

.column-4x-large {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
  display: flex;
}

.container-large {
  z-index: 1;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  position: relative;
}

.button-outline {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 1px solid var(--primary-peach);
  background-color: var(--button-bg);
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: border-color .3s;
  display: inline-flex;
}

.column-large {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}

.column-regular {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.gallery-cover {
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}

.gallery-section {
  background-color: #f6f7f900;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  /* NIET clippen: dit blok staat binnen de kolom, dus overflow knipt de
     fotoband terug tot de containerbreedte. De band clipt zichzelf al
     (.hm-ticker en .hm-ticker__row), en de sectie eromheen vangt de rest. */
  overflow: visible;
}

/* De fotoband loopt door tot de schermrand. Een lopende band die op de
   containerrand stopt oogt als een afgeknipte carrousel; tot de rand
   doorlopen leest als een strook die verdergaat. De maskering op
   .hm-ticker__row laat hem daar uitvagen.
   50vw telt de scrollbalk mee, dus er kan een paar pixel overschieten;
   de sectie eromheen is schermbreed en vangt dat op met overflow-x: clip
   (clip, niet hidden: hidden maakt er een scrollcontainer van). */
.section-fotoband { overflow-x: clip; }


.code-embed-2 {
  width: 100%;
}

.footer-image {
  /* Effen ondergrond in dezelfde kleur als de footer: de bandhoogte is
     fractioneel (512,89px), dus de onderste rij is een halve pixel en toonde
     een haarlijn waar de foto doorheen kwam. */
  background-color: var(--primary-dark);
  position: relative;
  /* De sluier is nu al op 96% volledig dicht in plaats van pas op 100%, zodat
     die laatste rij sowieso effen is en naadloos op de footer aansluit. */
  background-image: linear-gradient(#2a2a2a00 60%, #2a2a2a 96%), linear-gradient(100deg, #2a2a2a 0%, #2a2a2af7 40%, #2a2a2ab3 58%, #2a2a2a26 100%), url('../images/salon-cta-1800.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: clamp(340px, 33vw, 460px);
  margin-bottom: 64px;
  padding: clamp(56px, 7vw, 96px) 15px;
  display: flex;
}

.section-regular-2 {
  padding: 0 0% 80px;
  position: relative;
  overflow: hidden;
}

.mobile-version {
  display: none;
}

.image-2 {
  z-index: -1;
  width: 100%;
  height: auto;
  position: absolute;
}

.div-block-2 {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: #0000004d;
  border-radius: 10px;
  padding: 20px;
}

.code-embed-4 {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}

.image-3 {
  display: none;
}

.hamburger_embed {
  position: absolute;
}

.row-x-small {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.code-embed-5 {
  opacity: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.container-large-3 {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.ft-grid {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 56px 40px;
  padding-bottom: 56px;
  display: grid;
}

.ft-logo img {
  width: 180px;
  height: auto;
  display: block;
}

.ft-tagline {
  color: #ffffffb3;
  max-width: 300px;
  margin: 24px 0 28px;
  font-family: Catamaran, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.ft-socials {
  gap: 12px;
  display: flex;
}

.ft-social {
  color: var(--white);
  border: 1px solid #ffffff26;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  transition: color .3s, border-color .3s;
  display: flex;
}

.ft-col {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.ft-heading {
  color: var(--primary-peach);
  border-top: 1px solid #dcbb8b73;
  margin: 0 0 22px;
  padding-top: 14px;
  font-family: Catamaran, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ft-link {
  color: #ffffffdb;
  font-family: Catamaran, sans-serif;
  font-size: 16px;
  text-decoration: none;
  transition: color .3s;
}

.ft-address, .ft-hours {
  color: #ffffffdb;
  margin: 0;
  font-family: Catamaran, sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: 1.65;
}

.ft-hours span {
  color: #ffffff8f;
}

.ft-legal {
  border-top: 1px solid #ffffff1f;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 26px;
  display: flex;
}

.ft-legal-text {
  color: #ffffff8f;
  margin: 0;
  font-family: Catamaran, sans-serif;
  font-size: 14px;
}

.ft-cloudpage img {
  width: 120px;
  height: 33px;
  display: block;
}

@media (hover: hover) {
  .ft-link:hover {
    color: var(--primary-peach);
  }

  .ft-social:hover {
    color: var(--primary-peach);
    border-color: #dcbb8b73;
  }
}

@media (pointer: coarse) {
  .ft-link {
    align-items: center;
    min-height: 44px;
    display: flex;
  }
}

.text-block, .rich-text-block, .rich-text-block-2 {
  text-align: left;
}

.list-item, .list, .list-2, .list-3, .list-4, .list-5, .list-6, .list-7, .list-8, .list-9, .list-10 {
  color: var(--primary-peach);
}

.nav-link-2 {
  color: #3f3f46;
  white-space: nowrap;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .3s, color .3s;
}

.nav-link-2:hover {
  background-color: var(--button-bg-hover);
  color: var(--primary-peach);
}

/* navbar-boekknop is verborgen op smal scherm */
.nav-link-book {
  display: none;
}

.nav-link-book .text-block-5 {
  color: var(--primary-peach);
}

/* hover moet op het kind-div landen */
.nav-link-2:hover .text-block-2,
.nav-link-2:hover .text-block-3,
.nav-link-2:hover .text-block-4,
.nav-link-2:hover .text-block-5 {
  color: var(--primary-peach);
}

.nav-link-2.w--current {
  color: #000;
}

.brand-logo {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.button-circle {
  background-color: #fff;
  background-image: url('../images/480968773_1128841519252644_8423599247407963809_n.jpg');
  background-position: 0 0;
  background-size: cover;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  display: flex;
  box-shadow: 0 1px 1px #0000000d;
}

.navbar-3 {
  z-index: 99999;
  background-color: #f4f4f500;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 14px 15px;
  position: fixed;
}

.nav-container-large {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border: 1.5px solid var(--primary-peach);
  background-color: var(--primary-dark);
  border-radius: 999px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 15px;
  display: flex;
}

.nav-left-2 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.button {
  border: 1px solid var(--primary-peach);
  background-color: var(--white);
  color: #18181b;
  text-align: center;
  white-space: nowrap;
  border-radius: 99px;
  justify-content: center;
  align-items: center;
  padding: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .3s;
  display: inline-flex;
  box-shadow: inset 0 1px 2px 2px #fff, 0 1px 1px #25252726;
}

.nav-logo-2 {
  width: 200px;
  height: 100%;
  padding-left: 0;
  padding-right: 0;
}

.nav-right-2 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.nav-menu-3 {
  justify-content: center;
  align-items: center;
  display: flex;
  position: static;
}

.nav-links {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.button-text-wrapper {
  padding-left: 6px;
  padding-right: 6px;
}

.text-block-2, .text-block-3, .text-block-4, .text-block-5 {
  color: var(--white);
}

.text-block-6 {
  font-family: Cormorant, sans-serif;
  font-size: 18px;
}

.nav_button-4 {
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: flex;
}

.nav_button-4.w--open {
  color: currentColor;
  background-color: #c8c8c800;
}

.hamburger_12_wrap {
  grid-row-gap: var(--gap);
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.hamburger_12_line {
  height: var(--thickness);
  background-color: currentColor;
  flex: none;
  width: 100%;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease;
}

.image-4 {
  display: none;
}

.div-block-3 {
  text-align: right;
  background-color: #aca9a900;
  width: 50%;
  height: auto;
  padding-left: 40px;
}

@media screen and (min-width: 1280px) {
  .section {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .pages-banner {
    padding-top: 150px;
    padding-bottom: 120px;
  }

  .footer {
    padding-top: 0;
    padding-bottom: 120px;
  }

    .home-team-wrapper {
    /* volgt de goot van het 1200-raster */
    margin-left: max(0px, calc((100% - 1200px) / 2));
    padding-left: 0;
  }

  .home-team-content {
    margin-left: 0;
    padding-left: 15px;
    padding-right: 80px;
  }

  .home-5-testimonials-mask {
    width: 60%;
  }

  .services-numbers-content {
    padding-right: 80px;
  }

  .services-numbers-cards {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .left-arrow-testimonials {
    width: 70px;
    height: 70px;
    left: -27.9rem;
  }

  .right-arrow-testimonials {
    width: 70px;
    height: 70px;
    left: -27.8rem;
  }

  .service-numbers {
    font-size: 100px;
  }

  .subscribe-card-wrapper {
    padding-left: 50px;
  }

  .section-title-limited-width {
    width: 60%;
  }

  .text-description {
    max-width: 800px;
  }

  .gallery-grid-large {
    grid-template-rows: 280px 280px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .home-banner-title-dark {
    width: 79%;
    font-size: 90px;
  }

  .banner-section-photo {
    padding-top: 300px;
    padding-bottom: 130px;
  }

  .banner-content-container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .banner-about {
    padding-top: 180px;
    padding-bottom: 130px;
  }

  .about-banner-image {
    height: 380px;
  }

  .section-regular-2 {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 1440px) {
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 10px;
  }

  .testimonials-slider-author {
    margin-top: 30px;
  }

  .home-team-content {
    width: 33%;
  }

  .home-team-testimonial {
    width: 67%;
  }

  .home-5-testimonials-mask {
    width: 50%;
  }

  .left-arrow-testimonials, .right-arrow-testimonials {
    left: -29.5rem;
  }

  .subscribe-card-wrapper {
    grid-column-gap: 80px;
  }

  .subscribe-card-left {
    width: 45%;
  }

  .subscribe-card-right {
    width: 55%;
  }

  .contact-button-wrapper {
    padding-left: 0;
  }

  .home-banner-title-dark {
    font-size: 90px;
  }

  .container-large-3 {
    max-width: 1400px;
  }
}

@media screen and (min-width: 1920px) {
  h1 {
    font-size: 80px;
  }

  .base-container {
    max-width: 1400px;
  }

  .button-wrapper.home-three-banner-spacing {
    margin-top: 50px;
  }

  .home-team-wrapper {
    /* hoofdraster is hier 1400px */
    margin-left: max(0px, calc((100% - 1400px) / 2));
  }

  .consultation-wrapper {
    max-width: 1400px;
  }

  .home-team-content {
    width: 24.5%;
  }

  .home-team-testimonial {
    width: 74.5%;
  }

  .home-5-testimonials-mask {
    width: 32.5%;
  }

  .left-arrow-testimonials, .right-arrow-testimonials {
    left: -29.2rem;
  }

  .section-title-limited-width {
    width: 50%;
  }

  .text-description {
    max-width: 1000px;
  }

  .home-banner-title-dark {
    width: 89%;
    font-size: 120px;
  }

  .home-main-banner-wrapper {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }

  .banner-content-container {
    max-width: 1400px;
  }

  .container-large-3 {
    max-width: 1400px;
  }

  .nav-container-large {
    max-width: 1400px;
  }
}

@media screen and (max-width: 991px) {
  :root { --nav-height: 90px; }

  h1 {
    font-size: 52px;
  }

  h2 {
    font-size: 42px;
  }

  .pages-banner {
    min-height: 380px;
  }

  .footer {
    padding-top: 0;
  }

  .section-title-wrapper {
    max-width: 560px;
  }

  .contacts-wrapper {
    align-items: flex-start;
  }

  .contacts-location-wrapper {
    margin-top: 0;
  }

  .button-wrapper {
    margin-top: 20px;
  }

    .testimonials-text-wrapper {
    min-height: 340px;
    padding: 15px;
  }

  .home-team-wrapper {
    grid-row-gap: 50px;
    flex-direction: column;
    padding-left: 15px;
  }

  .home-team-content {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }

  .home-5-testimonials-slider {
    padding-bottom: 100px;
  }

  .home-5-testimonials-mask {
    width: 90%;
  }

  .home-service-numbers-wrapper {
    grid-row-gap: 50px;
    flex-wrap: wrap;
  }

  .services-numbers-content {
    width: 100%;
    margin-right: 0;
  }

  .services-numbers-cards {
    width: 100%;
  }

  .no-top-margin {
    text-align: center;
  }

  .left-arrow-testimonials, .right-arrow-testimonials {
    left: 0;
  }

  .in-section-title {
    text-align: center;
  }

  .section-title-limited-width.longer {
    width: 80%;
  }

  .section-title-wrapper-about {
    max-width: 560px;
  }

  .text-description {
    max-width: 470px;
    margin-right: auto;
  }

  .consultation-content {
    width: 100%;
  }

  /* in deze band blijft alles links */
  .consultation-wrapper .in-section-title,
  .consultation-content p {
    text-align: left;
  }

  .footer-image {
    /* Een liggende foto in een staande band wordt door cover tot een smalle
       verticale strook gesneden: je zag alleen nog de plantenwand. Daarom
       hier geen cover maar de foto op volle breedte als strook bovenaan
       (100% auto = hoogte 100vw/2 = ~50vw), zodat dezelfde ruimte in beeld
       komt als op desktop. Daaronder neemt de effen achtergrondkleur over,
       en daarop staat de tekst. */
    background-color: var(--primary-dark);
    background-image: linear-gradient(180deg, #2a2a2a1f 0, #2a2a2a3d 42%, #2a2a2abf 78%, #2a2a2a 100%), url('../images/salon-cta-1200.webp');
    background-size: 100% 52vw, 100% auto;
    background-position: 50% 0, 50% 0;
    background-repeat: no-repeat, no-repeat;
    align-items: flex-end;
    min-height: 0;
    padding: calc(50vw + 44px) 15px clamp(44px, 9vw, 60px);
  }

  .gallery-grid-large {
    grid-template-rows: 354px 354px 354px 354px;
    grid-template-columns: 1fr 1fr;
  }

  .home-main-banner-title-wrapper {
    max-width: 590px;
  }

  .home-banner-title-dark {
    width: 100%;
    max-width: 500px;
    font-size: 56px;
  }

  .banner-section-photo {
    align-items: stretch;
    padding-top: 220px;
  }

  .banner-content-container {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    height: auto;
  }

  .banner-about {
    padding-top: 175px;
  }

  .about-banner-image {
    aspect-ratio: 2 / 3;
    height: 350px;
  }

  .about-banner-images-wrapp {
    grid-template-columns: 1fr 1fr;
  }

  .grid-three-column {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .column-4x-large {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
  }

  .image-2 {
    height: 100%;
  }

  .nav-link-2 {
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .navbar-3 {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-container-large {
    padding-right: 16px;
  }

  .nav-right-2 {
    color: var(--white);
  }

  .nav-menu-3 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    border: 1px solid var(--primary-peach);
    background-color: var(--primary-dark);
    border-radius: 24px;
    flex-flow: column;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
    position: absolute;
    left: 5%;
    right: 5%;
  }

  .nav-links {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
    align-items: stretch;
    display: flex;
  }

  .image-4 {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  :root { --nav-height: 76px; }

  h1 {
    font-size: 44px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 32px;
  }

  blockquote {
    font-size: 22px;
  }

  .section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .pages-banner {
    padding-top: 175px;
    padding-bottom: 60px;
  }

  ._404-paragraph {
    margin-bottom: 30px;
  }

  .footer {
    padding-top: 0;
    padding-bottom: 0;
  }

  .section-title-wrapper {
    margin-bottom: 40px;
  }

  .accordion-wrapper {
    flex-wrap: wrap;
  }

  .accordion-wrap {
    width: 100%;
    margin-right: 0;
  }

  .contacts-wrapper {
    flex-wrap: wrap;
  }

  .contacts-content-wrapper {
    width: 100%;
    margin-bottom: 30px;
    padding-right: 0;
  }

  .contacts-form-wrapper, .contacts-location-wrapper {
    width: 100%;
  }

  .button-wrapper {
    margin-top: 30px;
  }

    .home-testimonials-slide {
    margin-right: 40px;
  }

  .home-team-wrapper {
    grid-row-gap: 40px;
    flex-wrap: wrap;
  }

  .home-team-content {
    width: 100%;
    padding-right: 15px;
  }

  .home-team-testimonial {
    width: 100%;
  }

  .home-service-numbers-wrapper {
    grid-row-gap: 30px;
  }

  .services-numbers-cards {
    grid-template-columns: 1fr;
  }

  .section-two-side-title-wrapper {
    grid-row-gap: 20px;
  }

  .service-numbers {
    font-size: 70px;
  }

  .subscribe-card-wrapper {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-wrap: wrap;
    padding-left: 0;
  }

  .subscribe-card-left {
    width: 100%;
    padding-top: 0;
    padding-left: 30px;
    padding-right: 30px;
  }

  .subscribe-card-right {
    order: -1;
    width: 100%;
  }

  .contact-button-wrapper {
    padding-left: 0;
  }

  .section-title-limited-width {
    width: 100%;
  }

  .section-title-limited-width.longer {
    width: 90%;
  }

  .section-title-wrapper-about {
    margin-bottom: 40px;
  }

  .service-numbers-item-dark {
    width: 100%;
  }

  .text-description {
    text-align: left;
    max-width: 390px;
    margin-right: auto;
  }

  .gallery-grid-large {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    grid-template-rows: 525px 525px 525px 525px 525px;
    grid-template-columns: 1fr;
  }

  ._404-title {
    font-size: 90px;
  }

  .home-main-banner-title-wrapper {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .home-banner-title-dark {
    max-width: 360px;
    font-size: 40px;
  }

  .bg-image-banner-one {
    display: none;
  }

  .home-main-banner-wrapper {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .banner-section-photo {
    background-image: linear-gradient(356deg, var(--primary-peach), #fff0 34%), linear-gradient(to bottom, var(--primary-dark), var(--primary-dark));
    align-items: stretch;
    min-height: 840px;
    padding-top: 90px;
    padding-bottom: 60px;
  }

  .banner-content-container {
    z-index: 990;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    height: auto;
  }

  .banner-image {
    object-position: 65% 50%;
    display: none;
  }

  .banner-image.promotions {
    display: block;
  }

  .banner-about {
    padding-top: 175px;
    padding-bottom: 60px;
  }

  .about-banner-image {
    vertical-align: baseline;
    height: 300px;
  }

  .about-banner-images-wrapp {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
  }

  .grid-three-column {
    /* nooit twee kolommen: bij drie kaarten blijft er dan een wees over */
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .column-4x-large {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .gallery-section {
    padding-top: 0;
    padding-bottom: 0;
  }

  .section-regular-2 {
    padding-top: 0;
    padding-bottom: 72px;
  }

  .mobile-version {
    opacity: .45;
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
  }

  .code-embed-4 {
    width: 100%;
  }

  .image-3 {
    z-index: 123;
    opacity: .6;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: inline-flex;
    position: absolute;
    inset: 0;
  }

  .navbar-3 {
    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-container-large {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .button {
    display: none;
  }

  .image-4 {
    display: none;
  }

  .div-block-3 {
    width: 100%;
    padding-left: 0;
  }
}

@media screen and (max-width: 479px) {

  .primary-button.hover-white {
    display: inline-block;
  }

  .pages-banner {
    padding-top: 175px;
  }

  ._404-content-wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }

  .footer {
    text-align: left;
  }

  .home-testimonials-slide {
    margin-right: 15px;
  }

  .testimonials-text-wrapper {
    min-height: 360px;
  }

  .home-5-testimonials-mask {
    width: 100%;
    margin-top: 0;
  }

  .position-relative {
    padding-left: 0;
    padding-right: 0;
  }

  .subscribe-card-left {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .section-title-limited-width.longer {
    width: 100%;
  }

  .service-numbers-icon {
    margin-bottom: 20px;
    margin-right: 20px;
  }

  .service-numbers-item-dark {
    padding: 20px 60px 20px 20px;
  }

  .text-description {
    text-align: center;
  }

  .gallery-grid-large {
    grid-template-rows: 315px 315px 315px 315px 315px 315px;
  }

  .home-banner-title-dark {
    width: 100%;
  }

  .bg-image-banner-one {
    height: 100%;
  }

  .home-main-banner-wrapper {
    flex-flow: wrap;
  }

  .banner-section-photo {
    background-image: linear-gradient(356deg, #ffb64c4d, #fff0 34%), linear-gradient(to bottom, var(--primary-dark), var(--primary-dark));
    flex-flow: column-reverse;
    min-height: 100vh;
  }

  .banner-content-container {
    text-align: center;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
  }

  .banner-image {
    object-position: 70% 50%;
    height: 100%;
  }

  .banner-about {
    padding-top: 175px;
  }

  .about-banner-image {
    height: 280px;
  }

  .about-banner-images-wrapp {
    grid-template-columns: 1fr;
  }

  .grid-three-column {
    grid-template-columns: 1fr;
  }

  .code-embed-3, .image, .code-embed-4 {
    width: 100%;
  }

  .image-3 {
    opacity: .35;
  }

  .brand-logo {
    display: none;
  }

  .navbar-3 {
    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-container-large {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border-radius: 20px;
    justify-content: center;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 5px 10px;
  }

  .nav-logo-2 {
    width: auto;
  }

  .image-4 {
    max-width: none;
    display: block;
  }

  .div-block-3 {
    width: 100%;
    padding-left: 0;
  }
}

#w-node-_5f627199-28e3-a55b-538a-8b7700b18f31-e0e87e7c, #w-node-_1cbf0ba8-1513-b670-c206-070e3263e347-e0e87e7c {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

@media screen and (max-width: 767px) {

  #w-node-_5f627199-28e3-a55b-538a-8b7700b18f31-e0e87e7c, #w-node-_1cbf0ba8-1513-b670-c206-070e3263e347-e0e87e7c {
    grid-column: span 1 / span 1;
  }
}

@font-face {
  font-family: 'Fa Solid 900 V 6';
  src: url('../fonts/fa-solid-900-v6.5.2.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fa Brands 400 V 6';
  src: url('../fonts/fa-brands-400-v6.5.2.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fa 400 V 6';
  src: url('../fonts/fa-regular-400-v6.5.2.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Lightbox moet boven de fixed navbar (z-index 99999) liggen, anders vangt
   de navbar de klik op de sluitknop af. */

/* Knop onderaan de dienstenkaart: zonder dit hangt hij op de hoogte van de
   tekst, en drie kaarten met verschillende tekstlengte lijnen niet uit. */
.feature-16-card .column-large { height: 100%; }
.feature-16-card .column-regular {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.feature-16-card .row-small { margin-top: auto; }

/* Fotostrook over de volle schermbreedte vanaf tablet. .gallery-carousel
   heeft zelf al overflow:hidden, dus de negatieve marges veroorzaken geen
   horizontale scroll. Zet hier GEEN overflow op de sectie: die is smaller
   dan het scherm en knipt de strook dan terug tot binnen de kolom. */
@media (min-width: 768px) {
  /* De sectie staat van huis uit op overflow:hidden en is smaller dan het
     scherm; die knipt de strook terug tot binnen de kolom. De strook zelf
     wordt al geclipt door .gallery-carousel, dus hier mag het open. */
  .gallery-section { overflow: visible; }
}

/* Menulinks op aanraakschermen naar 44px (WCAG 2.5.8); stonden op 38px. */
@media (pointer: coarse) {
  .w-nav-menu a,
  .w-nav-overlay a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

@media screen and (max-width: 991px) {
  .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px 32px;
  }
}

@media screen and (max-width: 600px) {
  .ft-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 44px;
  }

  .ft-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

@media screen and (max-width: 991px) {
  .nav-link-book {
    display: block;
  }
}

.hm-hours {
  border-top: 1px solid #dcbb8b73;
  margin: 8px 0 28px;
  padding-top: 22px;
}

.hm-hours-title {
  color: var(--primary-peach);
  margin: 0 0 16px;
  font-family: Catamaran, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hm-hours-list {
  max-width: 320px;
  margin: 0;
}

.hm-hours-row {
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
  font-family: Catamaran, sans-serif;
  font-size: 16px;
  display: flex;
}

.hm-hours-row dt {
  color: var(--primary-dark);
}

.hm-hours-row dd {
  color: var(--primary-dark);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.hm-hours-row dd.is-closed {
  color: #6b6b6b;
}

._404-phone {
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  ._404-phone:hover {
    color: var(--primary-peach);
  }
}

@media (pointer: coarse) {
  ._404-phone {
    display: inline-block;
    padding: 6px 0;
  }
}

.hm-google-g {
  align-items: center;
  justify-content: center;
  display: flex;
}

.hm-google-g svg {
  width: 25px;
  height: 25px;
  display: block;
}

/* fotoband: items staan er twee keer in, de rij schuift de helft op.
   de globale ul-regel zet flex+column, dus richting staat hier expliciet. */
.hm-ticker {
  --rij: 400px;
  flex-direction: column;
  gap: 24px;
  /* breekt uit de kolom naar de volle schermbreedte, zie .section-fotoband */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  overflow-x: clip;
  display: flex;
}

.hm-ticker__row {
  -webkit-mask-image: linear-gradient(90deg, #0000 0, #000 90px, #000 calc(100% - 90px), #0000 100%);
  mask-image: linear-gradient(90deg, #0000 0, #000 90px, #000 calc(100% - 90px), #0000 100%);
  width: 100%;
  height: var(--rij);
  overflow: hidden;
}

.hm-ticker__track {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: 90s linear infinite hm-ticker-schuif;
  display: flex;
}

.hm-ticker__row--omgekeerd .hm-ticker__track {
  animation-direction: reverse;
}

@keyframes hm-ticker-schuif {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 12px), 0, 0); }
}

.hm-ticker__item {
  background-color: #fff;
  border-radius: 16px;
  flex: none;
  align-items: stretch;
  height: 100%;
  padding: 8px;
  box-shadow: 0 1px 2px #23272e14;
  list-style: none;
}

/* aspect-ratio verliest van de fotobreedte */
.hm-ticker__item--landscape { width: calc(var(--rij) * 3 / 2); }
.hm-ticker__item--square { width: calc(var(--rij) * 2 / 3); }

.hm-ticker__item img {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hm-ticker__track { animation: none; }
  .hm-ticker__row { overflow-x: auto; }
}

@media screen and (max-width: 767px) {
  .hm-ticker {
    --rij: 260px;
    gap: 14px;
  }

  .hm-ticker__track { gap: 14px; }

  .hm-ticker__row {
    -webkit-mask-image: linear-gradient(90deg, #0000 0, #000 40px, #000 calc(100% - 40px), #0000 100%);
    mask-image: linear-gradient(90deg, #0000 0, #000 40px, #000 calc(100% - 40px), #0000 100%);
  }
}

/* ==========================================================================
   EIGEN INTERACTIES — hoort bij js/hairmony.js
   Dit blok vervangt wat de Webflow-runtime vroeger met inline stijlen deed.
   Niet weghalen bij het opschonen van ongebruikte regels: dekkingsmeting
   ziet deze staten als ongebruikt zolang ze niet actief zijn.
   ========================================================================== */

/* --- 1. reveals ---------------------------------------------------------
   Achter .w-mod-js: zonder JS blijft alles gewoon zichtbaar in plaats van
   op opacity 0 te blijven hangen. Curve en duur komen overeen met de
   animaties die de runtime hier draaide (1000ms, outQuart). */
.w-mod-js [data-reveal] { opacity: 0; }
.w-mod-js [data-reveal="up"] { transform: translateY(100px); }
.w-mod-js [data-reveal="grow"] { transform: scale(.75); }

.w-mod-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 1000ms cubic-bezier(.165, .84, .44, 1),
              transform 1000ms cubic-bezier(.165, .84, .44, 1);
}

/* Geen scroll-animaties op mobiel: elementen die tijdens het scrollen van
   hoogte of positie wisselen, laten de adresbalk van mobiele browsers
   meebewegen. Alles staat daar meteen in zijn eindtoestand. */
@media (max-width: 991px) {
  .w-mod-js [data-reveal] { opacity: 1; transform: none; }
  .w-mod-js [data-reveal].is-revealed { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .w-mod-js [data-reveal] { opacity: 1; transform: none; }
  .w-mod-js [data-reveal].is-revealed { transition: none; }
}

/* --- 2. carrousel -------------------------------------------------------
   De verschuiving zelf zet het script inline; hier alleen de aanwijzing dat
   de pijlen bedienbaar zijn. */
.w-slider-arrow-left,
.w-slider-arrow-right { touch-action: manipulation; }

/* --- 3. lightbox -------------------------------------------------------- */
.hm-lightbox {
  width: min(94vw, 1200px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.hm-lightbox::backdrop { background: #1a1a1ae6; }

.hm-lightbox-img {
  display: block;
  width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 12px;
}

.hm-lightbox button {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--white-30);
  border-radius: 50%;
  background: #2a2a2acc;
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.hm-lightbox button[hidden] { display: none; }
.hm-lightbox button:focus-visible { outline: 2px solid var(--primary-peach); outline-offset: 2px; }

@media (hover: hover) {
  .hm-lightbox button:hover {
    background: var(--primary-dark);
    border-color: var(--primary-peach);
  }
}

.hm-lightbox-sluit { top: -54px; right: 0; }
.hm-lightbox-vorige { top: 50%; left: 10px; transform: translateY(-50%); }
.hm-lightbox-volgende { top: 50%; right: 10px; transform: translateY(-50%); }

@media (max-width: 767px) {
  .hm-lightbox-sluit { top: -50px; right: 50%; transform: translateX(50%); }
}

/* --- 4. mobiel menu -----------------------------------------------------
   Het menu hangt bij het openen in .w-nav-overlay (overflow: hidden), dus
   translateY(-100%) schuift het net buiten beeld. Transitie op transform:
   dat is een compositor-eigenschap en blijft vloeiend op zwakkere toestellen. */
.w-nav-overlay [data-nav-menu-open] {
  transform: translateY(-100%);
  transition: transform 400ms ease;
}

.w-nav-overlay.is-open [data-nav-menu-open] { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .w-nav-overlay [data-nav-menu-open] { transition: none; }
}

.w-nav-button { touch-action: manipulation; }
.w-nav-button:focus-visible { outline: 2px solid var(--primary-peach); outline-offset: 2px; }

/* --- 5. accordeon -------------------------------------------------------
   De pijl werd volledig door de runtime aangestuurd: kleur en rotatie
   stonden nergens in de stylesheet. Zonder deze regels blijft de pijl
   staan en verkleurt hij naar de geerfde #222 van de dropdown-basis. */
.accordion-list {
  height: 0;
  transition: height 400ms ease;
}

.accordion-toggle { cursor: pointer; }
.accordion-toggle:focus-visible { outline: 2px solid var(--primary-peach); outline-offset: 4px; }

.accordion-icon {
  color: var(--primary-dark);
  transition: color 300ms ease, transform 300ms ease;
}

.accordion-toggle.w--open .accordion-icon {
  color: var(--primary-peach);
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .accordion-list,
  .accordion-icon { transition: none; }
}


/* ==========================================================================
   DIENSTENKAARTEN (homepage)
   Lookbook-opzet: de foto draagt de kaart, het bijschrift staat eronder op
   de sectie zelf. Stond eerder als een gevuld vak met een foto met marge
   eromheen; dat gaf drie grijze dozen en maakte de foto's kleiner dan nodig.
   ========================================================================== */
.feature-16-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.feature-16-image {
  /* De drie bronfoto's zijn staand (0,77 / 0,71 / 0,75). 3/4 = 0,75 ligt daar
     bovenop, dus er wordt vrijwel niets weggesneden. Een liggende doos op een
     staande foto kostte ruim 40% van de hoogte. */
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  margin: 0;
}

.feature-16-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}

@media (hover: hover) {
  .feature-16-card:hover .feature-16-image img { transform: scale(1.04); }
}

/* De actie was drie keer hetzelfde zwarte pilletje onder elkaar. Nu een
   tekstlink met een streep die meegroeit: rustiger en minder herhaling.
   Dieper goud dan --primary-peach, want dat haalt op wit geen 4,5:1. */
.feature-16-card .button-outline {
  --lijn: 20px;
  align-self: flex-start;
  gap: 12px;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: #9c6832;
  font-family: Catamaran, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}

.feature-16-card .button-outline::after {
  content: '';
  width: var(--lijn);
  height: 1px;
  background: currentColor;
  transition: width .3s ease;
}

@media (hover: hover) {
  .feature-16-card:hover .button-outline::after { width: calc(var(--lijn) + 16px); }
}

.feature-16-card .button-outline:focus-visible {
  outline: 2px solid #9c6832;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .feature-16-image img,
  .feature-16-card .button-outline::after { transition: none; }
}

/* ==========================================================================
   REVIEWSECTIE (homepage)
   Stond als beige kaarten op een beige vlak, met Google-standaardavatars
   (drie zwarte bollen en een paarse letter) en zonder enig signaal dat het
   om echte Google-reviews gaat. De score en het g-logo stonden alleen op
   over-ons, niet op de plek waar de reviews zelf staan.
   ========================================================================== */

/* Score in de linkerkolom, zelfde opzet als het cijferblok op over-ons. */
.hm-score {
  align-items: center;
  gap: 12px;
  margin: 26px 0 4px;
  flex-wrap: wrap;
  display: inline-flex;
}

.hm-score-sterren {
  align-items: center;
  gap: 2px;
  color: #c8860d;
  display: inline-flex;
}

.hm-score-cijfer {
  font-family: Cormorant, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-dark);
}

.hm-score-bron {
  align-items: center;
  gap: 7px;
  font-family: Catamaran, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #56504a;
  display: inline-flex;
}

.hm-score .hm-google-g svg { width: 17px; height: 17px; }

@media (hover: hover) {
  .hm-score:hover .hm-score-bron { color: var(--primary-dark); }
}

.hm-score:focus-visible { outline: 2px solid #9c6832; outline-offset: 4px; }

/* De sectie is wit en de kaarten cremekleurig; dat verschil was te klein om
   als kaart te lezen. Een duidelijke rand en een zachte schaduw doen dat
   werk, zonder de kleuren om te gooien (de sectie erboven en eronder zijn
   al creme, dus dit vlak moet wit blijven voor het ritme). */
.testimonials-text-wrapper.white-bg-style {
  background-color: var(--primary-light);
  border: 1px solid #dcbb8b59;
  box-shadow: 0 10px 30px #2a2a2a0d;
  position: relative;
}

.testimonials-text-wrapper::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  left: 24px;
  font-family: Cormorant, sans-serif;
  font-size: 84px;
  line-height: 1;
  color: var(--primary-peach);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}

.testimonials-text-wrapper .no-top-margin {
  position: relative;
  padding-top: 26px;
}

/* Zonder avatar draagt de naam het blok; het label eronder krijgt het
   register van de andere eyebrows op de site. */
.testimonials-slider-name {
  font-family: Cormorant, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.testimonials-slider-position {
  font-family: Catamaran, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* dieper dan #9c6832: dat haalt op het cremevlak van de kaart maar 4,27:1 */
  color: #8a5b2c;
}

/* De volgende kaart werd hard afgehakt op de schermrand. Die mag uitvagen,
   net als de fotoband hierboven. Bewust een overlay en geen mask-image: de
   pijlen staan absoluut gepositioneerd buiten deze wrapper en een masker
   knipt ze mee weg. */
/* De wrapper loopt tot voorbij de schermrand (de sectie clipt hem), dus de
   vervaging hoort op de sectie zelf: die eindigt wel op de rand. */
.section.light-background-testimonial::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 130px;
  background: linear-gradient(90deg, #ffffff00, var(--white) 85%);
  pointer-events: none;
  z-index: 3;
}

/* De pijlen hingen op left: -29.5rem met een eigen waarde per breekpunt, om
   vanuit de slider in de tekstkolom te belanden. Ze staan nu gewoon in die
   kolom, dus al die verschuivingen kunnen weg. */
.hm-slider-nav {
  gap: 12px;
  margin-top: 30px;
  display: flex;
}

.hm-slider-nav .left-arrow-testimonials,
.hm-slider-nav .right-arrow-testimonials {
  position: static;
  inset: auto;
  left: auto;
  /* de linkerpijl droeg nog een margin-right van 140px uit de oude opzet */
  margin: 0;
  width: 44px;
  height: 44px;
}

.left-arrow-testimonials,
.right-arrow-testimonials {
  width: 44px;
  height: 44px;
}

/* De knop stond tegen het scoreblok aan geplakt. */
.home-team-content .hm-score { margin-bottom: 24px; }

@media screen and (max-width: 991px) {
  .section.light-background-testimonial::after { width: 46px; }
  .home-team-content .hm-score { margin-top: 20px; }
}

/* ==========================================================================
   KNOP-HOVER
   De globale a:hover zet elke link op #2a2a2ab3. Op een knop met een donker
   vlak en witte tekst levert dat 1,00:1 op: volledig onleesbaar. a:hover
   heeft specificiteit (0,1,1) en wint dus van .button-outline (0,1,0).
   ========================================================================== */
@media (hover: hover) {
  .button-outline:hover {
    color: var(--white);
    background-color: var(--button-bg-hover);
  }

  /* de kaartvariant op de homepage is een tekstlink, geen vlak */
  .feature-16-card .button-outline:hover {
    color: #9c6832;
    background: none;
  }
}

/* ==========================================================================
   MOBIELE UITLIJNING VAN DE TEKSTKOLOMMEN
   Titel en intro stonden gecentreerd, maar score, knop en pijlen bleven
   links. Dat gaf een kolom die half links en half gecentreerd stond.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .home-team-content,
  .subscribe-card-left {
    text-align: center;
    align-items: center;
  }

  /* rijen zijn flex, die volgen text-align niet */
  .home-team-content .row-small,
  .home-team-content .hm-slider-nav,
  .home-team-content .hm-score,
  .subscribe-card-left .button-wrapper {
    justify-content: center;
  }

  /* De pijlen horen bij de kaarten eronder, niet los tussen de tekst.
     Dichter tegen de carrousel en met wat lucht erboven. */
  .home-team-content .hm-slider-nav {
    margin-top: 26px;
    margin-bottom: 4px;
  }

  /* De review zelf is lopende tekst van meerdere regels; die blijft links
     staan, gecentreerd leest dat rafelig aan beide kanten. De naam eronder
     stond al links. */
  .testimonials-text-wrapper .no-top-margin { text-align: left; }
}

/* Opener van ontdek. Stond op een grijswaardenfoto (salon4, kleurspreiding
   0,1) op 71% dekking met blur(1px) over een zwart vlak: drievoudig gedempt
   en daardoor dood. Elke kleurenfoto die er wel geschikt voor was, staat op
   diezelfde pagina al in de galerij of onder de cta-band, dus in plaats van
   een foto boven de galerij te herhalen draagt de galerij zelf het beeld.
   De kop hierboven was ook nog eens een dubbele: "Ontdek" in de band en
   "Ontdek de looks, kleuren en stijlen" er vlak onder. */
.banner-ontdek { padding-bottom: 56px; }



@media screen and (max-width: 991px) {
  .banner-ontdek { padding-bottom: 40px; }
}

/* De onderrand van de cta-band sloot niet naadloos op de footer aan: er bleef
   een haarlijn van een pixel over de volle breedte. De bandhoogte is
   fractioneel (512,890625px), dus de onderste rij valt midden op een
   device-pixel en de foto schemert daar doorheen. Het viel het meest op bij
   een schaalfactor van 1,25 en 1,5 (afwijking tot 53 tegen 42) en nauwelijks
   op 1x of 2x, wat verklaart waarom het op een screenshot bijna onzichtbaar
   is. Een effen strook over de onderrand dekt het af, ongeacht de
   schaalfactor. Ze valt binnen het gebied waar de sluier toch al dicht is. */
.footer-image::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 8px;
  background: var(--primary-dark);
  pointer-events: none;
}