@charset "UTF-8";
:root {
  /* Kleuren basis */
  --paper: hsl(0 0% 100%);
  --paper: oklch(97.06% 0.0034 174.48);
  /* #ffffff */
  --color-white: hsl(0 0% 100%);
  --color-white: oklch(1 0 0);
  --color-white-dim: hsl(0 0% 100% /0.85);
  --color-white-dim: oklch(1 0 0 / 0.85);
  --ink: hsl(185, 86%, 27%); /* primaire merkkleur (teal) */
  --ink: oklch(51.7% 0.086 205); /* primaire merkkleur (teal) */
  --ink-dark: hsl(186, 60%, 14%); /* donkere tekst / hovers */
  --ink-dark: oklch(30.0% 0.042 205); /* donkere tekst / hovers */
  --ink-deeper: hsl(187, 81%, 13%); /* footer-achtergrond */
  --ink-deeper: oklch(29.9% 0.048 208); /* footer-achtergrond */
  --accent: hsl(80, 52%, 50%); /* accentkleur (groen) */
  --accent: oklch(75.8% 0.164 126); /* accentkleur (groen) */
  --text: hsl(187, 30%, 24%); /* lopende tekst */
  --text: oklch(38.6% 0.038 206); /* lopende tekst */
  --muted: hsl(188, 11%, 42%); /* secundaire tekst */
  --nav: hsl(189, 15%, 34%);
  --nav: oklch(47.5% 0.028 209);
  --deep: #06343A;
  --line: rgba(10, 60, 66, 0.12);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* #2b2b2a */
  --color-black: hsl(60, 1.2%, 16.7%);
  --color-black: oklch(28.9% 0.0018 106.5);
  /* Primaire kleuren */
  /* #0a7680 */
  --color-first: hsl(185.1, 85.5%, 27.1%);
  --color-first: oklch(51.7% 0.0863 205.4);
  /* #97c23f */
  --color-second: hsl(79.7, 51.8%, 50.4%);
  --color-second: oklch(75.8% 0.1637 125.8);
  --color-third: hsl(80, 53%, 90%);
  --color-third: oklch(0.9502 0.0368 122.12);
  --color-button: rgb(1 93 108);
  --color-spacer: rgba(255, 255, 255, 0.3);
  --ink-deeper: hsl(187, 81%, 13%);
  --ink-deeper: oklch(29.9% 0.048 208);
  /* Grijstinten */
  --color-grey-55: hsl(0 0% 55%);
  --color-grey-55: oklch(0.61 0.004 103.9); /* #8D8D8D */
  --color-grey-73: hsl(0 0% 73%);
  --color-grey-73: oklch(0.745 0.004 103.9); /* #bbbbbb */
  --color-grey-96: hsl(0 0% 96%);
  --color-grey-96: oklch(0.971 0.001 120.8); /* #f6f6f6 */
  --color-grey-first: hsl(0, 0%, 92%);
  --color-grey-first: oklch(0.9401 0 0);
  --color-grey-active: hsl(0, 0%, 86%);
  --color-grey-active: oklch(88% 0 89.9);
  /* #606060 */
  --color-grey-second: hsl(0, 0%, 37.6%);
  --color-grey-second: oklch(48.9% 0.0000 89.9);
  /* Tekst & achtergrond */
  --color-body-bg: hsl(0 0% 100%);
  --color-body-bg: oklch(1 0 0);
  --color-text-default: hsl(0 0% 18%);
  --color-text-default: oklch(0.212 0 0); /* #2e2e2e */
  --color-input-text: hsl(0 0% 18%);
  --color-input-text: oklch(0.212 0 0); /* #2e2e2e */
  /* Error kleuren */
  --color-error: hsl(350 60% 28%);
  --color-error: oklch(0.37 0.143 22.2); /* #721c24 */
  --color-error-bg: hsl(351 82% 92%);
  --color-error-bg: oklch(0.912 0.032 22.2); /* #f8d7da */
  --color-success: hsl(137, 63%, 23%);
  --color--success: oklch(0.432 0.11 148.516); /* #721c24 */
  --color-success-bg: hsl(134, 38%, 57%);
  --color-success-bg: oklch(0.72 0.123 150.166); /* #f8d7da */
  /* Facebook #1877F2 */
  --color-facebook: hsl(221.2, 82.3%, 52.4%);
  --color-facebook: oklch(60.9% 0.1967 258.3);
  /* Twitter (X gebruikt zwart, maar klassiek Twitter blauw #1DA1F2) */
  --color-twitter: hsl(203.8, 88.3%, 53.3%);
  --color-twitter: oklch(64.9% 0.1854 235.4);
  /* YouTube #FF0000 */
  --color-youtube: hsl(0, 100%, 50%);
  --color-youtube: oklch(62.7% 0.2577 29.2);
  /* LinkedIn #0A66C2 */
  --color-linkedin-in: hsl(212.4, 90.4%, 40%);
  --color-linkedin-in: oklch(53.2% 0.1683 248.6);
  /* Pinterest #E60023 */
  --color-pinterest: hsl(351.1, 100%, 45%);
  --color-pinterest: oklch(60.1% 0.2502 25.3);
  /* Instagram #E4405F */
  --color-instagram: hsl(340.5, 74.6%, 56.1%);
  --color-instagram: oklch(65.7% 0.2101 16.8);
  /* WhatsApp #25D366 */
  --color-whatsapp: hsl(142.4, 70.6%, 48.6%);
  --color-whatsapp: oklch(76.3% 0.2004 150.6);
  /* Facebook Messenger #0084FF */
  --color-facebook-messenger: hsl(210.4, 100%, 50%);
  --color-facebook-messenger: oklch(63.5% 0.2052 250.9);
  /* Fonts */
  /*

   var(--font-primary), Helvetica, Arial, sans-serif;
   var(--font-secondary), Georgia, serif;

   */
  --font-primary: 'Helvetica Neue';
  --font-secondary: 'Cormorant Garamond';
  --font-icon: "Font Awesome 6 Pro";
  --default-font-size: 16px;
  --default-gap: 30px;
  --grid: 6;
  --grid-1: calc(100%/var(--grid));
  --grid-2: calc(var(--grid-1) * 2);
  --grid-3: calc(var(--grid-1) * 3);
  --grid-4: calc(var(--grid-1) * 4);
  --grid-5: calc(var(--grid-1) * 5);
  --grid-6: 100%;
  /* Typografie gewichten */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 900;
  --box-width: 630px;
  --box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.18);
  --breakout-max-width: 1400px;
  --breakout-size: 60px;
  --content-max-width: 1280px;
  --content-max-width-half: calc(var(--content-max-width)/2);
  --footer-gap: 120px;
  --footer-section: minmax(50px, 350px);
  --footer-spacer: 20px;
  --header-height: 106px;
  --icon-size: 30px;
  --icon-size-large: 50px;
  --icon-gap: 20px;
  --inline-gap: 20px;
  --logo-gap: 60px;
  --padding-inline: 30px;
  --padding-header: 10px;
  --padding-small: 10px;
  --padding-block: 60px;
  --page-margin: 60px;
}

:root {
  interpolate-size: allow-keywords;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  touch-action: manipulation;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 200px;
}

main {
  overflow-x: hidden;
}

button:focus {
  outline-color: transparent;
  outline-style: none;
  outline: none;
}

body {
  text-rendering: optimizeSpeed;
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
}

.grecaptcha-badge {
  opacity: 0;
}

img {
  display: block;
}

p, a, li {
  color: var(--color-text-default);
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: var(--font-weight-regular);
}

p {
  margin-bottom: 15px;
  text-wrap: pretty;
}
p a:not(.btn) {
  color: var(--color-text-default);
  text-decoration: underline;
}
p a:not(.btn):hover {
  color: var(--color-text-default);
}
p a:not(.btn):active {
  color: var(--color-text-default);
}
p a:focus:not(.btn) {
  color: var(--color-text-default);
  outline: none;
}

*:focus {
  outline: none;
}

.form__control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.image__fluid {
  max-width: 100%;
  height: auto;
}

img.img__fluid {
  max-width: 100%;
  height: auto;
}

h1 {
  font-family: var(--font-secondary), Georgia, serif;
  color: var(--color-black);
  margin: 10px 0;
  padding: 0;
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.75rem, 5vw + 0.5rem, 2.375rem);
  text-align: left;
  text-wrap: balance;
  line-height: 1.2;
}

h2 {
  font-family: var(--font-secondary), Georgia, serif;
  color: var(--color-black);
  margin: 10px 0;
  padding: 0;
  font-weight: var(--font-weight-semi-bold);
  font-size: clamp(1.75rem, 5vw + 0.5rem, 2.375rem);
  text-align: left;
  text-wrap: balance;
  line-height: 1.2;
}

h3 {
  font-family: var(--font-secondary), Georgia, serif;
  color: var(--color-first);
  margin: 10px 0;
  padding: 0;
  font-weight: var(--font-weight-semi-bold);
  font-size: clamp(1.25rem, 5vw + 0.5rem, 1.625rem);
}

input {
  font-family: var(--font-secondary), Georgia, serif;
}

.btn {
  padding: 10px 25px;
  font-size: 1rem;
  line-height: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  transition: all 0.5s ease-in-out;
  border-width: 1px;
  border-style: solid;
}
.btn__icon svg {
  font-size: 1.213rem;
  padding-left: 10px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .btn {
    display: flex;
    width: 100%;
    text-align: left;
    justify-content: space-between;
    padding: 10px 15px;
    line-height: 30px;
    text-transform: lowercase;
  }
}
@media (max-width: 767.98px) {
  .btn {
    display: flex;
    text-align: left;
    justify-content: space-between;
    padding: 10px 15px;
    line-height: 30px;
    text-transform: lowercase;
  }
}

.btn__default {
  color: var(--color-white);
  background-color: var(--color-second);
  border: solid 1px var(--color-second);
  text-decoration: none;
  font-weight: var(--font-weight-regular);
}
.btn__default:visited, .btn__default.active, .btn__default.focus, .btn__default:active, .btn__default:focus {
  color: var(--color-white);
  border: solid 1px var(--color-second);
}
.btn__default:hover {
  color: var(--color-second);
  background-color: var(--color-white);
  border: solid 1px var(--color-second);
}

.btn__reverse {
  color: var(--color-second);
  background-color: var(--color-white);
  border: solid 1px var(--color-second);
  text-decoration: none;
  font-weight: var(--font-weight-regular);
}
.btn__reverse:visited, .btn__reverse.active, .btn__reverse.focus, .btn__reverse:active, .btn__reverse:focus {
  color: var(--color-second);
  border: solid 1px var(--color-second);
}
.btn__reverse:hover {
  color: var(--color-white);
  background-color: var(--color-second);
  border: solid 1px var(--color-second);
}

.btn__newsletter {
  color: var(--color-second);
  background-color: var(--color-white);
  border: solid 1px var(--color-second);
  text-decoration: none;
  font-weight: var(--font-weight-regular);
}
.btn__newsletter:visited, .btn__newsletter.active, .btn__newsletter.focus, .btn__newsletter:active, .btn__newsletter:focus {
  color: var(--color-second);
  border: solid 1px var(--color-second);
}
.btn__newsletter:hover {
  color: var(--color-white);
  background-color: var(--color-second);
  border: solid 1px var(--color-second);
}

.btn__highlight {
  padding: 10px 20px;
  font-size: clamp(1.25rem, 5vw + 0.5rem, 2rem);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1;
  margin-bottom: 0;
  border-radius: 999px;
  border-style: solid;
  border-width: 3px;
}

.btn__apply {
  padding: 20px 25px;
  font-size: 2rem;
  font-weight: var(--font-weight-semi-bold);
  line-height: 1;
  margin-bottom: 0;
  border-radius: 0;
  text-align: center;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .btn__apply {
    font-size: 1.5rem;
    justify-content: center;
  }
}

.btn__readmore {
  font-size: 1rem;
  line-height: 16px;
  background-color: var(--color-third);
  border: solid 1px var(--color-third);
  color: var(--color-white);
  font-weight: var(--font-weight-regular);
  border-radius: 3px;
  text-decoration: none;
}
.btn__readmore:visited, .btn__readmore.active, .btn__readmore.focus, .btn__readmore:active, .btn__readmore:focus {
  color: var(--color-white);
  background-color: var(--color-third);
  border: solid 1px var(--color-third);
}
.btn__readmore:hover {
  background-color: var(--color-white);
  border: solid 1px var(--color-third);
  color: var(--color-third);
}
.btn__readmore .fa-chevron-right {
  margin-left: 20px;
}

