/* ------------------------- Style ® Code by Dennis -------------------------------------------------- */

/* ------------------------- Cookie Jar -------------------------------------------------- */

.cookie-jar {
   position: fixed;
   bottom: calc(var(--gap-padding) * 0.75);
   right: calc(var(--gap-padding) * 1.5);
   z-index: 200;
   background: var(--color-dark-medium);
   padding: 2.5em 2em;
   border-radius: 0.5em;
   max-width: 19em;
   border: 1px solid rgba(var(--color-light-rgb), 0.15);
}

.cookie-jar .col-content {
   display: flex;
   flex-direction: column;
   gap: 1em;
   text-align: center;
   align-items: center;
}

.cookie-jar .col-content h4 {
   font-weight: 400;
   color: var(--color-light);
}

.cookie-jar .col-content p {
   color: var(--color-text-light);
}

.cookie-jar .col-content a {
   color: var(--color-light);
}

.cookie-jar .col-content a::after {
   background: var(--color-secondary);
}

.cookie-jar .col-btns {
   padding-top: 2em;
   display: flex;
   justify-content: center;
   gap: 1em;
}

.cookie-jar .col-btns .btn-small.flipped .arrow.first .arrow-fill {
   border: 1px solid var(--color-border-light);
}

.cookie-jar .col-btns .btn-small.flipped .arrow.first .arrow-content {
   color: var(--color-light);
}

.cookie-jar .icon {
   width: 1.75em;
   height: 1.5em;
}

.cookie-jar .icon svg {
   width: 100%;
}

.cookie-jar .icon svg path {
   stroke: var(--color-light);
}

@media screen and (max-width: 540px) {
   /* .cookie-jar {
      right: calc(var(--container-padding) * 2);
      width: calc(100% - (var(--container-padding) * 4));
      max-width: 100%;
   } */

   .cookie-jar {
      width: 100%;
      max-width: 100%;
      bottom: 0;
      right: 0;
      border-radius: calc(var(--border-radius) * 1.5) calc(var(--border-radius) * 1.5) 0 0;
   }

   .cookie-jar .col-btns {
      padding-top: 1.5em;
   }
}


/* ------------------------- Page Transition -------------------------------------------------- */

.loading-screen {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   overflow: hidden;
   z-index: 800;
   background: transparent;
   display: flex;
   padding: var(--gap-padding);
   align-items: center;
   justify-content: center;
   background: var(--color-dark-medium);
}

.loading-screen .overlay-swipe {
   background: var(--color-dark-medium);
   opacity: 0.6;
   transform-origin: right top;
   transform: scaleX(1) rotate(0.001deg);
}

/* Loader motion follows the document language direction.
   LTR reveals and fills from the left, RTL from the right. */
html[dir="ltr"] .loading-screen .overlay-swipe {
   transform-origin: right top;
}

html[dir="rtl"] .loading-screen .overlay-swipe {
   transform-origin: left top;
}

.loading-screen .counter h3 {
   display: none !important;
}

.loading-screen .counter {
   position: fixed;
   left: 50%;
   bottom: clamp(34px, 7vh, 72px);
   transform: translateX(-50%);
   width: min(220px, 32vw);
   height: 5px;
   padding: 1px;
   border: 1px solid rgba(255, 255, 255, .3);
   border-radius: 999px;
   background: rgba(255, 255, 255, .08);
   box-shadow: inset 0 1px 5px rgba(0, 0, 0, .18), 0 4px 18px rgba(0, 0, 0, .12);
   overflow: hidden;
   backdrop-filter: blur(8px);
}

.loading-screen .counter::after {
   content: '';
   display: block;
   width: var(--loader-progress, 0%);
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, rgba(141, 207, 204, .8), rgba(38, 168, 224, .98));
   box-shadow: 0 0 12px rgba(38, 168, 224, .48);
   transition: width 180ms linear;
}

html[dir="ltr"] .loading-screen .counter::after {
   margin-left: 0;
   margin-right: auto;
}

html[dir="rtl"] .loading-screen .counter::after {
   margin-left: auto;
   margin-right: 0;
   background: linear-gradient(270deg, rgba(141, 207, 204, .8), rgba(38, 168, 224, .98));
}

.loading-screen .logo-wrapper {
   position: relative;
   overflow: hidden;
}

.loading-screen .logo {
   padding: 0.1em;
   width: 10em;
}

.loading-screen .logo svg path {
   fill: var(--color-light);
}

.loading-screen .counter {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: var(--gap-padding);
   overflow: hidden;
}

.loading-screen h3 {
   line-height: 1em;
}

.loading-screen h3 em {
   font-size: 1em;
   color: rgba(var(--color-light-rgb), 0.5);
}

/*  Loading Fade  */

.loading-fade {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   overflow: hidden;
   z-index: 700;
   background: var(--color-dark-medium);
   visibility: visible;
   opacity: 1;
   pointer-events: none;
}

.loading-fade svg {
   position: absolute;
   bottom: var(--gap-padding);
   right: var(--gap-padding);
   width: 2.5em;
}

.loading-fade svg path {
   fill: var(--color-light-medium);
}

/*  Split Words  */

.split-words {
   display: inline-flex;
   flex-wrap: wrap;
   gap: 0 0.2em;
}

.default-header.center .split-words {
   justify-content: center;
}

.split-words .single-word {
   overflow: hidden;
   padding: 0.15em 0.05em;
   margin: -0.15em -0.05em;
}

.split-words em {
   display: inline-flex;
   line-height: 0.85em;
}

.split-words .single-word-inner {
   position: relative;
   transform-origin: left bottom;
}

/* ------------------------- Nav Bar -------------------------------------------------- */

.nav-bar {
   padding: 0;
   position: fixed;
   z-index: 100;
   width: 100%;
   display: flex;
   flex-direction: column;
   pointer-events: none;
   transition: all var(--animation-nav);
   transform: translateY(0em) rotate(0.001deg);
   --border-radius-medium: calc(var(--border-radius) * 5);
}

.scroll-direction-down.nav-bar {
   transform: translateY(calc(-2.5em - 1px)) rotate(0.001deg);
}

.nav-bar .corner {
   position: absolute;
   top: 100%;
   width: var(--border-radius-medium);
   height: var(--border-radius-medium);
   width: var(--border-radius);
   height: var(--border-radius);
   display: flex;
   z-index: 2;
}

.nav-bar .corner.right {
   right: 0;
   transform: scaleX(-1);
}

.nav-bar .corner.left.fill svg,
.nav-bar .corner.right.fill svg {
   margin-top: -2%;
}

@media screen and (max-width: 540px){
   .nav-bar .corner.left.fill svg,
   .nav-bar .corner.right.fill svg {
      margin-top: -4%;
   }
}

.nav-bar .corner path:first-child {
   fill: var(--color-dark);
   transition: fill var(--animation-nav);
}

.nav-bar .corner path:last-child {
   stroke: transparent;
}

.nav-bar .corner.outline path:last-child {
   stroke: var(--color-light);
   stroke-width: 0.225em;
   transition: stroke var(--animation-nav);
}

@media screen and (max-width: 540px){
   .nav-bar .corner.outline path:last-child {
      stroke-width: 0.35em;
   }
}

.nav-bar .cut-out {
   opacity: 0;
   top: 100%;
   position: absolute;
   left: 0;
   width: calc(100% - 1px);
   z-index: 3;
   transition: opacity var(--animation-nav);
}

.nav-bar .cut-out .stroke {
   width: 100%;
   top: 100%;
   left: 0;
   background: var(--color-light);
   position: absolute;
   height: 1px;
   transition: background-color var(--animation-nav);
}

.nav-height {
   padding: 0;
   width: 100%;
   height: 8.5em;
}

.nav-height + .section {
   margin-top: -1px;
}

.nav-height-actueel {
   padding: 0;
   width: 100%;
   height: 4.25em;
}

/* Colors */

.nav-bar.theme-nav-light .nav-main,
.nav-bar.theme-nav-light .nav-main::before {
   background: var(--color-light);
}

.nav-bar.theme-nav-light-medium .nav-main,
.nav-bar.theme-nav-light-medium .nav-main::before {
   background: var(--color-light-medium);
}

.nav-bar.theme-nav-light .corner path:first-child {
   fill: var(--color-light);
}

.nav-bar.theme-nav-light-medium .corner path:first-child {
   fill: var(--color-light-medium);
}

.nav-bar.scroll-scrolled .cut-out,
.nav-bar.scroll-scrolled .cut-out {
   opacity: 0.15;
}

.nav-bar.theme-nav-light.scroll-scrolled .cut-out,
.nav-bar.theme-nav-light-medium.scroll-scrolled .cut-out {
   opacity: 0.15;
}

.nav-bar.theme-nav-light .cut-out .stroke,
.nav-bar.theme-nav-light-medium .cut-out .stroke {
   background: var(--color-dark);
}

.nav-bar.theme-nav-light .corner.outline path:last-child,
.nav-bar.theme-nav-light-medium .corner.outline path:last-child {
   stroke: var(--color-dark);
}

/* See Through */

/* .nav-bar.nav-see-through:is(.theme-nav-light, .theme-nav-dark) .nav-main,
.nav-bar.nav-see-through .nav-main::before {
   background: transparent;
} */

/* ------------------------- Logo -------------------------------------------------- */

.logo {
   width: 8.75em;
   display: block;
   position: relative;
}

.logo svg path {
   fill: var(--color-light);
   transition: fill var(--animation-nav), opacity var(--animation-primary);
}

.nav-bar.theme-nav-light .logo svg path,
.nav-bar.theme-nav-light-medium .logo svg path {
   fill: var(--color-dark-medium);
}

.logo:hover svg path {
   opacity: .66;
}

/* ------------------------- Nav Main -------------------------------------------------- */

.nav-main {
   background: var(--color-dark);
   border-radius: calc(var(--border-radius) * 1) calc(var(--border-radius) * 1) 0 0;
   height: 6em;
   transition: all var(--animation-nav);
   z-index: 1;
   position: relative;
   overflow: hidden;
}

.nav-main::before {
   content: "";
   top: 0;
   left: -1px;
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   background: var(--color-dark);
   position: absolute;
   transition: all var(--animation-nav);
}

.nav-bar.scroll-direction-down .nav-main {
   height: 5em;
   border-radius: 0;
}

.nav-main-wrapper {
   padding: 0 var(--gap-padding);
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 100%;
   transform: translateY(0em) rotate(0.0001deg);
   transition: transform var(--animation-nav);
}

.nav-bar.scroll-direction-down .nav-main-wrapper {
   transform: translateY(0em) rotate(0.0001deg);
}