a.link__readmore {
  font-size: 1rem;
  line-height: 16px;
  color: var(--color-fourth);
  text-decoration: none;
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
}
a.link__readmore:visited, a.link__readmore.active, a.link__readmore.focus, a.link__readmore:active, a.link__readmore:focus {
  color: var(--color-fourth);
}
a.link__readmore:hover {
  text-decoration: underline;
  color: var(--color-first);
}
a.link__readmore .fa-chevron-right {
  margin-left: 10px;
}

.list-group-item {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.list-group-item:first-child, .list-group-item:last-child {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

small {
  margin-bottom: 7px;
  display: inline-flex;
}

.subtext {
  margin-bottom: 7px;
  display: inline-flex;
}

.page_header {
  position: relative;
  z-index: 20;
}

.hero-slider {
  position: relative;
  z-index: 10;
}

#map {
  height: 400px;
  width: 100%;
}

.page-grid {
  display: grid;
  grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - var(--padding-inline) * 2, var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

@media (max-width: 767px) {
  .page-header .page-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.page-grid > :not(.breakout, .full-width, .video, .full-split, .full-banner, .vacancy__left, .vacancy__right),
.full-width > :not(.breakout, .full-width, .video, .full-split, .full-banner, .vacancy__left, .vacancy__right) {
  grid-column: content;
}

.page-grid > .breakout {
  grid-column: breakout;
}

.page-grid > .full-width {
  grid-column: full-width;
  display: grid;
  grid-template-columns: inherit;
}

.page-grid {
  display: grid;
  grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - var(--padding-inline) * 2, var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.page-split, .full-split {
  display: grid;
  grid-template-columns: minmax(var(--padding-inline), 1fr) min(50% - var(--padding-inline) * 2, var(--content-max-width-half)) min(50% - var(--padding-inline) * 2, var(--content-max-width-half)) minmax(var(--padding-inline), 1fr);
  grid-template-rows: 1fr var(--padding-inline);
}
.page-split-left, .full-split-left {
  grid-column: 2/3;
  grid-row: 1/2;
}
.page-split-right, .full-split-right {
  grid-column: 3/-1;
  grid-row: 1/-1;
}
.page-split-spacer, .full-split-spacer {
  grid-column: 1/3;
  grid-row: 2/-1;
  background-color: var(--color-white);
}
@media (max-width: 767px) {
  .page-split, .full-split {
    display: flex;
    flex-direction: column;
  }
}

.page-margin {
  margin-top: var(--page-margin);
}

.page-center {
  justify-items: center;
}

.page-contact {
  display: grid;
  grid-template-columns: var(--container-spacer) var(--container-width) var(--container-spacer);
  grid-template-rows: 1fr;
  grid-template-areas: ". container .";
  padding: 30px 0 0;
}
.page-contact__container {
  grid-area: container;
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "blocks form";
  grid-gap: 40px;
}
@media (max-width: 767px) {
  .page-contact__container {
    display: flex;
    flex-direction: column;
  }
}
.page-contact__blocks {
  grid-area: blocks;
}
.page-contact__form {
  grid-area: form;
}

:root {
  --header-height: 0px;
}

.hero-slider {
  margin-top: var(--header-height);
}

.page-header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: var(--color-grey-first);
}
@media (max-width: 767.98px) {
  .page-header {
    grid-template-rows: auto 1fr;
  }
}

.top__header {
  background-color: var(--color-first);
  height: 42px;
  padding: 0 var(--padding-small);
}
.top__header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.02em;
}
.top__items {
  display: flex;
  list-style: none;
  gap: 28px;
  align-items: center;
}
.top__link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white-dim);
  text-decoration: none;
  font-size: 0.813rem;
}
.top__link:hover .top__text {
  color: var(--color-white);
  text-decoration: underline;
}
.top__link::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-second);
}

.header {
  background-color: var(--color-white);
  color: var(---color-black);
  z-index: 20;
}
@media (min-width: 767.99px) {
  .header {
    position: fixed;
    width: 100%;
    box-shadow: var(--box-shadow);
  }
}
.header {
  grid-column: 1/-1;
  grid-row: 1/2;
}
.header__container {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "logo navigation";
  align-items: center;
  position: relative;
  padding: 10px 0;
  column-gap: 10px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .header__container {
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "logo search" "navigation navigation ";
    align-items: center;
  }
}
@media (max-width: 767px) {
  .header__container {
    padding: 0;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto;
    grid-template-areas: "logo search hamburger" "line line line" "navigation navigation navigation";
    align-items: center;
  }
}
.header__line {
  display: none;
}
@media (max-width: 767px) {
  .header__line {
    grid-area: line;
    height: 2px;
    display: block;
    background-color: var(--color-second);
  }
}
.header__logo {
  grid-area: logo;
}
.header__logo .logo {
  max-height: clamp(50px, 5vw + 0.5rem, 60px);
  transition: all 0.5s ease-in-out;
  max-width: 100%;
  height: auto;
}
@media (max-width: 767.98px) {
  .header__logo .logo {
    max-height: 70px;
    padding: 10px;
  }
}
.header__logo .logo-scroll {
  max-height: 30px;
}
.header__search {
  grid-area: search;
}
.header__language {
  grid-area: language;
}
.header__hamburger {
  display: none;
  grid-area: hamburger;
}
@media (max-width: 767.98px) {
  .header__hamburger {
    display: inline-flex;
    margin-right: 10px;
  }
}
.header__navigation {
  flex-grow: 1;
  grid-area: navigation;
  display: flex;
  justify-self: end;
}
@media (max-width: 767.98px) {
  .header__navigation {
    display: none;
    transition: all 0.5s ease-in-out;
  }
  .header__navigation.open {
    display: block;
    width: 100%;
    flex-direction: column;
    padding-bottom: 10px;
  }
}
.header__language {
  position: relative;
}
.header__contact {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: var(--color-black);
  text-decoration: none;
  padding: 8px 24px;
  margin-left: 14px;
  border: 1px solid var(--color-black);
  letter-spacing: 0.04em;
  font-size: 0.938rem;
}
.header__contact:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}
@media (max-width: 767px) {
  .header__contact {
    margin: 0 24px;
    display: flex;
    justify-content: center;
    padding: 15px 24px;
    font-size: 1.0625rem;
  }
}

.language {
  display: flex;
}
.language__menu {
  width: max-content;
  display: flex;
  z-index: 30;
  padding: 10px;
  gap: 5px;
}
.language__item {
  font-size: 0.875rem;
  font-weight: var(--font-weight-light);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  text-decoration: none;
}
.language__item:hover {
  color: var(--color-white);
}
.language__item.active {
  color: var(--color-white);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

.header__language {
  display: flex;
  gap: 20px;
}

.banner,
.bannersmall,
.header__title, .blog-header {
  margin-top: var(--header-height, 0);
}

.bannersmall {
  z-index: 10;
  grid-column: 1/-1;
  grid-row: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.bannersmall__content {
  grid-column: 1/-1;
  grid-row: 1/-1;
  justify-content: center;
  align-items: center;
  z-index: 20;
}
.bannersmall__content h1, .bannersmall__content .banner-title {
  font-family: var(--font-secondary), Georgia, serif;
  color: var(--color-white);
  margin: 0 0 10px;
  padding: 100px 0 0 0;
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.25rem, 5vw + 0.5rem, 2.5rem);
  text-align: center;
  text-wrap: balance;
  line-height: 1.2;
}
@media (max-width: 767.98px) {
  .bannersmall__content h1, .bannersmall__content .banner-title {
    margin-top: 20px;
  }
}
.bannersmall img {
  grid-column: 1/-1;
  grid-row: 1/-1;
  height: 250px;
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  z-index: 10;
  aspect-ratio: 16/9;
}
@media (max-width: 767.98px) {
  .bannersmall img {
    aspect-ratio: 1/1;
  }
}

.banner {
  z-index: 10;
  grid-column: 1/-1;
  grid-row: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 50px 50px;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}
@media (max-width: 767.98px) {
  .banner {
    margin-bottom: 20px;
    grid-row: 2/-1;
  }
}
.banner__title {
  font-family: var(--font-secondary), Georgia, serif;
  color: var(--color-white);
  margin: 0 0 10px;
  padding: 0;
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.25rem, 5vw + 0.5rem, 5rem);
  text-align: center;
  text-wrap: balance;
  line-height: 1.2;
}
@media (max-width: 767.98px) {
  .banner__title {
    margin-top: 20px;
  }
}
.banner__video {
  aspect-ratio: 16/9;
  object-fit: cover;
  grid-column: 1/-1;
  grid-row: 1/3;
  z-index: 10;
}
@media (max-width: 767.98px) {
  .banner__video {
    aspect-ratio: 1/1;
  }
}
.banner__slogan {
  grid-column: 1/-1;
  grid-row: 1/3;
  width: 100%;
  z-index: 20;
}
.banner__search {
  grid-column: 1/-1;
  grid-row: 2/-1;
  z-index: 40;
  justify-items: center;
  display: grid;
}
.banner__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
@media (max-width: 767.98px) {
  .banner__content {
    gap: 20px;
  }
}
.banner__button {
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-rows: 1fr 78px;
}
@media (max-width: 767.98px) {
  .banner__button {
    grid-template-rows: 1fr 44px;
    margin-left: 30px;
  }
}
.banner__button a {
  grid-column: 1/2;
  grid-row: 1/-1;
  background-color: var(--color-button);
  display: inline-flex;
  height: 100%;
  font-size: 2.375rem;
  line-height: 1;
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-white);
  padding: 20px 30px 20px 40px;
  text-decoration: none;
}
@media (max-width: 767.98px) {
  .banner__button a {
    font-size: 1.5rem;
    padding: 10px 20px;
    height: auto;
  }
}
.banner__button img {
  grid-column: 2/-1;
  grid-row: 2/-1;
  height: 78px;
}
@media (max-width: 767.98px) {
  .banner__button img {
    height: 44px;
  }
}
.banner__button img.img-light {
  display: none;
}
.banner__button img.img-dark {
  display: block;
}
.banner__button:hover a {
  background-color: var(--color-white);
  color: var(--color-button);
}
.banner__button:hover img.img-light {
  display: block;
}
.banner__button:hover img.img-dark {
  display: none;
}

.search__form {
  display: flex;
  padding: 24px 32px;
  align-items: center;
  gap: 18px;
  height: 92px;
  background: transparent;
  border: none;
  outline: none;
}
.search__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--color-first);
}
.search__input {
  flex: 1;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 1.375rem;
  min-width: 0;
  background: var(--paper);
  border: 0;
  outline: 0;
  box-shadow: none;
  color: var(--color-first);
  padding: 0 20px;
  height: 100%;
  font-weight: var(--font-weight-regular);
  font-family: var(--font-secondary), Georgia, serif;
}
.search__input::placeholder {
  color: var(--color-first);
  opacity: 1;
  font-size: 1.375rem;
  font-weight: var(--font-weight-regular);
  font-family: var(--font-secondary), Georgia, serif;
}
.search__input:focus {
  outline: none;
  box-shadow: none;
}

a.logo__link {
  display: block;
  font-size: 0;
  color: var(---color-black);
  text-decoration: none;
}

.phone__link {
  color: var(---color-white);
  text-decoration: none;
  font-family: var(--font-secondary), Georgia, serif;
}

.search__toggle {
  width: 40px;
  height: 40px;
  margin-left: 6px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-black);
  display: none;
  align-items: center;
  justify-content: center;
}
.search__toggle-icon {
  font-size: 1rem;
}
.search__toggle-dektop {
  display: flex;
}
.search__toggle-mobile {
  display: none;
}
@media (max-width: 767.98px) {
  .search__toggle-dektop {
    display: none;
  }
  .search__toggle-mobile {
    display: flex;
  }
}

.search__panel {
  display: none;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-black);
  box-shadow: 0 18px 40px rgba(10, 60, 66, 0.12);
  z-index: 60;
}
.search__panel.open {
  display: block;
}

.search__close {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-blwck);
  font-size: 18px;
  width: 36px;
  height: 36px;
}

.nav-toggle .icon-close {
  display: none;
}

.header__hamburger .nav-toggle .icon-open {
  display: block;
}

.header__hamburger .nav-toggle .icon-close {
  display: none;
}

.header__hamburger .nav-toggle.open .icon-open {
  display: none;
}

.header__hamburger .nav-toggle.open .icon-close {
  display: block;
}

/* Mobiel: subnavigaties ingeklapt, openklappen met chevron rechts */
@media (max-width: 767px) {
  ul.nav li.dropdown .submenu__label {
    cursor: pointer;
  }
  ul.nav li.dropdown .submenu__label .fa-chevron-down {
    display: inline-block;
    font-size: 0.85rem;
    margin-top: 0;
    transition: transform 0.35s ease;
  }
  ul.nav li.dropdown .dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  ul.nav li.dropdown.open .submenu__label .fa-chevron-down {
    transform: rotate(180deg);
  }
  ul.nav li.dropdown.open .dropdown-menu {
    max-height: 600px;
  }
}
ul.nav {
  display: flex;
  margin: 0;
  gap: 4px;
  font-size: 0.938rem;
  list-style: none;
  align-items: center;
  transition: all 0.5s ease-in-out;
}
@media (max-width: 767px) {
  ul.nav {
    justify-content: space-between;
    gap: 0;
    display: block;
    border-bottom: 1px solid rgba(10, 60, 66, 0.07);
    margin-bottom: 10px;
  }
}
ul.nav li {
  display: inline-flex;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  align-items: center;
  gap: 6px;
  font-weight: var(--font-weight-semi-bold);
  border-bottom: solid 2px transparent;
}
@media (max-width: 767px) {
  ul.nav li {
    font-weight: var(--font-weight-regular);
    padding: 0;
    border-bottom: 1px solid rgba(10, 60, 66, 0.07);
  }
}
@media (min-width: 767px) {
  ul.nav li.active:not(.header__contact-mobile) {
    border-bottom: solid 2px var(--color-second);
    color: var(--ink);
  }
  ul.nav li:hover:not(.header__contact-mobile) {
    border-bottom: solid 2px var(--color-black);
  }
}
ul.nav li a:not(.btn) {
  display: inline-flex;
  font-size: 0.938rem;
  color: var(--color-black);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-first), sans-serif;
  font-weight: var(--font-weight-regular);
}
@media (max-width: 767px) {
  ul.nav li a:not(.btn) {
    font-weight: var(--font-weight-regular);
    display: flex;
    padding: 15px 24px;
    background-color: var(--color-white);
    color: var(--nav);
    font-size: 1.0625rem;
  }
}
@media (max-width: 767px) {
  ul.nav li {
    display: block;
    background-color: var(--color-white);
    color: var(--color-first);
  }
  ul.nav li.active a:not(.btn) {
    color: var(--ink);
  }
}
ul.nav li.dropdown {
  position: relative;
  font-size: 0.938rem;
  border-bottom: solid 2px transparent;
}
@media (max-width: 767px) {
  ul.nav li.dropdown {
    background-color: var(--color-white);
    color: var(--color-first);
  }
}
ul.nav li.dropdown .submenu {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0;
  gap: 10px;
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  color: var(--color-black);
  font-weight: var(--font-weight-regular);
}
ul.nav li.dropdown .submenu__label {
  font-size: 0.938rem;
}
@media (max-width: 767px) {
  ul.nav li.dropdown .submenu {
    border-bottom: 1px solid rgba(10, 60, 66, 0.07);
    gap: 0;
  }
  ul.nav li.dropdown .submenu__label {
    font-size: 1.0625rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 15px 24px;
    color: var(--nav);
  }
}
ul.nav li.dropdown .submenu .fa-chevron-down {
  font-size: 0.5rem;
  padding: 0 5px;
  transform: rotate(0deg);
  margin-top: -3px;
}
@media (max-width: 767px) {
  ul.nav li.dropdown .submenu .fa-chevron-down {
    display: inline-block;
    font-size: 1rem;
  }
}
ul.nav li.dropdown.open .submenu .fa-chevron-down {
  transform: rotate(180deg);
  margin-top: 0;
}
@media (max-width: 767px) {
  ul.nav li.dropdown.open .submenu .fa-chevron-down {
    display: inline-block;
    transform: rotate(180deg);
  }
}
ul.nav li .dropdown-menu {
  position: relative;
}
ul.nav li .dropdown-menu.open {
  display: flex;
  flex-direction: column;
}
ul.nav li .dropdown-menu {
  overflow: hidden;
  top: 20px;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
}
@media (max-width: 767px) {
  ul.nav li .dropdown-menu {
    border-radius: 0;
    border: none;
    top: 0;
    display: flex;
    flex-direction: column;
  }
}
ul.nav li .dropdown-menu a {
  line-height: 20px;
  padding: 10px 20px;
  border-bottom: solid 1px var(--color-white);
  font-weight: var(--font-weight-light);
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  font-size: 1.0685rem;
  display: flex;
  text-align: left;
  color: var(--color-black);
}
@media (max-width: 767px) {
  ul.nav li .dropdown-menu a {
    background-color: var(--color-white);
    font-size: 1.0625rem;
    border-bottom: none;
    padding: 15px 24px;
    border-bottom: 1px solid rgba(10, 60, 66, 0.07);
  }
}
ul.nav li .dropdown-menu a:first-child {
  border-top: 1px solid rgba(10, 60, 66, 0.07);
}
ul.nav li .dropdown-menu a:last-child {
  border-bottom: none;
}
ul.nav-es {
  font-size: 0.875rem;
}
ul.nav-es li {
  font-size: 0.875rem;
}
ul.nav-es li a:not(.btn) {
  font-size: 0.875rem;
}

@media only screen and (min-width: 768px) {
  ul.nav {
    padding-bottom: 0;
  }
  ul.nav.show-mobile {
    display: none;
  }
  ul.nav li {
    width: max-content;
  }
  ul.nav li.dropdown .submenu {
    justify-content: space-between;
  }
  ul.nav li .dropdown-menu {
    display: none;
    position: absolute;
    left: -20px;
    top: 42px;
    width: max-content;
    min-width: 200px;
  }
  ul.nav li .dropdown-menu.open {
    width: max-content;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    padding: 0;
    border-top: 2px solid var(--color-second);
    box-shadow: 0 12px 32px rgba(10, 60, 66, 0.14);
  }
  ul.nav li .dropdown-menu a {
    color: var(--color-black);
  }
  ul.nav li .dropdown-menu a:hover {
    background-color: var(--color-third);
  }
  ul.nav li .open .dropdown-menu {
    position: absolute;
    width: max-content;
    display: flex;
    flex-direction: column;
    top: 100%;
    left: 0;
    background: var(--color-white);
    box-shadow: 0 12px 32px rgba(10, 60, 66, 0.14);
    min-width: 200px;
    padding: 8px 0;
    z-index: 50;
  }
  ul.nav li .open .dropdown-menu a {
    font-family: var(--font-primary), Helvetica, Arial, sans-serif;
    font-size: 0.938rem;
    font-weight: var(--font-weight-light);
    border-bottom: none;
  }
  ul.nav li .open .dropdown-menu a:last-child {
    border-bottom: none;
  }
}
.hamburger__menu .fa-bars {
  font-size: 2rem;
  padding-right: 10px;
}

.open ul.nav {
  flex-direction: column;
}

.about {
  grid-template-areas: "about";
}
.about__top {
  display: grid;
  grid-template-columns: 5fr 6fr;
  grid-template-rows: 1fr;
  gap: 90px;
  align-items: start;
  padding-top: 90px;
}
@media (max-width: 767px) {
  .about__top {
    display: flex;
    flex-direction: column;
  }
}
.about__text {
  max-width: 70%;
  padding: var(--padding-block);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .about__text {
    max-width: 90%;
    padding: var(--padding-block);
  }
}
@media (max-width: 767px) {
  .about__text {
    max-width: 100%;
    padding: var(--padding-block) 0;
  }
}
.about__text h1 {
  margin-bottom: var(--default-gap);
  text-align: center;
  font-family: var(--font-secondary), Georgia, serif;
  color: var(--color-black);
  padding: 0;
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.75rem, 5vw + 0.5rem, 2.375rem);
  text-wrap: balance;
  line-height: 1.2;
}
.about__text {
  font-size: 1.125rem;
  line-height: 1.2;
}
.about__text p {
  text-align: center;
  font-size: 1rem;
  line-height: 1.2;
  padding-bottom: var(--padding-inline);
  font-weight: var(--font-weight-semi-bold);
}
.about__text h2 {
  margin-bottom: var(--default-gap);
  text-align: center;
  font-family: var(--font-secondary), Georgia, serif;
  color: var(--color-black);
  padding: 0;
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.75rem, 5vw + 0.5rem, 2.375rem);
  text-wrap: balance;
  line-height: 1.2;
}
.about__content {
  padding-right: var(--padding-inline);
}
@media (max-width: 767px) {
  .about__content {
    padding: 0;
  }
}
.about__button {
  margin-bottom: var(--padding-block);
}
@media (max-width: 767px) {
  .about__button {
    padding: 0 15px;
  }
}
.about__image {
  height: 100%;
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .about__image {
    background-position: center center;
  }
}
@media (max-width: 767px) {
  .about__image {
    max-width: 100%;
    height: auto;
    background-size: auto;
    aspect-ratio: 1/1;
    background-position: center center;
  }
}

.why__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
@media (max-width: 767px) {
  .why__list {
    flex-direction: column;
  }
}
.why__item {
  background-color: var(--color-first);
  font-size: 1.25rem;
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.why__item a {
  font-size: 1.25rem;
  text-decoration: none;
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
}
@media (max-width: 767px) {
  .why__item {
    font-size: 1rem;
  }
}

.hero-slider {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: var(--ink);
}

.hero-slider .splide__track,
.hero-slider .splide__list {
  height: 100%;
}

.hero-slide {
  position: relative;
  height: 100%;
}

.hero-slide__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ken Burns alleen op de actieve slide */
.hero-slider .splide__slide.is-active .hero-slide__image {
  animation: heroKen 9s ease-out both;
}

@keyframes heroKen {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}
.hero-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 40, 45, 0.3) 0%, rgba(5, 40, 45, 0.55) 55%, rgba(5, 40, 45, 0.92) 100%);
}

.hero-slide__content {
  position: relative;
  z-index: 5;
  height: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-slide__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.26em;
  font-weight: 500;
  text-transform: uppercase;
}

.hero-slide__eyebrow::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--accent);
}

.hero-slide__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.06;
  color: #fff;
  text-wrap: balance;
  max-width: 640px;
}

.hero-slide__quote {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 300;
  max-width: 480px;
}

/* Tekst rustig laten inkomen bij de actieve slide */
.hero-slider .splide__slide.is-active .hero-slide__eyebrow {
  animation: heroRise 0.7s ease both;
}

.hero-slider .splide__slide.is-active .hero-slide__title {
  animation: heroRise 0.7s 0.08s ease both;
}

.hero-slider .splide__slide.is-active .hero-slide__quote {
  animation: heroRise 0.7s 0.16s ease both;
}

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ---- Splide besturing in design-stijl ---- */
/* Pijlen rechtsonder, uitgelijnd op de container */
.hero-slider .splide__arrows {
  position: absolute;
  z-index: 6;
  bottom: 28px;
  right: max(24px, (100% - 1240px) / 2 + 24px);
  display: flex;
  gap: 8px;
}

.hero-slider .splide__arrow {
  position: static;
  transform: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  background: transparent;
  opacity: 1;
}

.hero-slider .splide__arrow svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.hero-slider .splide__arrow:hover {
  background: rgba(255, 255, 255, 0.14);
}

.hero-slider .splide__arrow:disabled {
  opacity: 0.35;
}