.nav-main .logo {
   pointer-events: all;
}

.nav-main ul {
   display: flex;
   gap: 1.5em;
   align-items: center;
   pointer-events: all;
}

.nav-main ul li:not(:last-child) {
   padding-left: 0.25em;
}

.nav-main ul li .btn span {
   font-size: 1em;
}

.nav-main .btn-link .btn-content {
   height: 2em;
}

.theme-nav-dark .nav-main ul li .btn span {
   color: var(--color-light);
}

.nav-main li.active .btn-link .btn-content::after {
   transform: rotate(0.001deg) scaleX(1);
}

/* Search */

.nav-main-search {
   width: 2.6em;
   height: 2.6em;
   border-radius: 50%;
   border: 1px solid rgba(var(--color-dark-rgb), 0.25);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: var(--animation-nav);
}

.theme-nav-dark .nav-main-search {
   border: 1px solid rgba(var(--color-light-rgb), 0.2);
}

.nav-main-search span {
   position: absolute;
   left: 99999px;
}

.nav-main-search svg {
   width: 1.2em;
}

.nav-main-search svg path {
   stroke: var(--color-dark);
   stroke-width: 1.25px;
   transition: var(--animation-nav);
}

.nav-main-search:hover svg path {
   opacity: .66;
}

.theme-nav-dark .nav-main-search svg path {
   stroke: var(--color-light);
}

/* Hamburger */

.nav-main-hamburger {
   width: 2.6em;
   height: 2.6em;
   border-radius: 50%;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: var(--animation-nav);
   background: var(--color-dark-medium);
}

.nav-main-hamburger span {
   position: absolute;
   left: 99999px;
}

.nav-main-hamburger svg {
   width: 0.85em;
}

.nav-main-hamburger svg rect {
   fill: var(--color-light);
   transition: var(--animation-nav);
}

.nav-main-hamburger:hover svg path {
   opacity: .66;
}

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

   .nav-main ul {
      gap: 0.4em;
   }

}

/* ------------------------- Nav Secondary -------------------------------------------------- */

.nav-secondary {
   padding: 0 calc(var(--gap-padding) - .5em);
   height: 2.5em;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   pointer-events: all;
   transform: translateY(0%) rotate(0.001deg);
   transition: all var(--animation-nav);
   position: relative;
}

.nav-secondary::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 150%;
   background: var(--color-dark-medium);
}

.scroll-direction-down .nav-secondary-up {
   transform: translateY(50%) rotate(0.001deg);
}

.nav-secondary ul {
   display: flex;
   gap: .25em;
   position: relative;
}

.nav-secondary .mobile-left {
   display: flex;
   gap: .25em;
   position: relative;
}

.nav-secondary ul li .nav-secondary-click {
   display: flex;
   align-items: center;
   padding: 0.5em .5em;
   cursor: pointer;
}

.nav-secondary ul li .nav-secondary-click span {
   font-size: .7em;
   color: var(--color-light);
   line-height: 1em;
   margin-bottom: 0em;
   transition: opacity var(--animation-primary);
}

.nav-secondary ul li .nav-secondary-click:hover span {
   opacity: .66;
}

.nav-secondary .nav-secondary-language span {
   text-transform: uppercase;
}

.nav-secondary .nav-secondary-language .flag {
   width: 0.8em;
   height: 0.6em;
   margin-right: .3em;
   background-color: var(--color-light-medium);
   border-radius: 1px;
}

.flag.nl {
   background: url("../img/nl.svg") center center no-repeat;
   background-size: cover;
}

.flag.en {
   background: url("../img/en.svg") center center no-repeat;
   background-size: cover;
}

.flag.de {
   background: url("../img/de.svg") center center no-repeat;
   background-size: cover;
}

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

   .nav-secondary ul {
      justify-content: space-between;
      width: 100%;
   }

   .nav-secondary ul .mobile-left {
      gap: 0em;
   }
}

/* ------------------------- Nav - Actueel -------------------------------------------------- */

.nav-actueel {
   background: var(--color-dark);
   border-top: 1px solid var(--color-border-light);
   display: flex;
   align-items: center;
   padding: 0 var(--gap-padding);
   height: 4.25em;
   transition: var(--animation-nav);
   margin-top: -1px;
   z-index: 2;
}

.scroll-direction-down .nav-actueel {
   height: 3.75em;
}

.nav-actueel .col {
   display: flex;
   align-items: center;
   min-width: 33.333%;
}

.nav-actueel .breadcrumb {
   margin: 0;
}

.nav-actueel .col:nth-child(2) {
   justify-content: center;
}

.nav-actueel .col:nth-child(2) ul {
   display: flex;
   align-items: center;
   gap: 1.5em;
}

.nav-actueel .col ul li a {
   pointer-events: all;
}

.nav-actueel .col:nth-child(2) a span {
   color: rgba(var(--color-light-rgb), 0.5);
   transition: var(--animation-primary);
}

.nav-actueel .col:nth-child(2) li a:hover span {
   opacity: .6;
}

.nav-actueel .col:nth-child(2) li.active a span {
   color: var(--color-light);
   opacity: 1;
}

.nav-actueel .col:nth-child(3) {
   justify-content: flex-end;
}

@media screen and (max-width: 720px){
   .nav-actueel .col:nth-child(2) ul {
      display: none;
   }

   #actueel .nav-actueel .col:nth-child(1) .breadcrumb {
      display: none;
   }

   #actueel .nav-actueel .col:nth-child(2) ul {
      display: flex;
   }
}

/* ------------------------- Modal - Language -------------------------------------------------- */

.modal-language {
   align-items: flex-start;
   justify-content: flex-end;
}

.modal-language.modal-language-bottom {
   align-items: flex-end;
}

.modal-language .modal-block {
   padding: 0.75em 1.25em;
   margin-top: 1em;
   margin-bottom: 2em;
}

.modal-language ul {
   display: flex;
   flex-direction: column;
}

.modal-language ul li {
   transition: var(--animation-primary);
}

.modal-language ul li a {
   display: flex;
   align-items: center;
   padding: 0.25em 0.75em 0.25em 0;
}

.modal-language ul li a span {
   color: var(--color-text);
   font-size: .9em;
   transition: var(--animation-primary);
}

.modal-language .flag {
   width: 1.2em;
   height: 0.9em;
   margin-right: .5em;
   background-color: var(--color-light-medium);
   border-radius: 2px;
}

.modal-language ul li a:hover span {
   opacity: .66;
}

.modal-language li.active {
   display: none;
}

@media screen and (max-width: 720px){
   .modal-language .modal-block {
      margin-top: 2.5em;
   }
}

/* ------------------------- Modal - Search -------------------------------------------------- */

.modal-search {
   align-items: flex-start;
   justify-content: center;
   padding-top: 25vh;
}

.modal-search .modal-block {
   width: min(100%, 35em);
   padding: 0em var(--gap-padding);
}

.search-form {
   display: flex;
   align-items: center;
   justify-content: center;
}

.search-form svg {
   width: 1.3em;
   flex-shrink: 0;
   flex-grow: 0;
}

.search-form svg path {
   stroke: var(--color-dark);
   stroke-width: 0.075em;
   transition: var(--animation-primary);
}

.search-form input {
   outline: 0;
   border: 0;
   background: transparent;
   padding: 1.6em 0.5em;
   font-size: 1.3em;
   width: 100%;
   color: var(--color-dark);
}

.search-form .submit {
   position: absolute;
   left: 0;
   width: 3em;
   height: 100%;
}

#search .search-form .submit {
   width: 1.25em;
}

/* ------------------------- Modal - Tags -------------------------------------------------- */

.modal-filter {
   align-items: center;
   justify-content: center;
}

.modal-filter .modal-block {
   width: min(100%, 45em);
   padding: calc(var(--gap-padding) * 0.8) var(--gap-padding) calc(var(--gap-padding) * 1.2) var(--gap-padding);
   display: flex;
   flex-direction: column;
   gap: 0.75em;
}

.modal-filter .modal-filter-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--color-border);
   padding-bottom: 1.25em;
}

.modal-filter .modal-filter-title * {
   font-weight: 400;
}

.modal-filter .tags-small-title {
   width: 100%;
   display: block;
   margin: 0;
   padding-top: 0.75em;
}

@media screen and (max-width: 720px){
   .modal-filter .modal-block {
      width: min(100%, 45em);
      padding: 1.25em var(--gap-padding) 1.5em var(--gap-padding);
      display: flex;
      flex-direction: column;
      gap: 0.75em;
   }

   .modal-filter .tags .single-tag {
      font-size: min(3.25vw, 1em);
  }
}

/* ------------------------- Modal - Mobile Nav -------------------------------------------------- */

.modal-mobile-nav {
   align-items: flex-start;
   padding-top: 20vh;
}

.modal-mobile-nav .modal-mobile-nav-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.modal-mobile-nav .modal-block {
   width: min(100%, 18em);
   padding: 1.5em 1.5em 2em 2.25em;
   display: flex;
   flex-direction: column;
   gap: 0.5em;
}

.modal-mobile-nav .modal-mobile-nav-title p {
   margin: 0;
   opacity: .75;
}

.modal-mobile-nav ul span {
   font-size: 1.35em;
   color: var(--color-dark-medium);
   line-height: 1.2em;
}

.modal-mobile-nav ul li {
   display: flex;
   width: 100%;
   padding-right: 1.3em;
}

.modal-mobile-nav ul li a {
   display: flex;
   width: 100%;
   position: relative;
   align-items: center;
   padding: 0.5em 0;
}

.modal-mobile-nav ul li.active a::after {
   content: "";
   position: absolute;
   right: 0;
   width: 0.4em;
   height: 0.4em;
   background: var(--color-secondary);
   border-radius: 1em;
   transform: translateX(50%);
}

.modal-mobile-nav ul li.active span {
   color: var(--color-secondary);
}

/* ------------------------- Footer -------------------------------------------------- */

.footer {
   padding: 0;
   z-index: -1;
}

.footer .footer-top {
   padding-top: var(--section-padding);
   padding-bottom: var(--section-padding);
   background: var(--color-dark-medium);
   border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
   position: relative;
   z-index: 2;
}

.footer .footer-top .line-decoration {
   top: calc(var(--border-radius-medium) * -1);
   height: calc(100% + var(--border-radius-medium));
}

.footer .footer-top .row {
   display: flex;
   flex-wrap: wrap;
   gap: var(--section-padding-medium) var(--gap);
   --gap: var(--gap-padding);
   --columns: 5;
   justify-content: space-between;
}

.footer .footer-top .flex-col {
   width: unset;
}

.footer .footer-top ul li .footer-item {
   display: flex;
   height: 1.75em;
   align-items: center;
   gap: 0.75em;
}

.footer .footer-top ul li .footer-item span {
   color: rgba(var(--color-light-rgb), 0.8);
   transition: var(--animation-primary);
   white-space: nowrap;
}

.footer .footer-top ul li .footer-item.footer-item-title span {
   color: rgba(var(--color-light-rgb), 0.4);
}

.footer .footer-top ul li .footer-item .icon {
   width: 1.5em;
   height: 1.5em;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.footer .footer-top ul li .footer-item .icon.outline svg {
   width: 90%;
}

.footer .footer-top ul li .footer-item .icon.filled svg {
   width: 80%;
}

.footer .footer-top ul li .footer-item .icon.outline path {
   stroke: rgba(var(--color-light-rgb), 0.4);
}

.footer .footer-top ul li .footer-item .icon.filled path {
   fill: rgba(var(--color-light-rgb), 0.4);
}

.footer .footer-top ul li .footer-item.footer-item-link-icon {
   margin-bottom: 0.875em;
   margin-bottom: 0.575em;
}

@media (hover: hover) {
   .footer .footer-top ul li a.footer-item:hover span {
      opacity: .66;
   }

}

@media screen and (max-width: 1024px){
   .footer .footer-top .row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--section-padding-small) var(--gap);
      --gap: var(--gap-padding);
      --columns: 3;
   }

   .footer .footer-top .flex-col {
      width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   }

   .footer .footer-top .flex-col:nth-child(1),
   .footer .footer-top .flex-col:nth-child(2),
   .footer .footer-top .flex-col:nth-child(4) {
      order: 1;
   }

   .footer .footer-top .flex-col:nth-child(3) {
      margin-left: auto;
   }
}

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

   .footer .footer-top .line-decoration {
      display: none;
   }
   .footer .footer-top .row {
      --columns: 2;
      gap: var(--section-padding-small) var(--gap);
   }

   .footer .footer-top .flex-col:nth-child(1) {
      width: 100%;
   }

   .footer .footer-top .row .footer-item span {
      font-size: 0.9em;
   }
}

/* Footer Bottom */

.footer .footer-bottom {
   padding: 1.5em 0;
   position: relative;
}

.footer .footer-bottom::after {
   content: "";
   background: var(--color-dark);
   height: 1em;
   top: 100%;
   position: absolute;
   left: 0;
   width: 100%;
   transform: translateY(-50%);
}

.footer .footer-bottom .nav-secondary::before {
   display: none;
}

.footer .footer-bottom .credits {
   margin-right: auto;
   display: flex;
   gap: 1em;
}

.footer .footer-bottom .credits a.credits-item span {
   font-size: 0.7em;
   color: var(--color-light);
   padding: 0 0.5em;
   transition: var(--animation-primary);
}

.footer .footer-bottom .credits div.credits-item span {
   font-size: 0.7em;
   color: rgba(var(--color-light-rgb), 0.5);
   padding: 0 0.5em;
}

.footer .footer-bottom .nav-secondary-click span {
   color: rgba(var(--color-light-rgb), 0.8);
}

@media (hover: hover) {

   .footer .footer-bottom .credits a.credits-item:hover span {
      opacity: .66;
   }

}

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

   .footer .footer-bottom {
      padding: 2em 0 var(--section-padding) 0;
   }

   .footer .footer-bottom .nav-secondary {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1em;
      height: unset;
   }

   .footer .footer-bottom .credits {
      margin-right: unset;
      order: 2;
   }

   .footer .footer-bottom ul {
      order: 1;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0;
   }



}

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

   .footer .footer-bottom .nav-secondary {
      gap: 1.5em;
   }
}

/* ------------------------- Actueel Cat -------------------------------------------------- */

.actueel-cat-title {
   padding-bottom: var(--section-padding-small);
}

.actueel-cat-title .row {
   align-items: center;
   justify-content: space-between;
   gap: 1em;
}

.actueel-cat-title .row .flex-col {
   width: unset;
   display: flex;
   align-items: center;
   gap: 0.5em;
}

.actueel-cat-title .row .flex-col p {
   margin: 0;
}

/* ------------------------- Actueel Grid -------------------------------------------------- */

.actueel-grid {
   padding: 0;
}

.actueel-grid ul {
   display: flex;
   flex-wrap: wrap;
   gap: var(--section-padding-medium) var(--gap);
   --gap: var(--gap-padding);
   --columns: 3;
}

.actueel-grid ul li {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
}

@media screen and (max-width: 1024px){
   .actueel-grid ul {
      --columns: 2;
   }
}

@media screen and (max-width: 720px){
   .actueel-grid ul {
      gap: 4em var(--gap);
      --columns: 1;
   }
}

/* ------------------------- Actueel Slider -------------------------------------------------- */

.actueel-slider .btn-next,
.actueel-slider .btn-prev {
   top: 30%;
}

.actueel-slider + .actueel-slider {
   padding-top: 0;
}

.actueel-slider + .actueel-slider .row-title {
   padding-top: var(--section-padding);
}

.actueel-slider + .actueel-slider .row-title::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border);
}

/* ------------------------- Team Grid -------------------------------------------------- */

.team-grid {
   padding-top: 0;
}

.team-grid ul {
   display: flex;
   flex-wrap: wrap;
   gap: var(--section-padding-medium) var(--gap);
   --gap: var(--gap-padding);
   --columns: 3;
}

/* .team-grid h3 span {
   font-size: 0.75em;
} */

.team-grid ul li {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
}

.team-grid .single-team-item .no-image {
   background: var(--color-portrait-back);
}

/* Ondersteunend */

.team-grid .row-title .flex-col {
   justify-content: center;
}

.team-grid .row-title .flex-col p {
   font-weight: 500;
   color: var(--color-primary);
}

.team-grid.team-grid-ondersteunend ul {
   --columns: 4;
}

.team-grid.team-grid-ondersteunend h3 span {
   font-size: 0.75em;
}

.team-grid.team-grid-ondersteunend .tags {
   display: none;
}

@media screen and (max-width: 1240px) {
   .team-grid ul {
      --columns: 3;
   }

   .team-grid.team-grid-ondersteunend ul {
      --columns: 4;
   }
}

@media screen and (max-width: 1024px){
   .team-grid ul {
      --columns: 2;
   }

   .team-grid.team-grid-ondersteunend ul {
      --columns: 3;
   }
}

@media screen and (max-width: 720px){
   .team-grid ul {
      gap: 4em var(--gap);
      --columns: 1;
   }

   .team-grid.team-grid-ondersteunend ul {
      --columns: 2;
   }
}

@media screen and (max-width: 540px) {
   /* .team-grid .single-team-item h3 span {
      font-size: 1.2em;
   } */

   .team-grid h3 span {
      font-size: 0.85em;
   }

   .team-grid.team-grid-ondersteunend h3 span {
      font-size: 0.85em;
   }
}

/* ------------------------- Team Slider -------------------------------------------------- */

/* .team-slider .flickity-slider-col-4 .flex-col {
   padding-top: 0.5em;
   margin-top: -0.5em;
} */

.team-slider .btn-next,
.team-slider .btn-prev {
   top: 40%;
}

.team-slider .single-team-item h3 span {
   font-size: 0.8em;
}

@media screen and (max-width: 1240px) {
   .team-slider .single-team-item h3 span {
      font-size: 1em;
   }
}

@media screen and (max-width: 540px) {
   .team-slider .single-team-item h3 span {
      font-size: 1.2em;
   }
}

/* ------------------------- Expertises Grid -------------------------------------------------- */

.expertises-grid {
   padding-top: 0;
}

/* ------------------------- Search Bar -------------------------------------------------- */

.search-bar {
   padding: 0;
   border-bottom: 1px solid var(--color-border);
}

/* ------------------------- Search Bar -------------------------------------------------- */

.search-grid {
   padding-top: var(--section-padding-small);
   padding-bottom: 0;
}

.search-results-title {
   text-align: center;
   margin-bottom: 2em;
}

.search-grid ul {
   display: flex;
   flex-direction: column;
   gap: 1em;
}

.single-search-result {
   background: var(--color-light);
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: calc(var(--border-radius) * 0.5);
   padding: calc(var(--gap-padding) * 0.75) var(--gap-padding);
   gap: 1em;
   position: relative;
   overflow: hidden;
}

.single-search-result::before {
   content: "";
   left: 0;
   top: 0;
   height: 100%;
   width: 0.3em;
   background: var(--color-primary);
   position: absolute;
   transition: var(--animation-primary);
   transform: scaleX(0) rotate(0.001deg);
   transform-origin: left;
}

.single-search-result:hover::before {
   transform: scaleX(1) rotate(0.001deg);
}

.single-search-result .col {
   display: flex;
   flex-direction: column;
   gap: .4em;
}

.single-search-result .col:nth-child(1) {
   transition: var(--animation-primary);
   transform: translateX(0em) rotate(0.001deg);
}

.single-search-result:hover .col:nth-child(1) {
   transform: translateX(0.3em) rotate(0.001deg);
}

.single-search-result .col:nth-child(2) {
   flex-shrink: 0;
}

.single-search-result img {
   width: 5em;
   height: 5em;
   border-radius: .25em;
   background: var(--color-light-medium);
   position: relative;
   display: block;
}

.single-search-result span {
   color: var(--color-dark-light);
   font-size: 0.85em;
}

.single-search-result .bottom {
   display: flex;
   gap: 0.3em;
   padding-top: 0.2em;
}

.single-search-result p {
   padding-left: 0.6em;
   margin: 0;
   color: var(--color-text);
   position: relative;
}

.single-search-result p::before {
   content: "";
   display: block;
   width: 0.3em;
   height: 1px;
   position: absolute;
   left: 0;
   top: 50%;
   background: var(--color-text);
}

.single-search-result p:nth-child(1) {
   padding-left: 0;
}

.single-search-result p:nth-child(1)::before {
   display: none;
}

.single-search-result h4 {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
}

.single-search-result p.text-overflow {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   min-height: 1em;
}

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

   .single-search-result {
      padding: calc(var(--gap-padding) * 1) var(--gap-padding);
   }
}

/* ------------------------- Article - Header -------------------------------------------------- */

.article-header {
   padding-bottom: 0;
   z-index: 1;
}

.article-header + .article-content {
   margin-top: calc(var(--gap-padding) * -1);
}

.article-header .row .flex-col:nth-child(1) {
   display: flex;
   flex-direction: column;
   gap: 2.5em;
}

.article-header .row .flex-col:nth-child(1) .published {
   margin: 0;
}

.article-header .row .flex-col:nth-child(1) .tags {
   padding-top: 0.3em;
}