/* Paginering (dots) linksonder */
.hero-slider .splide__pagination {
  position: absolute;
  z-index: 6;
  bottom: 28px;
  left: max(24px, (100% - 1240px) / 2 + 24px);
  right: auto;
  height: 44px;
  padding: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero-slider .splide__pagination__page {
  width: 16px;
  height: 3px;
  margin: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
  transform: none;
  transition: all 0.4s ease;
}

.hero-slider .splide__pagination__page.is-active {
  width: 32px;
  background: var(--accent);
  transform: none;
}

@media (min-width: 960px) {
  .hero-slider {
    height: 640px;
  }
  .hero-slide__content {
    justify-content: center;
    padding: 0 32px;
  }
  .hero-slide__title {
    font-size: 76px;
    line-height: 1.04;
  }
  .hero-slide__quote {
    margin-top: 28px;
    font-size: 20px;
  }
  .hero-layer {
    background: linear-gradient(78deg, rgba(5, 40, 45, 0.88) 0%, rgba(5, 40, 45, 0.55) 44%, rgba(5, 40, 45, 0.08) 75%);
  }
  .hero-slide__eyebrow {
    gap: 14px;
    margin-bottom: 22px;
    font-size: 13px;
    letter-spacing: 0.3em;
  }
  .hero-slide__eyebrow::before {
    width: 44px;
  }
  .hero-slider .splide__arrows {
    bottom: 36px;
    right: max(32px, (100% - 1240px) / 2 + 32px);
  }
  .hero-slider .splide__arrow {
    width: 46px;
    height: 46px;
  }
  .hero-slider .splide__pagination {
    bottom: 36px;
    left: max(32px, (100% - 1240px) / 2 + 32px);
  }
}
.blogs-homepage {
  padding: 20px 0;
}
.blogs-homepage h2 {
  text-align: center;
  padding: 0;
}

.hero-slide__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--color-second);
  font-size: 13px;
  letter-spacing: 0.3em;
  font-weight: 500;
}
.hero-slide__eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--color-second);
}

.hero-slide__title {
  margin: 0;
  font-family: var(--font-secondary), Georgia, serif;
  font-weight: 500;
  font-size: 76px;
  line-height: 1.04;
  color: #fff;
  max-width: 640px;
  text-wrap: balance;
}

.hero-slide__quote {
  margin: 28px 0 0;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 480px;
  font-weight: 300;
}

.hero-slider .splide__arrow {
  width: 48px;
  height: 48px;
  opacity: 1;
  background: transparent;
  border-radius: 0;
  border: solid 1px var(--color-white);
}
.hero-slider .splide__arrow.splide__arrow--prev {
  left: auto;
  right: 100px;
  top: auto;
  bottom: -10px;
}
.hero-slider .splide__arrow.splide__arrow--next {
  left: auto;
  right: 40px;
  top: auto;
  bottom: -10px;
}

.hero-slider .splide__arrow svg {
  fill: var(--color-white);
}

.hero-slider .splide__pagination__page {
  width: 18px;
  height: 3px;
  background: var(--color-white);
  border-radius: 0;
}

.splide__pagination-holder {
  position: relative;
  height: 30px;
}

.hero-slider .splide__pagination__page.is-active {
  width: 36px;
  background: var(--color-second);
}

@media (max-width: 991px) {
  .hero-slide {
    min-height: 460px;
  }
  .hero-slide__content {
    padding: 60px 32px;
  }
  .hero-slide__title {
    font-size: 36px;
  }
  .hero-slide__quote {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .hero-slide {
    min-height: 400px;
    align-items: center;
  }
  .hero-slide__content {
    padding: 32px 20px 100px;
  }
  .hero-slide__title {
    font-size: 28px;
  }
  .hero-slide__quote {
    font-size: 16px;
  }
}
.footer {
  background: var(--ink-deeper);
  color: rgba(255, 255, 255, 0.75);
}
.footer__top {
  padding-top: 76px;
}
.footer__content {
  padding: var(--padding-inline) 0 var(--padding-inline);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 56px;
}
@media (max-width: 767.98px) {
  .footer__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 40px;
  }
  .footer__content .footer__logo {
    grid-column: 1/-1;
  }
  .footer__content .footer__address:last-child {
    grid-column: 1/-1;
  }
}
.footer__content h3 {
  font-size: 1.125rem;
  font-weight: var(--font-weight-semi-bold);
}
.footer__logo {
  justify-content: center;
  align-items: end;
  position: relative;
}
.footer__logo-link {
  grid-column: 1/2;
  grid-row: 2/3;
  z-index: 20;
}
.footer__logo-logo {
  max-height: clamp(50px, 5vw + 0.5rem, 56px);
}
.footer__tagline {
  margin: 0 0 24px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  max-width: 300px;
}
.footer__contact {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--footer-gap);
}
@media (max-width: 767.98px) {
  .footer__contact {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}
@media (max-width: 767.98px) {
  .footer__address {
    max-width: none;
  }
}
.footer__address h4, .footer__address .h4spacer {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
}
.footer__address ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__address ul li {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
}
.footer__address ul li a {
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
}
.footer__address ul li a:hover {
  color: var(--color-white);
}
.footer__address ul li a .ext {
  color: var(--accent);
  font-size: 0.75rem;
}
.footer__address-spacer {
  margin-top: var(--footer-spacer);
}
.footer__social {
  grid-area: social;
}
@media (max-width: 767.98px) {
  .footer__social {
    order: 2;
    align-items: end;
  }
}
.footer__social-items {
  list-style: none;
  display: flex;
  justify-content: end;
  margin: 0;
  padding: 0;
  gap: 10px;
}
@media (max-width: 767.98px) {
  .footer__social-items {
    align-items: end;
  }
}
.footer__social-box {
  background-color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  aspect-ratio: 1/1;
  width: var(--icon-size-large-size);
  height: var(--icon-size-large);
}
.footer__social-box a {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
}
.footer__social-box svg {
  font-size: 1.8rem;
  color: var(--color-white);
}
.footer__social-box:hover {
  filter: brightness(1.5);
}
.bottom__content {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 1fr;
  gap: var(--padding-inline);
  align-items: center;
}
@media (max-width: 767.98px) {
  .bottom__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    order: 1;
    align-items: unset;
  }
}
.bottom__copyright {
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.875rem;
}
@media (max-width: 767.98px) {
  .bottom__copyright {
    order: 3;
  }
}
.bottom__navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  margin: 0;
  padding: 0;
}
.bottom__navigation-item {
  white-space: nowrap;
}
.bottom__navigation-item a {
  font-size: 0.875rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}
.bottom__navigation-item a:hover {
  color: var(--color-white);
}
.bottom__navigation-item::after {
  content: "-";
  color: var(--color-white);
  margin: 0 10px;
}
.bottom__navigation-item:last-child::after {
  display: none;
}
@media (max-width: 767.98px) {
  .bottom__navigation {
    justify-content: flex-start;
  }
}
.bottom h3 {
  font-size: 1.125rem;
  font-weight: var(--font-weight-semi-bold);
}