.article-header .row .flex-col:nth-child(2) {
   display: flex;
   flex-direction: column;
   gap: 1.1em;
}

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

   .article-header .row .flex-col:nth-child(2) {
      display: none;
   }

   .article-header .row .flex-col:nth-child(1) {
      gap: 1.5em;
   }

   .article-header{
      padding-top: calc(var(--section-padding) * 0.75);
   }

   .article-header + .article-content {
      margin-top: 0;
   }
}


/* ------------------------- Article - Thumbnail -------------------------------------------------- */

.article-thumbnail {
   padding-bottom: 0;
}

.article-thumbnail .thumbnail {
   position: relative;
   width: 100%;
   border-radius: var(--border-radius-small);
   overflow: hidden;
   aspect-ratio: 2/1;
}

@media (hover: hover) {
   /* Loco Styling */
   .article-thumbnail img {
      width: 100%;
      height: calc(100% + 20vh);
      top: -20vh;
   }
   }

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

   .article-thumbnail .thumbnail {
      aspect-ratio: 4/3;
   }
}

/* ------------------------- Article - Content -------------------------------------------------- */

.article-content {
   padding-top: 0;
   padding-bottom: calc(var(--section-padding) - var(--gap-padding));
}

.article-content .styled-content {
   padding-top: var(--section-padding);
}

.article-content .styled-content-side {
   position: relative;
   margin-top: -3em;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
}

.article-content .sticky-box {
   padding-top: calc(var(--section-padding) + 3em);
   padding-bottom: calc(var(--section-padding) + var(--section-padding));
   display: flex;
   flex-direction: column;
   gap: 1em;
}

/* Event */

.event-content .sticky-box .btn .arrow.second .arrow-fill {
   background: var(--color-secondary);
}

.event-content .sticky-box .btn .arrow.first .arrow-fill {
   background: var(--color-primary);
}

.event-content .sticky-box .disabled-btn {
   background: transparent;
   border-radius: 200em;
   border: 1px solid var(--color-border);
   height: 3.75em;
   padding: 0 2em;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: not-allowed;
}

.event-content .sticky-box .disabled-btn span {
   color: var(--color-text);
   font-size: 0.85em;
   transform: translateY(-5%);
   opacity: 0.6;
}


/* Single Jobs */

.single-jobs-content {
   padding-top: 0;
   padding-bottom: var(--section-padding);
}


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

   .article-content {
      padding-top: 0;
      padding-bottom: var(--section-padding-small);
   }

   .single-jobs-content {
      padding-top: 0;
      padding-bottom: var(--section-padding);
   }

   .article-content .styled-content {
      padding-bottom: var(--section-padding-small);
   }

   .article-content .styled-content-side {
      flex-direction: row;
      margin-top: 0;
      padding-top: var(--section-padding-small);
      border-top: 1px solid var(--color-border);
   }

   .article-content .sticky-box {
      padding-top: 0;
      padding-bottom: 0;
      width: 100%;
      display: none;
   }

   .article-content .author-box {
      flex-shrink: 0;
   }

   .article-content .styled-content-side {
      flex-direction: c;
   }

   .event-content .sticky-box {
      display: flex;
   }

   .event-content .styled-content-side {
      flex-direction: column;
      gap: 2.5em;
   }

   .event-content .styled-content-side .disabled-btn {
      width: 100%;
   }
}

/* ------------------------- Article - Side Sticky -------------------------------------------------- */

.styled-content-side .specialisms-list {
   background: var(--color-dark);
   border-radius: 0.5em;
}

.styled-content-side .specialisms-list {
   padding: 1em;
}

.styled-content-side .specialisms-list ul li a {
   padding: 0.2em 0;
   gap: 1em;
}

.styled-content-side .specialisms-list ul li a span {
   font-size: 0.85em;
   padding-left: 0.5em;
   color: var(--color-text-light);
}




/* ------------------------- Article - Credits -------------------------------------------------- */

.article-credits {
   padding-top: 0;
}

.article-credits .flex-col:nth-child(1) {
   display: flex;
   justify-content: space-between;
   gap: 0 1em;
}

.article-credits .tags {
   padding-top: 1em;
}

.article-credits .published {
   padding-top: 1.5em;
   color: var(--color-primary);
   font-weight: 500;
}

.article-credits .flex-col:nth-child(2) p {
   margin-bottom: 0.8em;
}

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

   .article-credits + .section-stripe {
      opacity: 0;
      margin-top: calc( var(--section-padding) * -1);
   }

   .article-credits .row {
      padding: calc(var(--gap-padding) * 1.5);
      background: var(--color-white);
      border-radius: var(--border-radius);
   }

   .article-credits .flex-col:nth-child(1) {
      padding-bottom: calc(var(--gap-padding) * 1.5);
      border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.125);
   }

   .article-credits .flex-col:nth-child(1) .col:nth-child(2) {
      flex-shrink: 0;
   }

   .article-credits .flex-col:nth-child(2) {
      padding-top: calc(var(--gap-padding) * 1.5);
      padding-bottom: 0.5em;
   }
}

@media screen and (max-width: 540px) {
   .article-credits .flex-col:nth-child(1) {
      display: flex;
      flex-direction: column;
      gap: calc(var(--gap-padding) * 1.5);
   }

   .article-credits .published {
      padding-top: .5em;
      font-size: 1em;
   }
}


/* ------------------------- Expertises - Expertises Grid -------------------------------------------------- */


#expertises .expertises-grid .single-expertises-item:last-child a {
   padding-bottom: 0;
}

/* ------------------------- Team Single - Expertises Grid -------------------------------------------------- */


#team-single .expertises-grid .single-expertises-item:first-child::before {
   display: none;
}

#team-single .expertises-grid .single-expertises-item:last-child a {
   padding-bottom: 0;
}


/* ------------------------- Expertises - Section Specialisms -------------------------------------------------- */

.section-specialisms .row-content {
   justify-content: space-between;
}

.section-specialisms .row-content .flex-col {
   width: 28%;
   display: flex;
   flex-direction: column;
   padding-bottom: 0;
}

.section-specialisms .row-content .flex-col .title {
   border-bottom: 1px solid var(--color-border-light);
   padding-bottom: 2.25em;
   margin-bottom: 1.5em;
}

.section-specialisms h3 {
   font-size: calc(var(--title-size) * 0.35);
}

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

   .section-specialisms .container {
      padding: 0 calc(var(--gap-padding) * 2);
   }

   .section-specialisms .row-content .flex-col {
      width: calc((99.99% - (var(--gap-padding) * 2)) / 3);
   }
}

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

   .section-specialisms .container {
      padding: 0 var(--gap-padding);
   }
}

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

   .section-specialisms .row-content {
      gap: var(--gap-padding);
   }

   .section-specialisms .row-content .flex-col {
      width: 100%;
   }

   .section-specialisms .row-content .flex-col:nth-child(2) {
      padding-top: 2em;
   }

   .section-specialisms .row-content .flex-col .title {
      padding-bottom: 1.5em;
      margin-bottom: .75em;
   }

   .specialisms-list ul li a {
      padding: 0.3em 0;
   }

}

/* ------------------------- Expertise Child - Header -------------------------------------------------- */

.expertises-child-header .row {
   gap: calc(var(--gap-padding) * 2);
   flex-wrap: nowrap;
   align-items: center;
}

.expertises-child-header .flex-col:nth-child(2) {
   flex-shrink: 0;
   width: 32%;
}

.expertises-child-header .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   transition: var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
   width: 100%;
}

.expertises-child-header .image::before {
   content: "";
   display: block;
   padding-top: 66.666%;
}

.expertises-child-header .image img.thumbnail {
   border-radius: 0.5em;
}

.expertises-child-header .image-dark {
   background: rgba(var(--color-black-rgb), 0.2);
   border-radius: 0.5em;
   opacity: 0;
   transition: opacity var(--animation-primary);
}

.expertises-child-header .no-image {
   background: var(--color-light-medium);
   border-radius: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
}

.expertises-child-header .no-image span {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.33);
}

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

   .expertises-child-header {
      padding-bottom: 0;
   }

   .expertises-child-header .row {
      gap: var(--section-padding-medium);
      flex-direction: column;
   }

   .expertises-child-header .flex-col:nth-child(2) {
      width: 100%;
   }

   .expertises-child-header .image {
      width: calc(100% + (var(--container-padding) * 2));
      left: calc(var(--container-padding) * -1);
   }

   .expertises-child-header .image,
   .expertises-child-header .image img.thumbnail {
      border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   }

   .expertises-child-header .image::before {
      padding-top: 50%;
   }

   .expertises-child-header .overlay-borders::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      height: calc((var(--border-radius-medium) * 2) + 1px);
      width: 100%;
      background: var(--color-light);
      border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
      box-shadow: 0 0 10em rgba(var(--color-black-rgb), 0.5);
   }

   .expertises-child-header + .expertises-grid .single-expertises-item:first-child a {
      padding-top: 0.5em;
   }

   .expertises-child-header + .expertises-grid .single-expertises-item:first-child::before {
      display: none;
   }

}

@media screen and (max-width: 540px) {
   .expertises-child-header .image::before {
      padding-top: 75%;
   }
}


/* ------------------------- Contact Person -------------------------------------------------- */

.contact-person {
   padding: 0;
}

.contact-person .row.split.split-30-70 .flex-col:nth-child(1) {
   width: 30%;
}

.contact-person .row {
   padding: var(--section-padding-medium) 0;
}

.contact-person .row .flex-col {
   display: flex;
   align-items: center;
}

.contact-person .row::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border);
}

.contact-person .author-box .author-single-author .author-image {
   width: 6em;
}

.contact-person .col-content {
   max-width: calc(25em + 10vw);
}

.contact-person .author-box .author-single-author .author-image .no-image {
   padding: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
}

.contact-person .author-box .author-single-author .author-image .no-image span {
   font-size: 0.75em;
   text-align: center;
   line-height: 1.2;
}

.contact-person .col-content .btn-row {
   gap: 2em;
   padding-top: 1.5em;
}

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

   .contact-person .row.split.split-30-70 {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--container-padding);
      align-items: center;
   }

   .contact-person .row.split.split-30-70 .flex-col:nth-child(1) {
      width: unset;
   }

   .contact-person .row.split.split-30-70 .flex-col:nth-child(2) {
      width: 100%;
   }

   .contact-person .author-content {
      display: none;
   }

   .contact-person .author-box .author-single-author .author-image {
      width: 6em;
      flex-shrink: 0;
   }
}

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

   .contact-person .row.split.split-30-70 {
      flex-direction: column;
      flex-wrap: wrap;
      gap: var(--section-padding-small);
      align-items: center;
   }

   .contact-person .row.split.split-30-70 h3 {
      text-align: center;
   }

   .contact-person .btn-row {
      justify-content: center;
   }
}