.contact__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.contact__item a {
  text-decoration: none;
  color: var(--color-white);
}
.contact__image {
  display: flex;
  justify-content: center;
  text-align: center;
}
.contact__image img {
  border-radius: 999px;
  aspect-ratio: 1/1;
  width: 120px;
  height: 120px;
  object-fit: cover;
  object-position: top;
}
.contact__name {
  font-size: 1.25rem;
  color: var(--color-white);
  font-weight: var(--font-weight-semi-bold);
  padding: 10px 0;
}
.contact__follow {
  display: flex;
  flex-direction: row;
  margin-top: var(--padding-small);
  gap: var(--icon-gap);
  padding-bottom: var(--padding-small);
}
.contact__follow li {
  display: inline-flex;
}
.contact__box {
  background-color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  aspect-ratio: 1/1;
  width: var(--icon-size);
  height: var(--icon-size);
}
.contact__box a {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.contact__box svg {
  font-size: 1.5rem;
  color: var(--color-first);
}
.contact__box :hover {
  background-color: var(--color-first);
}
.contact__box :hover svg {
  font-size: 1.5rem;
  color: var(--color-white);
}

/* Social media background color helpers */
.color-phone {
  background-color: var(--color-second);
}

.color-email {
  background-color: var(--color-first);
}

.color-facebook {
  background-color: var(--color-facebook);
}

.color-twitter {
  background-color: var(--color-twitter);
}

.color-youtube {
  background-color: var(--color-youtube);
}

.color-linkedin-in {
  background-color: var(--color-linkedin-in);
}

.color-pinterest {
  background-color: var(--color-pinterest);
}

.color-instagram {
  background-color: var(--color-instagram);
}

.color-whatsapp {
  background-color: var(--color-whatsapp);
}

.color-facebook-messenger {
  background-color: var(--color-facebook-messenger);
}

.contactform__form input, .contactform__form textarea {
  border: none;
  background-image: none;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.contactform__form input, .contactform__form textarea {
  font-size: 1rem;
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  border: solid 1px var(--color-second);
}
.contactform__form form ::-webkit-input-placeholder {
  color: var(--color-black);
}
.contactform__form form :-moz-placeholder {
  color: var(--color-black);
}
.contactform__form form {
  display: flex;
  flex-direction: column;
}
.contactform__form .input-field {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-size: 1rem;
  width: 100%;
  max-width: 360px;
  color: var(--color-second);
  border: solid 1px var(--color-second);
  border-radius: 3px;
  display: block;
  padding: 10px 20px;
  background-color: var(--color-white);
  margin-bottom: 20px;
}
.contactform__form .form__group {
  display: flex;
  flex-direction: column;
}
.contactform__form .form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
@media (max-width: 767.98px) {
  .contactform__form .form {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}
.contactform__form .form__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.contactform__form .form__item > label {
  font-size: 1rem;
  color: var(--color-first);
  font-weight: var(--font-weight-light);
}
.contactform__form .form__item .form__input {
  color: var(--color-black);
  padding: 10px;
  background-color: var(--color-white);
  border: solid 1px var(--color-grey-73);
}
.contactform__form .form__item .form__input.error {
  border: solid 1px var(--color-error);
  background-color: var(--color-error-bg);
}
.contactform__form .form__item-checkbox {
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-rows: 1fr;
  font-size: 1rem;
  gap: 10px;
  align-items: start;
  color: var(--color-first);
  font-weight: var(--font-weight-light);
}
.contactform__form .form__item-checkbox .form__checkbox {
  margin-top: 5px;
}
.contactform__form .form__item-button {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: flex-end;
}
.contactform__form .form__item-button .btn__form {
  border: solid 1px transparent;
  color: var(--color-second);
  background-color: transparent;
  padding: 0;
  cursor: pointer;
}
.contactform__form .form__item-button .btn__form i {
  margin-left: 10px;
}
.contactform__form .form__holder {
  padding: 30px;
}
.contactform__form .form__holder .form__top {
  padding: 30px 0;
  display: flex;
  justify-content: flex-end;
}
.contactform__form .form__holder .form__top strong {
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  margin-right: 5px;
}
.contactform__form .form__holder .form__bottom {
  padding: 20px 0;
  display: flex;
  justify-content: flex-end;
}
.contactform__form .form__holder .form__bottom strong {
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  margin-right: 5px;
}
.contactform__form .form__holder .form__split {
  display: flex;
  flex-direction: column;
}
.contactform__form .form__holder .form__split .form__left {
  width: 100%;
}
.contactform__form .form__holder .form__split .form__right {
  width: 100%;
}
.contactform__form .alert {
  padding: 20px;
  font-size: 1rem;
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  margin-bottom: 30px;
  background-color: var(--color-second);
  color: var(--color-white);
}
.contactform__form .alert.alert-danger {
  border: solid 1px var(--color-error);
  background-color: var(--color-error-bg);
  color: var(--color-error);
}
.contactform__form .alert.alert-success {
  border: solid 1px var(--color-success);
  background-color: var(--color-success-bg);
  color: var(--color-succes);
}
.contactform__form .login__form .form__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.contactform__form .login__form .form__item > label {
  font-size: 0.75rem;
}
.contactform__form .login__form .form__item .form__input {
  color: var(--color-black);
  padding: 5px 0;
  border-bottom: solid 1px var(--color-black);
}
.contactform__form .login__form .form__item .form__input.error {
  border-bottom: solid 1px var(--color-error);
  background-color: var(--color-error-bg);
}
@media only screen and (min-width: 769px) {
  .contactform__form .form__group {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .contactform__form .form__group .newsletter__input {
    margin-left: 15px;
    margin-right: 15px;
  }
  .contactform__form .form__group .newsletter__input:first-child {
    margin-left: 0;
  }
  .contactform__form .form__group .newsletter__input:last-child {
    margin-right: 0;
  }
  .contactform__form .form__holder {
    padding: 30px 0 60px;
  }
  .contactform__form .form__holder.form__api {
    padding: 100px 0;
  }
  .contactform__form .form__holder .form__top {
    padding: 30px 0;
    display: flex;
    justify-content: flex-end;
  }
  .contactform__form .form__holder .form__bottom {
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
  }
  .contactform__form .form__holder .form__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
  }
  .contactform__form .form__holder .form__split .form__left {
    grid-column: 1/2;
    grid-row: 1;
    width: 100%;
  }
  .contactform__form .form__holder .form__split .form__right {
    grid-column: 2/-1;
    grid-row: 1;
    width: 100%;
  }
}

.blocks__header {
  margin-top: var(--inline-gap);
}
.blocks__item {
  display: flex;
  flex-direction: column;
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-first);
  margin-top: var(--inline-gap);
  border: solid 1px var(--color-white);
  text-align: center;
}
.blocks__item h2 {
  text-align: center;
  color: var(--color-white);
}
.blocks__item a {
  color: var(--color-white);
  text-decoration: none;
}
.blocks__item img {
  height: 50px;
  width: auto;
}
.blocks__item img.link__light {
  display: block;
}
.blocks__item img.link__dark {
  display: none;
}
.blocks__item:hover {
  background-color: var(--color-white);
  color: var(--color-button);
  border: solid 1px var(--color-button);
}
.blocks__item:hover h2 {
  color: var(--color-button);
}
.blocks__item:hover img.link__light {
  display: none;
}
.blocks__item:hover img.link__dark {
  display: block;
}
.blocks__item:hover a {
  color: var(--color-button);
}
.blocks__item-icon {
  font-size: 3rem;
  margin-top: var(--inline-gap);
}

.alert {
  padding: 20px;
  font-size: 1rem;
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  margin-bottom: 30px;
  background-color: var(--color-second);
  color: var(--color-white);
}
.alert.alert-danger {
  border: solid 1px var(--color-error);
  background-color: var(--color-error-bg);
  color: var(--color-error);
}
.alert.alert-success {
  border: solid 1px var(--color-success);
  background-color: var(--color-success-bg);
  color: var(--color-succes);
}

.contact__address {
  box-shadow: var(--box-shadow);
  padding: 30px;
}
.contact__address-item ul {
  list-style: none;
}
.contact__address-item h4 {
  margin-top: 20px;
}
.contact__address-item a {
  text-decoration: none;
  color: var(--color-first);
}
.contact__address-spacer {
  margin-top: 20px;
}

.blog-top__grid {
  display: grid;
  grid-template-columns: 0.6fr 0.4fr;
  grid-template-rows: auto;
  grid-gap: 30px;
  padding: 20px;
}
@media (max-width: 767.98px) {
  .blog-top__grid {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
}
.blog-top__related h2 {
  margin-top: 0;
}
.blog-featured {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 10px;
  box-shadow: var(--box-shadow);
}
.blog-featured time {
  padding: 0 20px;
  font-size: 0.875rem;
}
.blog-featured .img__fluid {
  width: 100%;
  object-fit: cover;
  max-height: 300px;
}
.blog-featured h2 {
  padding: 0 20px;
}
.blog-featured h2 a {
  text-decoration: none;
  font-family: var(--font-secondary), Georgia, serif;
  color: var(--color-black);
  padding: 0;
  font-weight: var(--font-weight-semi-bold);
  font-size: clamp(1.75rem, 5vw + 0.5rem, 2.375rem);
  text-align: left;
  text-wrap: balance;
  line-height: 1.2;
}
.blog-related {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.blog-related-item {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
  box-shadow: var(--box-shadow);
  margin-bottom: 20px;
}
.blog-related-item__category {
  margin-bottom: 10px;
}
.blog-related-item__category a {
  border: solid 1px var(--color-grey-second);
  border-radius: 10px;
  padding: 3px 5px;
  text-decoration: none;
  font-size: 0.5rem;
}
.blog-related-item__category a:hover {
  background-color: var(--color-first);
  color: var(--color-white);
}
.blog-related-item h3 {
  line-height: 1;
  margin: 0;
}
.blog-related-item h3 a {
  line-height: 1.2;
  text-decoration: none;
  font-size: clamp(0.875rem, 5vw + 0.5rem, 1rem);
  font-weight: var(--font-weight-semi-bold);
  text-wrap: balance;
}
.blog-related-button {
  display: flex;
  justify-content: end;
  padding: 10px;
}
.blog-related-button .blog__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-black);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  content: "\f054";
}
.blog-related-select {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  grid-template-rows: auto;
  grid-gap: 30px;
}
.blog__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-template-rows: auto;
  grid-gap: 30px;
  list-style: none;
  margin: 0;
  padding: 30px;
}
@media (max-width: 767.98px) {
  .blog__list {
    padding: 0;
  }
}
.blog__item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: subgrid;
  grid-row: span 6;
  gap: 10px;
  box-shadow: var(--box-shadow);
  transition: all 0.5s ease-in-out;
}
.blog__item:hover {
  transform: scale(1.05);
}
.blog__item time {
  padding: 0 20px;
  font-size: 0.875rem;
}
.blog__item h2, .blog__item h3 {
  padding: 0 20px;
  line-height: 1;
}
.blog__item h2 a, .blog__item h3 a {
  text-decoration: none;
  font-family: var(--font-secondary), Georgia, serif;
  color: var(--color-black);
  padding: 0;
  font-weight: var(--font-weight-semi-bold);
  font-size: clamp(1.25rem, 5vw + 0.5rem, 1.625rem);
  text-align: left;
  text-wrap: balance;
  line-height: 1;
}
.blog__category {
  padding: 0 20px;
}
.blog__category a {
  border: solid 1px var(--color-grey-second);
  border-radius: 10px;
  padding: 3px 5px;
  text-decoration: none;
  font-size: 0.875rem;
}
.blog__category a:hover {
  background-color: var(--color-first);
  color: var(--color-white);
}
.blog__summary {
  color: var(--color-text-default);
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: var(--font-weight-light);
  padding: 0 20px;
}
.blog__button {
  display: flex;
  padding: 0 20px 20px;
  justify-content: end;
}
.blog__button .blog__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-black);
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  content: "\f054";
}
.blog__button:hover .blog__go {
  color: var(--color-first);
}
.blog__published {
  font-weight: var(--font-weight-semi-bold);
  font-size: 2rem;
}
@media (max-width: 767.98px) {
  .blog__paging {
    padding: 0 20px;
  }
}
.blog__paging ul {
  display: flex;
  list-style: none;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
}
.blog__paging ul li {
  display: inline-block;
}
.blog__paging ul li a {
  color: var(--color-white);
  background-color: var(--color-first);
  border: solid 1px var(--color-first);
  text-decoration: none;
  font-weight: var(--font-weight-regular);
  font-family: var(--font-primary), Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  padding: 0 5px;
}
.blog__paging ul li a:visited, .blog__paging ul li a.active, .blog__paging ul li a.focus, .blog__paging ul li a:active, .blog__paging ul li a:focus {
  color: var(--color-white);
  border: solid 1px var(--color-first);
}
.blog__paging ul li a:hover {
  color: var(--color-first);
  background-color: var(--color-white);
  border: solid 1px var(--color-grey-55);
}
.blog-header__grid {
  display: grid;
  grid-template-columns: 0.6fr 0.4fr;
  grid-template-rows: 1fr auto;
  gap: 30px;
  padding: 30px 0 0 0;
}
@media (max-width: 768px) {
  .blog-header__grid {
    display: flex;
    flex-direction: column;
  }
}
.blog-header__image {
  grid-column: 1/2;
  grid-row: 1/2;
}
.blog-header__image img {
  object-fit: cover;
  aspect-ratio: 16/9;
  width: 100%;
}
.blog-header__content {
  grid-column: 2/-1;
  grid-row: 1/2;
}
.blog-header__intro {
  grid-column: 1/-1;
  grid-row: 2/-1;
  font-weight: var(--font-weight-semi-bold);
  font-style: italic;
  font-size: 1.125rem;
}
.blog-header__category {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.blog-header__category a {
  border: solid 1px var(--color-grey-second);
  border-radius: 10px;
  padding: 3px 5px;
  text-decoration: none;
  font-size: 0.875rem;
}
.blog-header__category a:hover {
  background-color: var(--color-first);
  color: var(--color-white);
}
.blog__source {
  font-style: italic;
  padding: 0 0 30px;
  color: var(--color-first);
  font-weight: var(--font-weight-light);
}

.js-blog-overview.is-loading .js-blog-results {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

time {
  font-weight: var(--font-weight-light);
  color: var(--color-grey-second);
}

.btn-filter .btn {
  border-radius: 999px;
  border-color: var(--color-first);
  text-decoration: none;
  color: var(--color-first);
  font-weight: var(--font-weight-regular);
}
.btn-filter .btn.filter-active {
  background-color: var(--color-first);
  color: var(--color-white);
}
@media (max-width: 768px) {
  .btn-filter {
    display: flex;
    justify-content: stretch;
    width: 100%;
  }
  .btn-filter .btn {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

.filter__holder {
  background-color: var(--color-grey-first);
  padding: 20px 0;
}
.filter__row {
  display: flex;
  padding: 0 30px;
  align-items: center;
  gap: 20px;
}
@media (max-width: 768px) {
  .filter__row {
    flex-direction: column;
    gap: 10px;
  }
}
.filter__item {
  padding: 5px 10px;
  border: solid 1px var(--color-grey-55);
  cursor: pointer;
}

.js-blog-overview {
  margin-bottom: 60px;
}

.pagination {
  margin-top: 32px;
}
.pagination__inner {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}
@media (max-width: 768px) {
  .pagination__inner {
    display: flex;
    flex-direction: column;
  }
}
.pagination__info {
  grid-column: 3/-1;
  font-size: 14px;
  color: var(--color-grey-second);
  white-space: nowrap;
}
.pagination__list {
  grid-column: 2/3;
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination__item {
  display: flex;
}
.pagination__item.is-active .pagination__link {
  background-color: var(--color-first);
  color: var(--color-white);
  border-color: var(--color-first);
  pointer-events: none;
}
.pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-grey-second);
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pagination__link:hover {
  background-color: var(--color-grey-first);
  color: var(--color-black);
  border-color: var(--color-grey-first);
  transform: translateY(-2px);
}
.pagination__link--prev, .pagination__link--next {
  width: auto;
  padding: 0 16px;
  border-radius: 999px;
}

@media (max-width: 768px) {
  .pagination__link {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
}
.search__results {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 767px) {
  .search__results {
    padding: 20px 0;
    gap: 10px;
  }
}
.search__article {
  background-color: var(--color-white);
  padding: 10px;
  border-radius: 20px;
}
.search__article h3 {
  line-height: 1;
}
.search__article h3 a {
  color: var(--color-first);
  font-weight: var(--font-weight-semi-bold);
  font-size: clamp(1.25rem, 5vw + 0.5rem, 1.625rem);
  text-decoration: none;
  line-height: 1;
}
.search__info {
  background-color: var(--color-first);
  color: var(--color-white);
  border-radius: 20px;
  padding: 20px;
}
.search__info .simplesearch-highlight {
  font-size: 1.125rem;
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-white);
}

/* ============================================================
   ABLD.eu — gedeelde stylesheet (responsive, mobile-first)
   ============================================================ */
:root {
  /* De overige tokens (--ink, --accent, --serif, …) komen uit _variables.scss.
     --bg heeft daar geen tegenhanger, maar wordt hier op negen plekken gebruikt
     (o.a. .pullquote, .section-tint en de inhoudsopgave). */
  --bg: var(--paper);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink-dark);
  /* Standaard wit; --bg blijft de lichte tint voor vlakken als .section-tint en .pullquote. */
  background: var(--color-white, #fff);
  -webkit-font-smoothing: antialiased;
}

.base {
  background-color: var(--color-white);
}

html {
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
}

a {
  color: var(--ink-dark);
}

a:hover {
  color: var(--muted);
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ TOP BAR ============ */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.topbar .container {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-contact {
  display: flex;
  gap: 24px;
  align-items: center;
}

.topbar a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar a:hover {
  color: #fff;
}

.topbar .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.topbar-mail {
  display: none;
}

.topbar-lang {
  display: flex;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.topbar-lang a {
  color: rgba(255, 255, 255, 0.55);
}

.topbar-lang a.active {
  color: #fff;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

/* ============ HEADER ============ */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 80;
}

.site-header .container {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  width: 140px;
  height: 44px;
  object-fit: contain;
  object-position: 0 50%;
  display: block;
}

/* hamburger (mobiel) */
.nav-toggle {
  width: 46px;
  height: 46px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle .icon-close {
  display: none;
}

.menu-open .nav-toggle .icon-open {
  display: none;
}

.menu-open .nav-toggle .icon-close {
  display: block;
}

/* mobiel uitklapmenu */
.main-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 2px solid var(--accent);
  box-shadow: 0 24px 48px rgba(10, 60, 66, 0.18);
  flex-direction: column;
  padding: 8px 0 20px;
}

.menu-open .main-nav {
  display: flex;
}

.main-nav > a,
.main-nav .nav-group > a {
  padding: 15px 24px;
  color: var(--nav);
  text-decoration: none;
  font-size: 17px;
  border-bottom: 1px solid rgba(10, 60, 66, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-nav a.active {
  color: var(--ink);
}

.main-nav a.active::after {
  content: "→";
  color: var(--accent);
}

.main-nav .dropdown {
  display: contents;
}

.main-nav .dropdown a {
  padding: 15px 24px 15px 40px;
  color: var(--nav);
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1px solid rgba(10, 60, 66, 0.07);
  display: block;
}

.main-nav .nav-caret {
  display: none;
}

.nav-contact-wrap {
  padding: 20px 24px 0;
}

.nav-contact {
  display: block;
  text-align: center;
  padding: 14px 24px;
  border: 1px solid var(--ink);
  color: var(--ink) !important;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.nav-contact:hover {
  background: var(--ink-dark);
  color: #fff !important;
}

/* desktop navigatie */
@media (min-width: 960px) {
  .container {
    padding: 0 32px;
  }
  .topbar {
    font-size: 13px;
  }
  .topbar .container {
    height: 42px;
  }
  .topbar-mail {
    display: inline-flex;
  }
  .topbar-lang {
    font-size: 12px;
    gap: 16px;
  }
  .site-header .container {
    height: 92px;
  }
  .logo img {
    width: 190px;
    height: 60px;
  }
  .nav-toggle {
    display: none;
  }
  .main-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 15px;
  }
  .main-nav > a,
  .main-nav .nav-group > a {
    padding: 10px 14px;
    font-size: 15px;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    gap: 6px;
  }
  .main-nav > a:hover, .main-nav .nav-group > a:hover {
    color: var(--ink-dark);
  }
  .main-nav a.active {
    border-bottom: 2px solid var(--accent);
  }
  .main-nav a.active::after {
    content: none;
  }
  .main-nav .nav-caret {
    display: inline;
    font-size: 9px;
    opacity: 0.6;
  }
  .main-nav .nav-group {
    position: relative;
  }
  .main-nav .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 12px 32px rgba(10, 60, 66, 0.14);
    border-top: 2px solid var(--accent);
    min-width: 200px;
    padding: 8px 0;
    z-index: 50;
  }
  .main-nav .nav-group:hover .dropdown {
    display: block;
  }
  .main-nav .dropdown a {
    padding: 10px 18px;
    font-size: 14px;
    border: none;
  }
  .main-nav .dropdown a:hover {
    background: var(--bg);
    color: var(--ink-dark);
  }
  .nav-contact-wrap {
    padding: 0;
    margin-left: 14px;
  }
  .nav-contact {
    padding: 11px 24px;
    font-size: 15px;
  }
}
/* ============ HERO (Splide slider) ============ */
.hero-slider {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: var(--ink);
}

.hero-slider .splide__track,
.hero-slider .splide__list {
  height: 100%;
}

.hero-slide {
  position: relative;
  height: 100%;
}

.hero-slide__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ken Burns alleen op de actieve slide */
.hero-slider .splide__slide.is-active .hero-slide__image {
  animation: heroKen 9s ease-out both;
}

@keyframes heroKen {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}
.hero-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 40, 45, 0.3) 0%, rgba(5, 40, 45, 0.55) 55%, rgba(5, 40, 45, 0.92) 100%);
}

.hero-slide__content {
  position: relative;
  z-index: 5;
  height: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-slide__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.26em;
  font-weight: 500;
  text-transform: uppercase;
}

.hero-slide__eyebrow::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--accent);
}

.hero-slide__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.06;
  color: #fff;
  text-wrap: balance;
  max-width: 640px;
}

.hero-slide__quote {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 300;
  max-width: 480px;
}

/* Tekst rustig laten inkomen bij de actieve slide */
.hero-slider .splide__slide.is-active .hero-slide__eyebrow {
  animation: heroRise 0.7s ease both;
}

.hero-slider .splide__slide.is-active .hero-slide__title {
  animation: heroRise 0.7s 0.08s ease both;
}

.hero-slider .splide__slide.is-active .hero-slide__quote {
  animation: heroRise 0.7s 0.16s ease both;
}

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ---- Splide besturing in design-stijl ---- */
/* Pijlen rechtsonder, uitgelijnd op de container */
.hero-slider .splide__arrows {
  position: absolute;
  z-index: 6;
  bottom: 28px;
  right: max(24px, (100% - 1240px) / 2 + 24px);
  display: flex;
  gap: 8px;
}

.hero-slider .splide__arrow {
  position: static;
  transform: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  background: transparent;
  opacity: 1;
}

.hero-slider .splide__arrow svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.hero-slider .splide__arrow:hover {
  background: rgba(255, 255, 255, 0.14);
}

.hero-slider .splide__arrow:disabled {
  opacity: 0.35;
}

/* Paginering (dots) linksonder */
.hero-slider .splide__pagination {
  position: absolute;
  z-index: 6;
  bottom: 28px;
  left: max(24px, (100% - 1240px) / 2 + 24px);
  right: auto;
  height: 44px;
  padding: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero-slider .splide__pagination__page {
  width: 16px;
  height: 3px;
  margin: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
  transform: none;
  transition: all 0.4s ease;
}

.hero-slider .splide__pagination__page.is-active {
  width: 32px;
  background: var(--accent);
  transform: none;
}

@media (min-width: 960px) {
  .hero-slider {
    height: 640px;
  }
  .hero-slide__content {
    justify-content: center;
    padding: 0 32px;
  }
  .hero-slide__title {
    font-size: 76px;
    line-height: 1.04;
  }
  .hero-slide__quote {
    margin-top: 28px;
    font-size: 20px;
  }
  .hero-layer {
    background: linear-gradient(78deg, rgba(5, 40, 45, 0.88) 0%, rgba(5, 40, 45, 0.55) 44%, rgba(5, 40, 45, 0.08) 75%);
  }
  .hero-slide__eyebrow {
    gap: 14px;
    margin-bottom: 22px;
    font-size: 13px;
    letter-spacing: 0.3em;
  }
  .hero-slide__eyebrow::before {
    width: 44px;
  }
  .hero-slider .splide__arrows {
    bottom: 36px;
    right: max(32px, (100% - 1240px) / 2 + 32px);
  }
  .hero-slider .splide__arrow {
    width: 46px;
    height: 46px;
  }
  .hero-slider .splide__pagination {
    bottom: 36px;
    left: max(32px, (100% - 1240px) / 2 + 32px);
  }
}
/* ============ KICKER / EYEBROW ============ */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.kicker::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--accent);
}

.kicker span {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.26em;
  font-weight: 500;
}

@media (min-width: 960px) {
  .kicker {
    gap: 14px;
    margin-bottom: 22px;
  }
  .kicker::before {
    width: 44px;
  }
  .kicker span {
    font-size: 13px;
    letter-spacing: 0.3em;
  }
}
/* ============ SECTIES ALGEMEEN ============ */
.section {
  padding: 56px 0 64px;
}

.section-white {
  background: #fff;
}

.section-tint {
  background: var(--bg);
  border-top: 1px solid rgba(10, 60, 66, 0.08);
}

.section h2.section-title {
  margin: 0 0 32px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  color: var(--ink-dark);
}

@media (min-width: 960px) {
  .section {
    padding: 96px 0 104px;
  }
  .section h2.section-title {
    font-size: 40px;
    margin-bottom: 52px;
  }
}
/* ============ WELCOME (homepage) ============ */
.welcome h1 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.12;
  color: var(--ink-dark);
  text-wrap: balance;
}