/* ------------------------- Section Split Image -------------------------------------------------- */

.section-split-image .row:not(:first-child) {
   padding-top: var(--section-padding);
   margin-top: var(--section-padding);
}

.section-split-image .row:not(:first-child)::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border);
}

.section-split-image .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   width: 100%;
}

.section-split-image .image::before {
   content: "";
   padding-top: 75%;
   display: block;
}

/* Square */
.section-split-image .image.size-1-1::before {
   padding-top: 100%;
}

.section-split-image .image img.thumbnail {
   border-radius: 0.5em;
}

.section-split-image .image .no-image {
   background: var(--color-light-medium);
   border-radius: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
}

.theme-light-medium.section-split-image .image .no-image {
   background: var(--color-light-dark);
}

.section-split-image .col-content {
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.section-split-image .icon-with-title {
   padding-bottom: 0;
   margin-bottom: -0.25em;
}

/* Auto Flip */
.section-split-image .row:nth-of-type(odd) .flex-col:nth-child(2) {
   order: 1;
}

/* Custom Flip */
.section-split-image .row.flip .flex-col:nth-child(2) {
   order: 1;
}

.section-split-image .row.flip .flex-col:nth-child(1) {
   order: 2;
}

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

   .section-split-image .row.split {
      justify-content: center;
   }

   .section-split-image .row.split .flex-col {
      max-width: 36em;
   }

   /* Auto Flip */
   .section-split-image .row:nth-of-type(odd) .flex-col:nth-child(2) {
      order: 2;
   }

   /* Custom Flip */
   .section-split-image .row.flip .flex-col:nth-child(2) {
      order: 2;
   }

   .section-split-image .row.flip .flex-col:nth-child(1) {
      order: 2;
   }

}

/* ------------------------- Section Split Text -------------------------------------------------- */

.section-split-text .row.split.split-50-50 {
   align-items: flex-start;
}

.section-split-text .col-content {
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.section-split-text .icon-with-title {
   padding-bottom: 0;
   margin-bottom: -0.25em;
}

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

   .section-split-text .row.split {
      justify-content: center;
   }

   .section-split-text .row.split .flex-col {
      max-width: 36em;
   }

}

/* ------------------------- About -  Split Text -------------------------------------------------- */

.about-split-text {
   padding-top: 0;
}

.about-split-text .row {
   padding-top: var(--section-padding)
}

.about-split-text .row::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border-light);
}

/* ------------------------- Expertise Cat. Grid -------------------------------------------------- */

.expertises-cat-grid {
   padding-bottom: 0;
}

/* ------------------------- Expertise Cat. Split Image -------------------------------------------------- */

.expertises-cat-split-image {
   padding-top: 0;
}

.expertises-cat-split-image .row:first-child {
   padding-top: var(--section-padding);
}

.expertises-cat-split-image .row:first-child::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border);
}


/* ------------------------- Home - Header -------------------------------------------------- */

.home-header .flex-col {
   max-width: calc(var(--title-size) * 13);
}

:is(.home-header, .error-header, .jobs-header) .flex-col .btn-row {
   padding-top: 2.5em;
}

:is(.home-header, .error-header, .jobs-header) .btn .arrow:is(.second) .arrow-fill {
   background: var(--color-secondary);
}

:is(.home-header, .error-header, .jobs-header) .btn .arrow:is(.first) .arrow-fill {
   background: var(--color-light);
}

:is(.home-header, .error-header, .jobs-header) .btn .arrow:is(.first) .arrow-content {
   color: var(--color-dark-medium);
}

/* ------------------------- Home - Big Image -------------------------------------------------- */

.home-big-image {
   padding-top: 0;
   padding-bottom: 0;
}

.home-big-image .thumbnail {
   position: relative;
   width: 100%;
   border-radius: var(--border-radius-small);
   overflow: hidden;
   aspect-ratio: 2/1;
}

@media (hover: hover) {
   /* Loco Styling */
   .home-big-image img {
      width: 100%;
      height: calc(100% + 20vh);
      top: -20vh;
   }
}

/* Button */
.home-big-image .btn-scroll {
   position: absolute;
   right: var(--gap-padding);
   top: var(--gap-padding);
}


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

   .home-big-image .thumbnail {
      aspect-ratio: 4/3;
   }

   .home-big-image .btn-scroll {
      display: none;
   }
}

/* ------------------------- Jobs - USP -------------------------------------------------- */

.jobs-usp {
   padding-top: 0;
}

/* ------------------------- Expertises Single - Builder -------------------------------------------------- */

.expertises-single-builder {
   padding-top: 0;
}

.expertises-single-builder .row::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border);
}

.expertises-single-builder .single-block:not(:last-child) {
   padding-bottom: var(--section-padding-medium);
}

.expertises-single-builder .styled-content {
   padding-top: var(--section-padding);
}

.expertises-single-builder .styled-content-side {
   position: relative;
   margin-top: -3em;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
}

.expertises-single-builder .sticky-box {
   padding-top: calc(var(--section-padding) + 3em) !important;
   display: flex;
   flex-direction: column;
   gap: 1em;
   padding-top: 0;
}

.expertises-single-builder .sticky-box h3 a {
   color: var(--color-dark-light);
   font-weight: 500;
}

.expertises-single-builder .specialisms-list {
   background: transparent;
   padding: 0;
}

.expertises-single-builder .specialisms-list ul {
   gap: 0;
}

.expertises-single-builder .specialisms-list ul li a {
   padding: 0;
   gap: 1em;
}

.expertises-single-builder .specialisms-list ul li a.active span {
   font-weight: 500;
   color: var(--color-dark);
}

.expertises-single-builder .specialisms-list ul li a span {
   font-size: 0.85em;
   padding-left: 0em;
   color: rgba(var(--color-dark-rgb), 0.5);
}

.expertises-single-builder .specialisms-list ul li a .arrow.first .arrow-fill {
   border: 1px solid var(--color-border);
   background: transparent;
}

.expertises-single-builder .specialisms-list ul li a .arrow.first .arrow-content {
   color: var(--color-dark);
}

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

   .expertises-single-builder .row::before {
      display: none;
   }

   .expertises-single-builder .row .sticky-box {
      display: none;
   }

   .expertises-single-builder .styled-content {
      padding-top: 0;
   }
}


/* ------------------------- Expertises - Link Cards -------------------------------------------------- */

.link-cards {
   display: flex;
   flex-wrap: wrap;
   --gap: 1em;
   --columns: 3;
   gap: var(--gap);
}

.link-cards a {
   display: flex;
   flex-direction: column;
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   flex-shrink: 0;
   overflow: hidden;
   padding: 2em 1em 1em 1em;
   background: var(--color-light-dark);
   border-radius: 0.5em;
   white-space: normal;
   justify-content: space-between;
   align-items: flex-end;
}

.link-cards a .content {
   width: 100%;
   display: flex;
   flex-direction: column;
   padding-bottom: 2em;
}

.link-cards a .content h4 span {
   font-size: 0.85em;
   font-weight: inherit;
}

.link-cards a .content p {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
   line-clamp: 5;
   max-height: calc((1.66em * 0.85em) * 5);
}

.link-cards a .arrow.first .arrow-fill {
   background: var(--color-dark);
}

/* Hover */

@media (hover: hover) {

   .link-cards a:hover .arrow .arrow-content {
      transform: rotate(-45deg);
   }

   .link-cards a:hover .arrow.first {
      transform: scale(1) rotate(0.001deg);
   }

   .link-cards a:hover .arrow.second {
      transform: scale(0) rotate(0.001deg);
   }

   .link-cards a:hover .btn-content {
      transform: translateX(0em) rotate(0.001deg);
   }
}

/* Colors */

.link-cards a:is(:nth-child(1), :nth-child(6)) {
   background: var(--color-dark-medium);
}

.link-cards a:is(:nth-child(3), :nth-child(5)) {
   background: var(--color-dark-light);
}

.link-cards a:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(6)) h4 span {
   color: var(--color-light);
}

.link-cards a:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(6)) p {
   color: var(--color-text-light);
}

.link-cards a:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(6)) .btn .arrow.second .arrow-fill {
   border: 1px solid var(--color-border-light);
}

.link-cards a:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(6)) .btn .arrow.second .arrow-content {
   color: var(--color-light);
}

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

   .link-cards {
      flex-direction: column;
      --gap: 1em;
      --columns: 1;
      gap: var(--gap);
   }

   .link-cards a {
      width: 100%;
      flex-direction: row;
      padding: 1.5em 1em 1em 1em;
   }

   .link-cards a .content {
      padding-bottom: 0.5em;
      padding-right: 1em;
   }

}

/* ------------------------- Error - Header -------------------------------------------------- */

.error-header .row .flex-col.col-image:nth-child(2) {
   order: 3;
}

/* ------------------------- Textpage - Header -------------------------------------------------- */

.textpage-header .flex-col:nth-child(1) p {
   margin-bottom: calc(var(--section-padding-medium) * 0.75);
}

.textpage-header .flex-col:nth-child(2) {
   padding-top: var(--section-padding-medium);
}


/* ------------------------- Actueel - Header -------------------------------------------------- */

.section-wrap-actueel {
   display: flex;
   flex-direction: column;
   min-height: min(calc(100vh - (var(--border-radius) * 1.5)), 55em);
}

.section-wrap-actueel + .section-wrap,
.section-wrap-actueel + .section {
   z-index: 4;
}

#actueel .footer {
   z-index: 3;
}

.section-wrap-actueel .actueel-header {
   flex-grow: 1;
   padding: 0;
   display: flex;
}

.single-actueel-slide {
   padding-top: var(--section-padding);
   padding-bottom: calc(var(--section-padding) * 1.5);
   display: flex;
   align-items: center;
   position: relative;
   flex-grow: 1;
}

.single-actueel-slide .container {
   width: 100%;
}

.single-actueel-slide .thumbnail {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: calc(100% + var(--border-radius));
   border-radius: var(--border-radius) var(--border-radius) 0 0;
   background: var(--color-dark-medium);
}

.single-actueel-slide .thumbnail .dark-overlay {
   background: rgba(var(--color-black-rgb), 0.5);
}

.single-actueel-slide .row .flex-col:nth-child(1) {
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.single-actueel-slide .small-title {
   color: var(--color-light);
}

.single-actueel-slide h1 {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   /* padding-bottom: 0.1em; */
   min-height: calc(2em * 1.15);
   color: var(--color-white);
}

.single-actueel-slide h1 a {
   color: inherit;
   font-weight: inherit;
}

.single-actueel-slide .row .flex-col:nth-child(1) .tags {
   padding-top: 0.3em;
}

.single-actueel-slide .tags .single-tag {
   color: var(--color-white);
}

.single-actueel-slide .tags .single-tag.light-medium {
   background: var(--color-light);
}

.single-actueel-slide .row .flex-col:nth-child(2) {
   display: flex;
   flex-direction: column;
   gap: 2.5em;
}

.single-actueel-slide .author-box {
   background: var(--color-light);
   padding: 0.66em;
   border-radius: 0.66em;
}

.single-actueel-slide .author-box h4 {
   color: var(--color-dark);
}

.actueel-swiper-slider .swiper-pagination {
   position: absolute;
}

.actueel-swiper-slider .fixed-items {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   padding-top: var(--section-padding);
   padding-bottom: var(--section-padding);
}

.actueel-swiper-slider .fixed-items .container {
   display: flex;
   justify-content: flex-end;
   flex-direction: column;
   height: 100%;
   position: relative;
}

.actueel-swiper-slider .fixed-items .flex-col:nth-child(2) {
   display: flex;
   justify-content: flex-end;
}

.actueel-swiper-slider .fixed-items .btn {
   z-index: 1;
   transform: translateY(calc((var(--section-padding) * 0.5) + 0%));
}

.single-actueel-slide .btn-read-more {
   position: absolute;
   left: var(--container-padding);
   bottom: calc(var(--section-padding) * 0.5);
}

@media (min-aspect-ratio: 8/5) {

#actueel .nav-main {
   height: 5em;
}

#actueel .nav-actueel {
   height: 3.75em;
}

#actueel .nav-height-actueel {
   height: 2.75em;
}

}

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

   .single-actueel-slide .row .flex-col:nth-child(2) {
      display: none;
   }

   .single-actueel-slide .row .flex-col:nth-child(1) {
      gap: 1.5em;
   }

   .single-actueel-slide h1 {
      -webkit-line-clamp: 3;
      line-clamp: 3;
      min-height: calc(3em * 1.15);
   }

   .section-wrap-actueel {
      min-height: min(calc((var(--vh, 1vh) * 100) - (var(--border-radius) * 1.5)), 45em);
   }

   .single-actueel-slide {
      padding-top: calc(var(--section-padding) * 1);
      padding-bottom: calc(var(--section-padding) * 2.5);
   }
}

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

}


/* ------------------------- Team Single - Header -------------------------------------------------- */

.team-single-header .author-top {
   display: flex;
   flex-direction: column;
}

.team-single-header em {
   width: 100%;
}

.team-single-header .author-top .author-top-hidden {
   display: none;
}

/* .team-single-header .col-image {
   padding-right: calc(var(--container-padding) * 0.25);
} */

.team-single-header .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   transform: scale(1) rotate(0.001deg);
   width: 100%;
}

.team-single-header .image::before {
   content: "";
   display: block;
   padding-top: 133.333%;
}

.team-single-header .image img.thumbnail {
   border-radius: 0.5em;
}

.team-single-header .image-dark {
   background: rgba(var(--color-black-rgb), 0.2);
   border-radius: 0.5em;
   opacity: 0;
}

.team-single-header .no-image {
   background: var(--color-portrait-back);
   border-radius: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
}

.team-single-header .no-image span {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.33);
   text-align: center;
   line-height: 1.2;
}

.team-single-header .col-content .job-title {
   color: var(--color-primary);
   font-weight: 500;
   margin-top: 1.5em;
}

.team-single-header .col-content .links-wrap {
   border-top: 1px solid var(--color-border);
   margin-top: 2.5em;
   padding: 2.5em 0 0 0;
   align-items: center;
   display: flex;
   gap: 3em;
}

.team-single-header .col-content .links-wrap .single-link {
   display: flex;
   align-items: center;
   gap: 0.75em;
}

.team-single-header .col-content .links-wrap .single-link p {
   margin-top: 0.05em;
}

.team-single-header .col-content .links-wrap .single-link .btn-link .btn-content {
   height: 1.75em;
}

.team-single-header .col-content .links-wrap .single-link .btn-small .btn-text span {
   font-size: 1em;
   color: var(--color-dark);
   font-weight: 500;
}

.team-single-header .col-content .styled-content {
   padding-top: 2.25em;
}

/* Team Nav */

.team-nav {
   position: absolute;
   right: var(--gap-padding);
   top: var(--section-padding);
   display: flex;
   gap: 0.5em;
   z-index: 1;
}

.team-nav .author-image {
   aspect-ratio: 3/4;
   position: relative;
   width: 4em;
   background: var(--color-portrait-back);
   border-radius: 0.25em;
   overflow: hidden;
   flex-shrink: 0;
   flex-grow: 0;
   transition: var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
}

.team-nav .author-image .overlay-dark {
   background: rgba(var(--color-black-rgb), 0.1);
   transition: opacity var(--animation-primary);
   opacity: 0;
}

.team-nav .author-image .author-count {
   background: var(--color-dark-medium);
   display: flex;
   align-items: center;
   justify-content: center;
}

.team-nav .author-image .author-count span {
   color: var(--color-light);
   font-size: 0.85em;
}

@media (hover: hover) {
   /* Hover */

   .team-nav .author-image:hover {
      transform: scale(0.98) rotate(0.001deg);
   }

   .team-nav .author-image:hover .overlay-dark {
      opacity: 1;
   }
}

@media screen and (max-width: 1024px) {
   .team-nav {
      display: none;
   }

   .team-single-header .col-image {
      padding-right: 0;
   }

   .team-single-header .row.split.split-30-70 .flex-col:nth-child(1) {
      width: calc(35% - (var(--gap-padding-big) * 0.5));
   }

   .team-single-header .row.split.split-30-70 .flex-col:nth-child(2) {
      width: calc(65% - (var(--gap-padding-big) * 0.5));
   }

   .team-single-header .col-content .links-wrap {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25em;
   }
}

@media screen and (max-width: 540px) {
   .team-single-header .row.split.split-30-70 .flex-col:nth-child(1) {
      width: 100%;
      display: none;
   }

   .team-single-header .row.split.split-30-70 .flex-col:nth-child(2) {
      width: 100%;
      order: 1;
   }

   .team-single-header .author-top {
      flex-direction: row;
      justify-content: space-between;
   }

   .team-single-header .author-top .author-top-hidden {
      display: block;
      width: 25vw;
   }

   .team-single-header .author-top .author-top-hidden .image img {
      border-radius: 0.25em;
   }

   .team-single-header .col-content .job-title {
      font-size: 1.1em;
      margin-top: 1em;
   }
}


/* ------------------------- About - About Cards -------------------------------------------------- */

.about-cards {
   padding-top: 0;
}

.about-cards .row {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
   --gap: var(--gap-padding);
   --columns: 3;
}

.about-cards .row .flex-col {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   display: flex;
   flex-direction: column;
   gap: var(--gap);
}

.about-cards .card {
   width: 100%;
   display: flex;
   flex-direction: column;
   padding: 2.5em var(--gap-padding);
   border-radius: var(--border-radius-small);
   position: relative;
   overflow: hidden;
}

.about-cards .card .line-decoration {
   top: 0;
   left: 50%;
   transform: translateX(-50%) scaleY(-1);
}

.about-cards .flex-col:nth-child(2) .card:nth-child(3) .line-decoration {
   transform: translateX(0%) scaleX(-1);
   left: unset;
   right: 0;
}

.about-cards .card .line-decoration .line {
   background: rgba(var(--color-dark-rgb), 0.15);
}

/* Colors */

.about-cards .card.card-dark-light {
   background: var(--color-dark-light);
}

.about-cards .card.card-dark-medium {
   background: var(--color-dark-medium);
}

.about-cards .card.card-light {
   background: var(--color-light);
}

.about-cards .card.card-light-medium {
   background: var(--color-light-medium);
}

/* Card Image */

.about-cards .card-image::before {
   content: "";
   padding-top: 70%;
   display: block;
}

.about-cards .card-image-long::before {
   padding-top: 110%;
}

.about-cards .card-image .dark-overlay {
   background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 75%);
}

.about-cards .card-image .content {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 2.5em var(--gap-padding);
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.about-cards .card-image .content .icon-with-title {
   padding-bottom: 0.5em;
}

/* Card Content */

.about-cards .card-content .content {
   position: relative;
   width: 100%;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1em;
}

.about-cards .card-content.card-theme-light .content h3 {
   color: var(--color-dark);
}

.about-cards .card-content.card-theme-light .content p {
   color: var(--color-text);
   margin-bottom: 0.75em;
}

.about-cards .card-content .content .icon-with-title {
   padding-bottom: 0em;
}

.about-cards .card-content.card-theme-light .btn .arrow.second .arrow-fill {
   border: 1px solid var(--color-border);
}

.about-cards .card-content.card-theme-light .btn .arrow.second .arrow-content {
   color: var(--color-dark-medium);
}

.about-cards .card-content.card-theme-light .btn span {
   color: var(--color-text);
}

.about-cards .card-content img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.about-cards .flex-col:nth-child(3) .card:nth-child(2) svg path {
   stroke: var(--color-primary);
   stroke-width: 1px;
}


/* Card Person */

.about-cards .card-person .person {
   display: flex;
   width: 100%;
   align-items: center;
   flex-direction: column;
   text-align: center;
   margin-bottom: 1.5em;
}

.about-cards .card-person .person .thumbnail {
   width: 70%;
   position: relative;
   transition: var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
   border-radius: 0.5em;
   overflow: hidden;
}

.about-cards .card-person .person .thumbnail .dark-overlay {
   transition: var(--animation-primary);
   opacity: 0.075;
   background: var(--color-black);
}

.about-cards .card-person .person .thumbnail::before {
   content: "";
   display: block;
   padding-top: 133.333%;
}

.about-cards .card-person .person .thumbnail img {
   border-radius: 0.5em;
}

.about-cards .card-person .person h3 {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   padding: var(--gap-padding);
}

.about-cards .card-person .person:hover .thumbnail {
   transform: scale(0.95) rotate(0.001deg);
}

.about-cards .card-person .person:hover .thumbnail .dark-overlay {
   opacity: .15;
}

/* Card Loop */

.about-cards .card-loop .loop {
   overflow: hidden;
   position: relative;
   width: calc(100% + (var(--gap-padding) * 2));
   left: calc(var(--gap-padding) * -1);
   padding-bottom: 2em;
   padding-top: 1em;
}

.about-cards .card-loop .loop-box {
   position: relative;
   float: left;
}

.about-cards .card-loop .loop-box.duplicate {
   position: absolute;
   transform: translateX(100%);
}

.about-cards .card-loop .loop-box-inner {
   flex-shrink: 0;
   display: flex;
   position: relative;
   width: 100%;
   animation: loopThumb 30s linear;
   animation-iteration-count: infinite;
}

@keyframes loopThumb {
   0% { transform: translateX(0%); }
   100% {transform: translateX(-100%); }
}

.about-cards .card-loop .thumbnail {
   width: 6em;
   position: relative;
   border-radius: 0.25em;
   overflow: hidden;
   flex-shrink: 0;
   background: var(--color-portrait-back);
   margin-right: 1em;
}

.about-cards .card-loop .thumbnail::before {
   content: "";
   display: block;
   padding-top: 133.333%;
}

.about-cards .card-loop .thumbnail img {
   border-radius: 0.25em;
}

/* Card Slider */

.about-cards .card-slider {
   padding-left: 0;
   padding-right: 0;
}

.about-cards .card-slider .swiper-pagination {
   position: absolute;
   left: 20%;
   top: 0;
   width: 60%;
   background: var(--color-primary);
}

.about-cards .card-slider .single-card-slide {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding-top: 2.5em;
}

.about-cards .card-slider .single-card-slide em {
   font-size: 2em;
}

.about-cards .card-slider .single-card-slide p {
   color: var(--color-light);
   margin-top: 1em;
   margin-bottom: 1em;
   white-space: nowrap;
   text-align: center;
}

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

   .about-cards .row {
      --columns: 2;
   }

   .about-cards .row .flex-col:nth-child(1) .card:nth-child(3)::before {
      padding-top: 102.5%;
   }

   .about-cards .row .flex-col:nth-child(3) {
      width: 100%;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
   }

   .about-cards .row .flex-col:nth-child(3) .card {
      width: calc(50% - (var(--gap-padding) * 0.5));
   }

}