.welcome .lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  font-weight: 300;
}

.welcome .sub {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* De aanvullende tekst komt uit het content-veld en bestaat dus uit meerdere alinea's. */
.welcome .sub p {
  margin: 0 0 12px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.welcome .sub p:last-child {
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .welcome .container {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 90px;
    align-items: start;
  }
  .welcome h1 {
    font-size: 52px;
    line-height: 1.1;
    margin-bottom: 0;
  }
  .welcome-text {
    padding-top: 46px;
  }
  .welcome .lead {
    font-size: 20px;
  }
  .welcome .sub {
    margin-top: 24px;
    font-size: 17px;
  }
}
/* ============ WHY CHOOSE ============ */
.reasons {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(10, 60, 66, 0.14);
}

.reasons a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(10, 60, 66, 0.14);
  text-decoration: none;
  transition: background 0.25s ease;
}

.reasons a:hover {
  background: rgba(151, 194, 63, 0.1);
}

/* De nummering wordt geteld door CSS, zodat de chunk alleen de titel hoeft te leveren. */
.reasons {
  counter-reset: reason;
}

.reasons a {
  counter-increment: reason;
}

.reasons .num:empty::before {
  content: "Nº " counter(reason);
}

.reasons .num {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--accent);
  flex: none;
  width: 48px;
}

.reasons .label {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-dark);
  text-wrap: pretty;
}

@media (min-width: 960px) {
  .reasons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: none;
    border-left: 1px solid rgba(10, 60, 66, 0.14);
  }
  .reasons a {
    flex-direction: column;
    align-items: stretch;
    gap: 44px;
    padding: 6px 26px 10px;
    border-bottom: none;
    border-right: 1px solid rgba(10, 60, 66, 0.14);
  }
  .reasons .num {
    font-size: 20px;
    width: auto;
  }
  .reasons .label {
    font-size: 18px;
  }
}
/* ============ CTA ============ */
.cta {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: 56px 0;
}

.cta::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.cta .container {
  position: relative;
}

.cta h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.14;
  color: #fff;
  text-wrap: balance;
}

.cta .cta-sub {
  margin: 12px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.btn-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  background: var(--accent);
  color: var(--deep) !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.03em;
  border: none;
  cursor: pointer;
}

.btn-accent:hover {
  filter: brightness(1.08);
}

.btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff !important;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.03em;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 960px) {
  .cta {
    padding: 92px 0;
  }
  .cta::before {
    right: -60px;
    top: -120px;
    width: 420px;
    height: 420px;
  }
  .cta .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
  }
  .cta h2 {
    font-size: 46px;
    line-height: 1.12;
  }
  .cta-buttons {
    flex-direction: row;
    gap: 16px;
    margin-top: 0;
    flex: none;
  }
  .btn-accent, .btn-ghost {
    padding: 17px 32px;
  }
}
/* ============ BLOG CARDS ============ */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.section-head h2 {
  margin: 0;
}

.link-underline {
  color: var(--ink-dark);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  white-space: nowrap;
}

.link-underline:hover {
  color: var(--muted);
}

.blog-grid {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.blog-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.blog-card img.thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  flex-wrap: wrap;
}

.blog-meta .date {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 500;
}

.blog-meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(10, 60, 66, 0.3);
}

.blog-meta .tags {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.blog-card h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink-dark);
  text-wrap: balance;
}

.blog-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

/* De hele kaart is klikbaar via de titel-link, zonder de kaart zelf een <a> te maken:
   de categorieën bevatten al links en een link in een link is ongeldige HTML. */
.blog-card h3 a {
  color: inherit;
  text-decoration: none;
}

.blog-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blog-card:hover h3 a {
  color: var(--ink);
}

.blog-card .blog-meta {
  position: relative;
  z-index: 2;
}

.blog-card .blog-meta a {
  color: inherit;
  text-decoration: none;
}

.blog-card .blog-meta a:hover {
  color: var(--ink-dark);
  text-decoration: underline;
}

.read-more {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-dark);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.read-more:hover {
  color: var(--accent);
}

.read-more::after {
  content: "→";
  color: var(--accent);
}

.kd-card__links .read-more-link {
  font-size: 16px;
  color: var(--ink-dark);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.kd-card__links .read-more-link:hover {
  color: var(--accent);
}

.kd-card__links .read-more-link::after {
  content: "→";
  color: var(--accent);
}

@media (min-width: 960px) {
  .section-head {
    margin-bottom: 52px;
  }
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .blog-card img.thumb {
    height: 230px;
  }
  .blog-card h3 {
    font-size: 26px;
  }
}
/* ============ PAGE BANNER (subpagina's) ============ */
.page-banner {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: var(--ink);
}

.page-banner img.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 40, 45, 0.45) 0%, rgba(5, 40, 45, 0.88) 100%);
}