@media screen and (max-width: 540px) {
   .about-cards .row {
      --columns: 1;
   }

   .about-cards .row .flex-col:nth-child(3) {
      width: 100%;
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: center;
   }

   .about-cards .row .flex-col:nth-child(3) .card {
      width: 100%;
   }

   .about-cards .card-slider .single-card-slide em {
      font-size: 2.5em;
   }
}

/* ------------------------- Jobs - Header -------------------------------------------------- */

.jobs-header {
   padding-top: 0;
}

.jobs-header .btn:hover .arrow .arrow-content {
   transform: rotate(45deg);
}

.jobs-header .image-wrap {
   width: calc(100% + (var(--container-padding) - var(--gap-padding)));
   position: relative;
   height: calc(100vh - 8.5em - var(--gap-padding));
   display: flex;
   flex-direction: column;
   gap: 1em;
}

.jobs-header .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   width: 100%;
   height: 100%;
}

.jobs-header .image img.thumbnail {
   border-radius: 0.5em;
}

.jobs-header .image .no-image {
   background: var(--color-dark-medium);
   border-radius: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
}

.jobs-header .image .no-image span {
   color: var(--color-text-light);
}

.jobs-header .image:nth-child(1) {
   height: 33%;
}

.jobs-header .image:nth-child(2) {
   height: 66%;
}

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

   .jobs-header {
      padding-top: var(--section-padding);
   }

   .jobs-header .image-wrap {
      width: 100%;
      height: calc(var(--vh, 1vh) * 60);
   }
}



/* ------------------------- Jobs - List Grid -------------------------------------------------- */

.row-jobs-grid ul {
   display: flex;
   flex-direction: column;
   gap: 1em;
}

/* ------------------------- Single Job - Header -------------------------------------------------- */

.single-job-header .col-info {
   display: flex;
   gap: var(--gap-padding);
}

.single-jobs-content .sticky-box {
   padding-bottom: 0;
   width: calc(100% + (var(--container-padding) - var(--gap-padding)));
}

.single-jobs-content .sticky-box h3 {
   margin-bottom: 0.5em;
}

@media screen and (max-width: 1024px){
   .single-jobs-content .sticky-box {
      display: block;
   }

   .single-jobs-content .sticky-box h3 {
      margin-bottom: 1em;
   }
}

/* ------------------------- Contact - Header -------------------------------------------------- */

.contact-header .row.split.split-50-50 {
   align-items: flex-start;
}

.contact-header .stripe {
   margin: 3em 0;
}

.contact-header .contact-links {
   display: flex;
   flex-wrap: wrap;
   gap: var(--section-padding-medium) var(--gap);
   --gap: var(--gap-padding);
   --columns: 2;
   justify-content: space-between;
}

.contact-header .contact-links .col {
   width: calc(50% - (var(--gap-padding) * 0.5));
}

.contact-header li .footer-item {
   display: flex;
   height: 1.75em;
   align-items: center;
   gap: 0.75em;
}

.contact-header li .footer-item span {
   color: rgba(var(--color-dark-rgb), 0.8);
   transition: var(--animation-primary);
   white-space: nowrap;
}

.contact-header li .footer-item.footer-item-title span {
   color: rgba(var(--color-dark-rgb), 0.4);
}

.contact-header li .footer-item .icon {
   width: 1.5em;
   height: 1.5em;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.contact-header li .footer-item .icon.outline svg {
   width: 90%;
}

.contact-header li .footer-item .icon.filled svg {
   width: 80%;
}

.contact-header li .footer-item .icon.outline path {
   stroke: var(--color-primary);
}

.contact-header li .footer-item .icon.filled path {
   fill: var(--color-primary);
}

.contact-header li .footer-item.footer-item-link-icon {
   margin-bottom: 0.875em;
   margin-bottom: 0.575em;
}

@media (hover: hover) {
   .contact-header li a.footer-item:hover span {
      opacity: .66;
   }

}

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

   .contact-header li .footer-item span {
      font-size: 0.9em;
   }
}

/* ------------------------- Contact - Route -------------------------------------------------- */

.contact-route .col-content {
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.contact-route .row {
   padding: var(--gap-padding) 0;
}

.contact-route .col-content .btn-row {
   margin-left: -0.5em;
}


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

   .contact-route{
      padding-top: 0;
   }

   .contact-route .row {
      padding-top: 0;
   }

   .contact-route .col-content {
      order: 3;
   }

   .contact-route.section-split-image .image {
      width: calc(100% + (var(--container-padding) * 2));
      left: calc(var(--container-padding) * -1);
      border-radius: var(--border-radius-medium);
   }

   .contact-route.section-split-image .image::before {
      padding-top: 100%;
   }

}


/* ------------------------- Contact - Map -------------------------------------------------- */

.section-map {
   padding: 0;
}

.section-map iframe {
   width: 100%;
   height: 75vh;
   pointer-events: none;
   filter: hue-rotate(-25deg) saturate(0.95);
   border-radius: var(--border-radius-medium);
}

@media (hover: hover) {
   .section-map iframe {
      pointer-events: none;
   }
}

.section-map .overlay-map {
   background: var(--color-light);
   mix-blend-mode: multiply;
   filter: saturate(0);
   pointer-events: none;
}

/* ------------------------- Jobs - Quote Slider -------------------------------------------------- */

.quote-slider .btn-wrap {
   width: calc(50% - (var(--gap-padding-big) * 0.5));
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
   z-index: 10;
   align-items: center;
}

.quote-slider .btn-wrap button.btn-arrow[disabled] {
   transform: rotate(0.001deg) scale(1);
   pointer-events: none;
}

.quote-slider .btn-wrap .arrow.second .arrow-fill,
.quote-slider .btn-wrap .arrow.second .arrow-content {
   transition: var(--animation-primary);
}

.quote-slider .btn-wrap button.btn-arrow[disabled] .arrow.second .arrow-fill {
   background: transparent;
   border: 1px solid var(--color-border);
}

.quote-slider .btn-wrap button.btn-arrow[disabled] .arrow.second .arrow-content {
   color: var(--color-dark);
}

.quote-slider .row {
   background: var(--color-light-medium);
}

.quote-slider .styled-content h3 {
   margin-bottom: 0.5em;
}

.quote-slider .col-image {
   display: flex;
   justify-content: center;
}

.quote-slider .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   width: calc(100% - ((3.75em + var(--gap-padding)) * 2));
}

.quote-slider .image::before {
   content: "";
   display: block;
   padding-top: 133.333%;
}

.quote-slider .image img.thumbnail {
   border-radius: 0.5em;
}

.quote-slider .image .image-dark {
   background: rgba(var(--color-black-rgb), 0.1);
   border-radius: 0.5em;
   opacity: 0;
   transition: opacity var(--animation-primary);
}

.quote-slider .image .no-image {
   background: var(--color-portrait-back);
   border-radius: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
}

.quote-slider .image .no-image span {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.33);
}

@media screen and (max-width: 1024px){
   .quote-slider .image {
      width: calc(100vw - ((3.75em + var(--container-padding)) * 4));
   }

   .quote-slider .btn-wrap {
      top: 0;
      transform: translateY(0);
      width: calc(100vw - (var(--container-padding)) * 2);
      height: calc((100vw - ((3.75em + var(--container-padding)) * 4)) * 1.333);
   }

}

@media screen and (max-width: 540px){
   .quote-slider .image {
      width: calc(100vw - ((5.25em + var(--container-padding)) * 2));
   }

   .quote-slider .btn-wrap {
      height: calc((100vw - ((5.25em + var(--container-padding)) * 2)) * 1.333);
   }
}

/* ══════════════════════════════════════════════════════════════════
   ASAP · MOTION FX  ·  added 2026-07-08, revised 2026-07-08 (Locomotive
   Scroll removed · it was fighting ScrollTrigger for control of the
   scroll position, which is what broke the sticky/pin/scrub effects
   below). Everything here now runs against the browser's native scroll.
   prefers-reduced-motion disables the motion entirely.
   ══════════════════════════════════════════════════════════════════ */

/* --- native scroll unlock ---
   `main` was `position:fixed; height:100%; overflow:hidden` · the fixed
   viewport "window" that Locomotive used to transform its content within
   (styleguide.css already had a `main.touch` escape hatch doing exactly
   this, for touch devices where Locomotive ran natively). Locomotive is
   gone, so make that the permanent behavior for every device: normal
   flow, natural height, the browser's own scroll. */
main { position: relative !important; height: auto !important; overflow: visible !important; }

/* --- mask-reveal (GSAP SplitText mask:'lines' generates its own
   overflow-hidden line wrappers · no bespoke CSS needed here). --- */

/* --- frosted-glass panels (impact "نحدث الأثر" + contact form) ---
   `.section.section-impact` compound raises specificity above the page's
   inline `.section-big-image-50-50 .content-block` rules. */
.section.section-impact .content-block,
.section.section-contact .content-block {
   background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
   -webkit-backdrop-filter: blur(16px) saturate(135%);
   backdrop-filter: blur(16px) saturate(135%);
   border: 1px solid rgba(255,255,255,.16);
   border-radius: 24px;
   padding: clamp(1.5rem, 3.2vw, 3rem);
   box-shadow: 0 10px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Text reveal lines (Avancio port): each split line is clipped via clipPath in
   JS (inset with -50% sides / -10% bottom, so glyphs/Arabic marks never clip)
   and eased up. No mask wrapper, no padding hacks. No persistent will-change ·
   leaving it on promotes every line to its own layer and can flicker after the
   tween settles; GSAP animates these fine without it. */
.reveal-line { display: block; }

/* ============ Centered crossfade · About + Entities (pinned Osmo stage) ============
   A sticky stage pins for the frame's height (N × 100vh). Steps are stacked +
   centred; opacity crossfades between them. WITHIN the active step each element
   (image → heading → paragraphs → button) reveals at its own scroll-progress
   threshold (see crossfadeSteps in JS). */
.cf { position: relative; }
.cf__viewport { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.cf__step {
   position: absolute; inset: 0; display: flex; align-items: center;
   opacity: 0; visibility: hidden;
   transition: opacity 0.55s var(--ease-relaxed), visibility 0.55s var(--ease-relaxed);
}
.cf__step[data-status="active"] { opacity: 1; visibility: visible; }
.cf__inner {
   max-width: 74em; width: 100%; margin: 0 auto; padding: 0 1.5em;
   display: flex; align-items: center; gap: clamp(2rem, 5vw, 5rem); direction: ltr;
}
.cf__media { width: 44%; flex-shrink: 0; order: 2; }
.cf__text { width: 56%; order: 1; display: flex; flex-direction: column; gap: 1.5rem; }
/* headings/paragraphs stretch (so they wrap); only the tag row + button size to
   their content and sit at the reading edge. */
.cf__text .asap-card__tags,
.cf__text .asap-card__cta,
.cf__text .btn-row { align-self: flex-start; }
html[dir="rtl"] .cf__media { order: 1; }
html[dir="rtl"] .cf__text { order: 2; direction: rtl; text-align: right; }
html[dir="rtl"] .cf__text .asap-card__tags,
html[dir="rtl"] .cf__text .asap-card__cta,
html[dir="rtl"] .cf__text .btn-row { align-self: flex-end; }
.cf__visual { aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; position: relative; }
.cf__visual img,
.cf__visual .asap-card__thumbnail { width: 100%; height: 100%; object-fit: cover; display: block; }
/* entities: the visual reuses .asap-card__image-container (badge/corner overlay),
   which ships aspect-ratio 16/9 · force the portrait, and keep overlay on top */
.cf__visual.asap-card__image-container { aspect-ratio: 3 / 4; border-radius: 16px; }
.cf__visual .asap-card__image-dark,
.cf__visual .asap-card__badge-box { z-index: 2; }
/* entities media a touch smaller than About's story image */
#entities .cf__media { width: 40%; }
#entities .cf__text { width: 58%; }

@media screen and (min-width: 992px) {
   .cf { height: calc(var(--cf-steps, 2) * 100vh); }
}
@media screen and (max-width: 991px) {
   .cf__viewport { position: relative; height: auto; overflow: visible; }
   .cf__step { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important; padding: 5vh 0; }
   .cf__inner { flex-direction: column; }
   .cf__media, .cf__text { width: 100% !important; }
}

/* ============ Osmo "Sticky Steps (Basic)" · Entities ============
   Recipe used as-is: classes, structure, CSS, and its scroll-listener JS.
   Each item is self-contained · a text anchor in normal flow + its OWN
   absolutely-positioned sticky media that crossfades by opacity via the
   [data-sticky-steps-item-status] hook. Our own content typography lives
   inside .sticky-steps__text (we don't apply the recipe's placeholder
   __h2/__p/__eyebrow classes). RTL (Arabic) mirrors the media to the left. */
.sticky-steps { min-height: 100dvh; position: relative; overflow: clip; }
.sticky-steps__container {
   max-width: 74em; margin-left: auto; margin-right: auto;
   padding-left: 1.5em; padding-right: 1.5em;
}
.sticky-steps__collection { min-height: 100dvh; display: flex; position: relative; }
.sticky-steps__list {
   grid-column-gap: 30dvh; grid-row-gap: 30dvh; flex-flow: column; flex: 1;
   padding-top: calc(50dvh - 7.5em); padding-bottom: calc(50dvh - 7.5em); display: flex;
}
.sticky-steps__text {
   grid-column-gap: 2em; grid-row-gap: 2em; flex-flow: column; width: 50%;
   padding-right: 6em; display: flex;
}
.sticky-steps__media {
   width: 50%; height: 100%; padding-left: 3em; position: absolute; top: 0; right: 0;
}
.sticky-steps__sticky {
   align-items: center; width: 100%; min-height: 100dvh; display: flex;
   position: sticky; top: 0;
}
.sticky-steps__visual {
   aspect-ratio: 3 / 4; border-radius: 16px; width: 100%; position: relative; overflow: hidden;
}
.sticky-steps__cover-image {
   object-fit: cover; border-radius: inherit; width: 100%; height: 100%;
   position: absolute; top: 0; left: 0;
}

@media screen and (min-width: 992px) {
   /* Only the ACTIVE step's visual is visible, so moving between steps is a
      clean fade-out/fade-in crossfade IN PLACE (image appears by fading, not
      by sliding up into view). Deviates from the recipe, which keeps "before"
      visuals visible, on purpose per request. */
   [data-sticky-steps-item-status] .sticky-steps__visual {
      transition: opacity .7s ease-in-out, visibility .7s ease-in-out;
      opacity: 0; visibility: hidden;
   }
   [data-sticky-steps-item-status="active"] .sticky-steps__visual { opacity: 1; visibility: visible; }
   [data-sticky-steps-item-status] .sticky-steps__text { transition: opacity .5s ease-in-out; opacity: .25; }
   [data-sticky-steps-item-status="active"] .sticky-steps__text { opacity: 1; }
}

@media screen and (max-width: 991px) {
   .sticky-steps__list { grid-column-gap: 7.5em; grid-row-gap: 7.5em; padding-top: 10em; padding-bottom: 10em; }
   .sticky-steps__text { width: 100%; padding-bottom: 5em; padding-right: 0; }
   .sticky-steps__sticky { min-height: auto; position: relative; top: auto; }
   .sticky-steps__media { width: 100%; height: auto; padding-left: 0; position: relative; top: auto; right: auto; }
}
@media screen and (max-width: 767px) {
   .sticky-steps__text { grid-column-gap: 1.5em; grid-row-gap: 1.5em; }
}

/* RTL (Arabic): mirror the media to the left; the text column auto-flips to
   the right because it's in normal document flow. */
html[dir="rtl"] .sticky-steps__media { right: auto; left: 0; padding-left: 0; padding-right: 3em; }
html[dir="rtl"] .sticky-steps__text { padding-right: 0; padding-left: 6em; }
html[dir="rtl"] .sticky-steps__cover-image { left: auto; right: 0; }
@media screen and (max-width: 991px) {
   html[dir="rtl"] .sticky-steps__media { padding-right: 0; }
   html[dir="rtl"] .sticky-steps__text { padding-left: 0; }
}

/* Entities: the visual carries .asap-card__image-container (for the badge/corner
   overlay styling), which ships aspect-ratio:16/9 · override it back to a
   portrait that fills the sticky media frame. */
.sticky-steps__visual.asap-card__image-container { aspect-ratio: 3 / 4; border-radius: 16px; }
/* keep the badge overlay above the image */
.sticky-steps__visual .asap-card__image-dark,
.sticky-steps__visual .asap-card__badge-box { z-index: 2; }

/* Entities tuning: smaller media (the arms aren't a hero story), roomier text,
   and · critically · stop the flex column from stretching the tag row and the
   CTA button to full width. They size to their content and sit at the reading
   start (left LTR / right RTL). */
@media screen and (min-width: 992px) {
   #entities .sticky-steps__media { width: 40%; }
   #entities .sticky-steps__text { width: 56%; }
}
.sticky-steps__text .asap-card__tags,
.sticky-steps__text .asap-card__cta { align-self: flex-start; }

/* --- hero big image zoom: clip the scaled wrapper to its section --- */
.home-big-image .thumbnail { overflow: hidden; }

/* --- native-scroll lock (replaces Locomotive's scroll.stop()/start(),
   used while a modal / mobile nav is open) --- */
html.scroll-locked, html.scroll-locked body { overflow: hidden !important; height: 100% !important; }

@media (prefers-reduced-motion: reduce) {
   .sticky-steps__visual { opacity: 1 !important; visibility: visible !important; }
   .sticky-steps__text { opacity: 1 !important; }
}

/* --- shared type-scale classes: replaces one-off inline font-size styles
   scattered across index.html's pillar/stat/modal blocks --- */
.pillar-title { font-size: 1.35rem; font-weight: 500; margin: 0; color: #fff; }
.pillar-desc { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; line-height: 1.6; }
.section-lede { font-size: 1.1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.75); }
.stat-number { font-size: 3rem; font-weight: 500; color: var(--color-dark); margin-bottom: 1vh; }
.stat-label { color: rgba(var(--color-dark-rgb), 0.7); font-size: 0.95rem; line-height: 1.5; }
.modal-close { position: absolute; top: 1.5rem; left: 1.5rem; background: transparent; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--color-dark); font-weight: bold; }
.modal-eyebrow { color: var(--color-secondary); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; margin-bottom: 1.5rem; }
.modal-title { font-size: 1.8rem; font-weight: 500; margin-bottom: 2rem; color: var(--color-dark); }
.modal-body { font-size: 1rem; line-height: 1.7; color: rgba(var(--color-dark-rgb), 0.85); margin-bottom: 2.5rem; }
.modal-subhead { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.15); padding-bottom: 0.5rem; color: var(--color-dark); }
.modal-item-desc { font-size: 0.9rem; line-height: 1.5; color: rgba(var(--color-dark-rgb), 0.75); }
.modal-list-item { font-size: 0.95rem; color: rgba(var(--color-dark-rgb), 0.85); display: flex; align-items: center; gap: 10px; }
/* Osmo stacked-cards page transition */
.transition {
  z-index: 2;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: clip;
}

.transition__middle {
  opacity: 0;
  background-color: #2a2c8e;
  position: fixed;
  inset: 0;
}