.page-banner .container {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 28px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.65);
}

.breadcrumb .sep {
  color: var(--accent);
}

/* Links in de breadcrumb volgen de kleur van de balk; zonder dit pakken ze de donkere
   standaard linkkleur en zijn ze onleesbaar op de banner. */
.breadcrumb a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #fff;
}

.breadcrumb .current {
  color: #fff;
}

.page-banner h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
}

@media (min-width: 960px) {
  .page-banner {
    height: 320px;
  }
  .page-banner::after {
    background: linear-gradient(78deg, rgba(5, 40, 45, 0.9) 0%, rgba(5, 40, 45, 0.55) 48%, rgba(5, 40, 45, 0.12) 80%);
  }
  .page-banner .container {
    justify-content: center;
    padding-bottom: 0;
  }
  .breadcrumb {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .page-banner h1 {
    font-size: 60px;
    line-height: 1.06;
  }
}
/* ============ ABOUT: rijen met kop + tekst ============ */
.about-row {
  padding: 40px 0;
  border-bottom: 1px solid rgba(10, 60, 66, 0.1);
}

.about-row:first-child {
  padding-top: 0;
}

.about-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.about-row h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink-dark);
  text-wrap: balance;
}

.about-row p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

.about-row p:last-child {
  margin-bottom: 0;
}

.about-row p.muted {
  color: var(--muted);
  font-size: 15px;
}

@media (min-width: 960px) {
  .about-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 90px;
    padding: 64px 0;
  }
  .about-row h2 {
    font-size: 34px;
    line-height: 1.18;
    margin-bottom: 0;
  }
  .about-row .about-body {
    max-width: 680px;
  }
  .about-row p {
    font-size: 18px;
    line-height: 1.75;
  }
  .about-row p.muted {
    font-size: 17px;
  }
}
/* ============ PROFIEL (about me) ============ */
.profile h2 {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.14;
  color: var(--ink-dark);
  text-wrap: balance;
}

.portrait-frame {
  position: relative;
  margin-bottom: 36px;
}

.portrait-frame::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  right: -12px;
  bottom: -12px;
  border: 1px solid var(--accent);
  pointer-events: none;
}

.portrait-frame img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  position: relative;
}

.profile .lead {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  font-weight: 300;
}

.profile .sub {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border: 1px solid var(--ink);
  color: var(--ink) !important;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.04em;
  background: none;
  cursor: pointer;
}

.btn-outline:hover {
  background: var(--ink-dark);
  color: #fff !important;
}

.btn-outline .ext {
  color: var(--accent);
}

@media (min-width: 960px) {
  .profile .container {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 90px;
    align-items: start;
  }
  .profile h2 {
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 36px;
  }
  .portrait-frame {
    margin-bottom: 0;
  }
  .portrait-frame::after {
    top: 24px;
    left: 24px;
    right: -24px;
    bottom: -24px;
  }
  .portrait-frame img {
    height: 520px;
  }
  .profile .lead {
    font-size: 19px;
    margin-bottom: 20px;
  }
  .profile .sub {
    font-size: 17px;
    margin-bottom: 36px;
  }
  .btn-outline {
    display: inline-flex;
    padding: 14px 28px;
  }
}
/* ============ EDUCATION ============ */
.edu-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(10, 60, 66, 0.14);
  margin-bottom: 28px;
}

.edu-list .edu-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(10, 60, 66, 0.14);
  align-items: baseline;
}

.edu-list .degree {
  font-family: var(--serif);
  font-size: 21px;
  font-style: italic;
  color: var(--accent);
}

.edu-list .study {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

.edu-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

@media (min-width: 960px) {
  .education .container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 90px;
  }
  .education .edu-body {
    max-width: 720px;
  }
  .edu-list .edu-row {
    grid-template-columns: 60px 1fr;
    gap: 20px;
    padding: 20px 0;
  }
  .edu-list .degree {
    font-size: 24px;
  }
  .edu-list .study {
    font-size: 17px;
  }
  .edu-note {
    font-size: 16px;
  }
}
/* ============ ARTIKEL (expertise) ============ */
.article-toc {
  /* Op mobiel geen eigen vlak: de inhoudsopgave loopt gewoon mee met de pagina. */
  background: none;
  border: none;
  padding: 24px 0 8px;
}

.article-toc h4 {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.article-toc nav {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(10, 60, 66, 0.14);
}

.article-toc nav a {
  padding: 9px 0 9px 16px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--nav);
  text-decoration: none;
  margin-left: -1px;
  border-left: 2px solid transparent;
}

.article-toc nav a:hover {
  color: var(--ink-dark);
  border-left-color: var(--accent);
}

.article h2 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.18;
  color: var(--ink-dark);
  text-wrap: balance;
}

.article .intro p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  font-weight: 300;
}

.article .intro-note {
  margin: 0 0 44px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  font-style: italic;
}

.article h3 {
  margin: 48px 0 16px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 25px;
  color: var(--ink-dark);
  scroll-margin-top: 24px;
}

.article h3:first-of-type {
  margin-top: 0;
}

.article p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

.article ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article ul li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.article ul li::before {
  content: "—";
  color: var(--accent);
  flex: none;
}

.article img.article-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  margin: 8px 0 40px;
}

.steps {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin-bottom: 24px;
}

.steps .step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.steps .step-num {
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
}

.steps strong {
  display: block;
  font-size: 16px;
  color: var(--ink-dark);
  margin-bottom: 6px;
}

.steps .step-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

.pullquote {
  border-left: 3px solid var(--accent);
  background: var(--bg);
  padding: 22px 24px;
  margin: 28px 0 48px;
}

.pullquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-dark);
  font-style: italic;
}

.img-pair {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.img-pair img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.img-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 48px;
}

.img-gallery img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.report-box {
  border: 1px solid rgba(10, 60, 66, 0.16);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-margin-top: 24px;
}

.report-box h4 {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--accent);
  font-weight: 500;
}

.report-box .report-title {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink-dark);
}

@media (min-width: 960px) {
  .article-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 90px;
    align-items: start;
  }
  /* Expliciete kolommen, zodat het artikel op zijn plek blijft ook als er geen
     inhoudsopgave is (blog zonder quicklabels) of er iets tussen staat. */
  .article-layout > .article-toc {
    grid-column: 1;
  }
  .article-layout > .article {
    grid-column: 2;
  }
  .article-layout:not(:has(> .article-toc)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .article-layout:not(:has(> .article-toc)) > .article {
    grid-column: 1;
  }
  .article-toc {
    background: none;
    border: none;
    padding: 0;
    position: sticky;
    top: 40px;
  }
  .article-toc h4 {
    font-size: 12px;
    margin-bottom: 20px;
  }
  .article-toc nav a {
    font-size: 14.5px;
    padding: 10px 0 10px 18px;
  }
  .article {
    max-width: 720px;
  }
  .article h2 {
    font-size: 42px;
    line-height: 1.14;
    margin-bottom: 28px;
  }
  .article .intro p {
    font-size: 20px;
  }
  .article .intro-note {
    font-size: 17px;
    margin-bottom: 56px;
  }
  .article h3 {
    font-size: 30px;
    margin-top: 64px;
    scroll-margin-top: 32px;
  }
  .article p {
    font-size: 17px;
  }
  .article ul li {
    font-size: 17px;
    gap: 14px;
  }
  .article img.article-img {
    height: 380px;
    margin-bottom: 64px;
  }
  .steps .step {
    grid-template-columns: 72px 1fr;
    gap: 20px;
    padding: 24px 0;
  }
  .steps .step-num {
    font-size: 34px;
  }
  .steps strong {
    font-size: 17px;
  }
  .steps .step-text {
    font-size: 16px;
  }
  .pullquote {
    padding: 26px 30px;
    margin: 32px 0 64px;
  }
  .pullquote p {
    font-size: 23px;
  }
  .img-pair {
    flex-direction: row;
    gap: 24px;
    margin-bottom: 32px;
  }
  .img-pair img {
    height: 260px;
    flex: 1;
    min-width: 0;
  }
  .img-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 64px;
  }
  .img-gallery img {
    height: 150px;
  }
  .report-box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    scroll-margin-top: 32px;
  }
  .report-box .report-title {
    font-size: 24px;
  }
  .report-box .btn-outline {
    flex: none;
  }
}
/* ============ BLOGS OVERZICHT ============ */
.featured {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
}

.featured img.thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.featured-body {
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
}

.featured .latest {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 16px;
}

.featured h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.18;
  color: var(--ink-dark);
  text-wrap: balance;
}

.featured p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tag {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--nav);
  border: 1px solid rgba(10, 60, 66, 0.18);
  padding: 5px 10px;
}

@media (min-width: 960px) {
  .featured {
    display: grid;
    grid-template-columns: 7fr 5fr;
  }
  .featured img.thumb {
    height: 420px;
  }
  .featured-body {
    padding: 48px 52px;
    justify-content: center;
  }
  .featured .latest {
    font-size: 12px;
    margin-bottom: 22px;
  }
  .featured h2 {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 18px;
  }
  .featured p {
    font-size: 16px;
    margin-bottom: 26px;
  }
  .tag {
    font-size: 12px;
    padding: 5px 12px;
  }
}
/* spotlight */
.spotlight {
  background: var(--ink);
  padding: 52px 0 56px;
}

.spotlight h2 {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  color: #fff;
}

.spotlight-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spotlight-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.25s ease;
}

.spotlight-card:hover {
  background: rgba(255, 255, 255, 0.12);
}

.spotlight-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.spotlight-card .card-body {
  padding: 20px 22px 24px;
}

.spotlight-card .card-meta {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 10px;
}

.spotlight-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.24;
  color: #fff;
  text-wrap: balance;
}

@media (min-width: 960px) {
  .spotlight {
    padding: 72px 0 80px;
  }
  .spotlight h2 {
    font-size: 36px;
    margin-bottom: 44px;
  }
  .spotlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .spotlight-card img {
    height: 180px;
  }
  .spotlight-card .card-body {
    padding: 24px 26px 28px;
  }
  .spotlight-card .card-meta {
    font-size: 12px;
    margin-bottom: 12px;
  }
  .spotlight-card h3 {
    font-size: 24px;
  }
}
/* filter chips */
.filter-row a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 32px;
}

.filter-row button,
.filter-row a {
  padding: 9px 16px;
  font-size: 13px;
  letter-spacing: 0.03em;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid rgba(10, 60, 66, 0.2);
  background: #fff;
  color: var(--nav);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: none;
}

.filter-row button.active,
.filter-row a.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

@media (min-width: 960px) {
  .blogs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 48px;
  }
  .blogs-head h2 {
    margin: 0;
  }
  .filter-row {
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 0;
    flex-wrap: wrap;
  }
  .filter-row button,
  .filter-row a {
    padding: 9px 18px;
    font-size: 13.5px;
  }
}
/* paginering */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 52px;
}

.pagination .page,
.pagination a {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink-dark);
  border: 1px solid rgba(10, 60, 66, 0.2);
}

.pagination .page.current {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.pagination a:hover {
  background: var(--bg);
}

@media (min-width: 960px) {
  .pagination {
    margin-top: 72px;
  }
}
/* ============ CONTACT ============ */
.contact-info h2 {
  margin: 0 0 32px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.14;
  color: var(--ink-dark);
  text-wrap: balance;
}

.info-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.info-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.info-row .info-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 500;
  padding-top: 3px;
}

.info-row p, .info-row a {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  text-decoration: none;
}

.info-row a {
  color: var(--ink-dark);
}

.info-row a:hover {
  color: var(--muted);
}

.contact-form {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 32px 24px;
  margin-top: 40px;
}

.contact-form .form-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form .field-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--nav);
  font-weight: 500;
}

.contact-form input[type=text],
.contact-form input[type=tel],
.contact-form input[type=email] {
  height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(10, 60, 66, 0.22);
  background: #fff;
  font-size: 16px;
  color: var(--ink-dark);
  font-family: inherit;
  outline: none;
  width: 100%;
}

.contact-form textarea {
  padding: 14px 16px;
  border: 1px solid rgba(10, 60, 66, 0.22);
  background: #fff;
  font-size: 16px;
  color: var(--ink-dark);
  font-family: inherit;
  outline: none;
  resize: vertical;
  width: 100%;
}

.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--ink);
}

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}

.consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ink);
  flex: none;
}

.consent span {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.form-send {
  padding: 16px 24px;
  background: rgba(10, 60, 66, 0.18);
  color: rgba(14, 52, 56, 0.5);
  border: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: not-allowed;
  font-family: inherit;
  transition: all 0.25s ease;
  width: 100%;
}

.form-send.enabled {
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}

.form-send.enabled:hover {
  filter: brightness(1.08);
}

.form-success {
  display: none;
  min-height: 320px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.form-success .check {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.form-success h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 27px;
  color: var(--ink-dark);
}

.form-success p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

.form-success button {
  margin-top: 6px;
  background: none;
  border: none;
  color: var(--ink-dark);
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.contact-form.sent .form-fields {
  display: none;
}

.contact-form.sent .form-success {
  display: flex;
}

@media (min-width: 960px) {
  .contact-layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 90px;
    align-items: start;
  }
  .contact-info h2 {
    font-size: 44px;
    margin-bottom: 40px;
  }
  .info-row {
    grid-template-columns: 110px 1fr;
    gap: 24px;
    padding: 24px 0;
  }
  .info-row .info-label {
    font-size: 12px;
  }
  .info-row p, .info-row a {
    font-size: 16px;
  }
  .contact-form {
    padding: 48px 52px;
    margin-top: 0;
  }
  .contact-form .form-fields {
    gap: 22px;
  }
  .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .form-send {
    width: auto;
    padding: 16px 44px;
    align-self: flex-start;
  }
}
/* kaart */
.map-section {
  background: #fff;
  border-top: 1px solid rgba(10, 60, 66, 0.08);
}

.map-wrap {
  position: relative;
  height: 300px;
  background: #E8EEEC;
}

.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.35);
}

.map-card {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(10, 60, 66, 0.18);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.map-card .map-name {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink-dark);
}

.map-card .map-addr {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.map-card a {
  flex: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

@media (min-width: 960px) {
  .map-wrap {
    height: 440px;
  }
  .map-card {
    left: 50%;
    right: auto;
    bottom: 36px;
    transform: translateX(-50%);
    padding: 18px 28px;
    gap: 24px;
  }
  .map-card .map-name {
    font-size: 20px;
  }
  .map-card .map-addr {
    font-size: 13px;
  }
}
/* ============ FOOTER ============ */
.site-footer {
  background: var(--deep);
  color: rgba(255, 255, 255, 0.75);
  padding-top: 56px;
}

.site-footer .footer-logo img {
  width: 150px;
  height: 48px;
  object-fit: contain;
  object-position: 0 50%;
  display: block;
}

.site-footer .footer-tagline {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  max-width: 300px;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 20px;
  margin-top: 40px;
  padding-bottom: 44px;
}

.footer-cols .col-contact {
  grid-column: 1/-1;
}

.site-footer h4 {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 500;
}

.site-footer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer .ext {
  color: var(--accent);
  font-size: 12px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.footer-legal {
  display: flex;
  gap: 14px 20px;
  flex-wrap: wrap;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 960px) {
  .site-footer {
    padding-top: 76px;
  }
  .site-footer .footer-logo img {
    width: 180px;
    height: 56px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 2.4fr;
    gap: 56px;
    padding-bottom: 60px;
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 56px;
    margin-top: 0;
    padding-bottom: 0;
  }
  .footer-cols .col-contact {
    grid-column: auto;
  }
  .site-footer p, .footer-links {
    font-size: 15px;
  }
  .site-footer h4 {
    margin-bottom: 18px;
    font-size: 13px;
  }
  .footer-bottom {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: 13px;
    padding: 26px 0 30px;
  }
  .footer-legal {
    gap: 24px;
  }
}
/* ============================================================
   Aansluiting op de vaste header van het bestaande thema.

   De header is vanaf 768px `position: fixed`, dus de eerste sectie op een pagina moet
   die hoogte compenseren. De themavariabele --header-height is elders op 0 gezet en
   wordt door andere componenten gebruikt; daarom een eigen variabele.
   ============================================================ */
:root {
  --header-offset: 106px;
}

/* `overflow-x: hidden` op body maakt er een scroll-container van, waardoor position: sticky
   niet meer werkt (o.a. de inhoudsopgave). `clip` knipt net zo goed af zonder die bijwerking. */
html,
body {
  overflow-x: clip;
}

/* Idem voor <main>: daar staat overflow-x: hidden, wat elke sticky kolom binnenin
   uitschakelt — zowel de kdBlocks-layout als de artikelkolom van een blog. */
main:has(.kd-layout),
main:has(.article-layout) {
  overflow: visible;
}

@media (min-width: 768px) {
  /* De inhoudsopgave blijft onder de vaste header hangen bij het scrollen. */
  :root {
    --kd-sticky-top: calc(var(--header-offset) + 24px);
  }
  .page-banner {
    height: calc(320px + var(--header-offset));
    padding-top: var(--header-offset);
    margin-top: 90px;
  }
  /* De blog-hero heeft geen vaste hoogte maar wel dezelfde ruimte voor de header nodig. */
  .post-hero {
    min-height: calc(480px + var(--header-offset));
    padding-top: var(--header-offset);
  }
  /* Pagina's zonder banner: wat direct na de header komt mag er niet onder vallen.
     Marge in plaats van padding, zodat de eigen sectie-padding blijft staan. */
  .page-header + *:not(.page-banner):not(.post-hero) {
    margin-top: var(--header-offset);
  }
}
/* ============================================================
   Blogoverzicht in MODX — de snippet zet filters en resultaten in eigen wrappers
   (.js-blog-filters / .js-blog-results) buiten de sectie-chunks om.
   ============================================================ */
.js-blog-filters,
.js-blog-results {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.js-blog-filters {
  padding-top: 48px;
  padding-bottom: 8px;
}

.js-blog-results {
  padding-bottom: 64px;
}

/* De kop staat in de template, de uitgelichte post in de chunk erna: geen dubbele ruimte. */
.blogs-intro {
  padding-bottom: 0;
}

.blogs-featured {
  padding-top: 24px;
}

.blogs-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.08;
  color: var(--ink-dark);
}

/* Kaarten zijn <article> in plaats van <a>, omdat de categorieën zelf links bevatten.
   De titel-link strekt zich over de hele kaart uit. */
.featured,
.spotlight-card {
  position: relative;
}

.featured h2 a,
.spotlight-card h3 a,
.blog-card h3 a {
  color: inherit;
  text-decoration: none;
}

.featured h2 a::after,
.spotlight-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Categorielinks in de tags en meta blijven bruikbaar en zien er uit als in het ontwerp. */
.tag-row,
.blog-meta .tags,
.spotlight-card .card-meta {
  position: relative;
  z-index: 2;
}

.tag-row a {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--nav);
  border: 1px solid rgba(10, 60, 66, 0.18);
  padding: 5px 10px;
  text-decoration: none;
}

.tag-row a:hover {
  border-color: var(--accent);
  color: var(--ink-dark);
}

.spotlight-card .card-meta a,
.blog-meta .tags a,
.blog-meta .date a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

.blog-no-results {
  margin: 32px 0 0;
  font-size: 16px;
  color: var(--muted);
}

@media (min-width: 960px) {
  .js-blog-filters,
  .js-blog-results {
    padding: 0 32px;
  }
  .js-blog-filters {
    padding-top: 72px;
    padding-bottom: 8px;
  }
  .js-blog-results {
    padding-bottom: 104px;
  }
}
/* ============================================================
   Contactpagina in MODX — aanvullingen op het ontwerp.
   ============================================================ */
/* De Google Maps-div van het thema vult het kaartvlak. */
.map-wrap #map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Foutmelding en veldfouten van FormIt. */
.contact-form .form-error {
  padding: 14px 16px;
  background: rgba(151, 194, 63, 0.12);
  border-left: 3px solid var(--accent);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dark);
}

.contact-form input.error,
.contact-form textarea.error {
  border-color: #b3261e;
}

.contact-form .consent.error span {
  color: #b3261e;
}

/* Succesmelding: FormIt levert de tekst, het vinkje komt uit het ontwerp. */
.contact-form .form-success .alert-success,
.contact-form .form-success p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/**
 * Gegevens links, formulier rechts. Expliciete plaatsing, zodat losse elementen die MODX
 * ertussen kan zetten (ankers, snippet-output) de kolommen niet verschuiven.
 */
@media (min-width: 900px) {
  .contact-layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
  }
  .contact-layout > .contact-info {
    grid-column: 1;
    grid-row: 1;
  }
  .contact-layout > .contact-form {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    padding: 40px;
  }
}
/* ============ BLOG DETAIL ============ */
.post-hero {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  background: var(--ink);
  display: flex;
}

.post-hero img.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 40, 45, 0.4) 0%, rgba(5, 40, 45, 0.9) 100%);
}

.post-hero .container {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 72px;
  padding-bottom: 36px;
  width: 100%;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.post-meta .post-date {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 500;
}

.post-meta .tag-row {
  margin-bottom: 0;
}

.tag-light {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
}

.tag-light:hover {
  border-color: var(--accent);
  color: #fff;
}

.post-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
  max-width: 800px;
}

.toc-cta {
  margin-top: 32px;
}

@media (max-width: 959px) {
  .article-toc .toc-cta {
    display: none;
  }
}
.post-source {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 32px;
}

.post-share {
  margin-top: 28px;
}

.post-aside {
  margin-top: 48px;
}

.aside-card {
  background: var(--ink);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}

.aside-card::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.aside-card .kicker span {
  color: var(--accent);
}

.aside-card h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.18;
  color: #fff;
  text-wrap: balance;
}

.aside-card p {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}

.related-grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.related-grid .blog-card img.thumb {
  height: 170px;
}

.related-grid .blog-card h3 {
  font-size: 21px;
}

@media (min-width: 960px) {
  .post-hero {
    min-height: 480px;
  }
  .post-hero .container {
    padding-bottom: 56px;
  }
  .post-hero::after {
    background: linear-gradient(78deg, rgba(5, 40, 45, 0.9) 0%, rgba(5, 40, 45, 0.55) 48%, rgba(5, 40, 45, 0.15) 80%);
  }
  .post-meta {
    gap: 20px;
    margin-bottom: 22px;
  }
  .post-meta .post-date {
    font-size: 13px;
  }
  .post-hero h1 {
    font-size: 54px;
    line-height: 1.08;
  }
  .post-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 90px;
    align-items: start;
  }
  .post-layout .article {
    max-width: 720px;
  }
  .post-source {
    font-size: 15px;
    margin-top: 40px;
  }
  .post-aside {
    margin-top: 0;
    position: sticky;
    top: 40px;
  }
  .aside-card {
    padding: 40px 36px;
  }
  .aside-card h3 {
    font-size: 30px;
  }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .related-grid .blog-card img.thumb {
    height: 160px;
  }
  .related-grid .blog-card h3 {
    font-size: 21px;
  }
}
/* Blogdetail: het CTA-kaartje staat op desktop naast het artikel (in de aside) en op
   mobiel onder de gerelateerde blogs — daar staat het een tweede keer in de template. */
@media (min-width: 960px) {
  .cta-mobile {
    display: none;
  }
}
/* De kicker in het CTA-kaartje staat op een donkere achtergrond: accentkleur, niet de
   donkere standaardkleur uit het thema. */
.aside-card .kicker span,
.aside-card .kicker > span {
  color: var(--accent);
}

.aside-card .kicker::before {
  background: var(--accent);
}

/* Inhoudsopgave: kop op 12px en wat lucht tussen de linklijst en het CTA-kaartje. */
.article-toc h4,
.kd-toc h4 {
  font-size: 12px;
}

/* De inhoudsopgave brengt zelf de afstand mee, het kaartje begint strak bovenaan. Zo lijnt
   de kolom altijd uit, of er nu wel of geen inhoudsopgave boven staat. */
.article-toc nav,
.kd-toc nav {
  margin-bottom: 56px;
}

.article-toc .toc-cta,
.kd-toc .toc-cta {
  margin-top: 0;
}

/* De inhoudsopgave blijft onder de vaste header plakken (zie --kd-sticky-top). */
.article-toc {
  top: var(--kd-sticky-top, 40px);
}