@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import "libs/slick";
@charset "UTF-8";

#event-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
  width: 100%;
}
/* Desktop: de twee hexagon-knoppen samen even breed als de afbeelding
   erboven laten uitlijnen (links/rechts tegen de randen), i.p.v. gecentreerd
   met veel lege ruimte ertussen. Mobiel blijft gecentreerd (zie basisregel). */
@media screen and (min-width: 768px) {
  #event-cta-row {
    justify-content: center;
    gap: 3rem;
  }
}
.single-event #floating-register.mobile-static-register,
.single-event #discover-more-cta.mobile-static-register {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.single-event .event-pill:has(.event-location-line) {
  flex-direction: column;
  align-items: flex-start;
}
.single-event .event-location-line {
  display: block;
  width: 100%;
  margin-bottom: 1.3em;
}
.single-event .event-location-line:last-child {
  margin-bottom: 0;
}
.single-event .event-arrow {
  display: inline-block;
  margin: 0 0.35em;
}

:root {
  /* Colors: */
  --unnamed-color-ffffff: #FFFFFF;
  --unnamed-color-000000: #000000;
  --unnamed-color-64daf7: #ECE318;
  --unnamed-color-34c5e8: #ECE318;

  /* --- Responsive-systeem, tokenlaag (P1) ---
     Breakpoints, uitsluitend min-width:
     sm 480 / md 768 / lg 1024 / xl 1280 / xxl 1600 */

  /* Merkkleuren, brandguide */
  --c-black: #000000;
  --c-yellow: #ece318;
  --c-white: #ffffff;

  /* Spacing, basis 4px */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;

  /* Typografie, vloeiend (P4)
     Bovengrens is de huidige desktopwaarde, ondergrens is wat de bestaande
     max-width-regels vandaag op mobiel doen. Vloeiend tussen 360 en 1280.
     Enkel koppen: body blijft 14/15/16/18px, die schalen vandaag al niet mee. */
  --fs-20: clamp(16px, 14.4px + 0.44vw, 20px);
  --fs-22: clamp(20px, 19.2px + 0.22vw, 22px);
  --fs-28: clamp(20px, 16.9px + 0.87vw, 28px);
  --fs-30: clamp(20px, 16.1px + 1.09vw, 30px);
  --fs-40: clamp(24px, 17.7px + 1.74vw, 40px);
  --fs-75: clamp(40px, 26.3px + 3.81vw, 75px);

  /* Containers */
  --container-lg: 960px;  --container-xl: 1200px;  --container-xxl: 1440px;
  --gutter-sm: 16px;      --gutter-md: 32px;       --gutter-lg: 40px; }

html {
  scroll-behavior: smooth;
  height: 100%; }

* {
  margin: 0px;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto; }

body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  display: flex;
  flex-direction: column;
  min-height: 100%; }

header {
  padding: 30px 30px 30px 50px;
  height: 93px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  z-index: 10; }
  header .logoDiv {
    width: 145px; }
  header nav {
    display: flex; }
    header nav .main-list {
      display: flex;
      list-style-type: none;
      align-items: center; }
      header nav .main-list .min-content-li {
        min-width: 45px; }
      header nav .main-list li {
        margin-right: 10px; }
  header .burger {
    display: none;
    flex-direction: column;
    cursor: pointer; }
    header .burger div {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 4px;
      transition: all 0.3s ease; }
    header .burger.open div:nth-child(1) {
      transform: rotate(45deg) translate(10px, 5px); }
    header .burger.open div:nth-child(2) {
      opacity: 0; }
    header .burger.open div:nth-child(3) {
      transform: rotate(-45deg) translate(10px, -5px); }
  header .button-lang-switcher {
    padding: 10px; }

.button-lang:hover .lang-swithcer-ul {
  transform: translate(0, 0); }
  .button-lang:hover .lang-swithcer-ul .button svg {
    transform: rotate(90deg); }
  .button-lang:hover .lang-swithcer-ul li {
    opacity: 1; }

.lang-swithcer-ul {
  list-style-type: none;
  position: relative;
  transition: 1s;
  z-index: 2; }
  .lang-swithcer-ul li {
    transition: .3s;
    opacity: 0; }
    .lang-swithcer-ul li:first-child {
      opacity: 1;
      width: 36px; }
    .lang-swithcer-ul li a {
      list-style-type: none;
      color: var(--unnamed-color-ffffff);
      text-decoration: none;
      white-space: nowrap;
      width: 47px; }
      .lang-swithcer-ul li a .arrowForLang {
        height: 10px;
        width: 9px; }

.button, .wpcf7-submit {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  /* background-color: #007BFF; */
  color: #fff;
  text-decoration: none;
  margin: 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  transition: opacity 1s, border-color 1s;
  white-space: nowrap;
  font-size: 14px; }

.button:hover {
  border-top: 3px solid white;
  border-bottom: 3px solid white; }

.button {
  position: relative; }
  .button::before, .button::after {
    display: inline-block;
    height: 40px;
    width: 12.29px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
    top: 50%;
    transform: translateY(-50%);
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23fff" stroke-width="1.5" opacity="1"/></svg>'); }
  .button::after {
    right: -12.29px;
    transform: translateY(-50%) rotate(180deg); }
  .button::before {
    left: -12.29px; }
  .button:hover::before, .button:hover::after {
    opacity: 1; }
  .button:hover::after {
    opacity: 1; }

.button-cta::before,
.button-cta::after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23fff" stroke-width="3" opacity="1"/></svg>');
  opacity: 1; }

.button-cta {
  transition: none;
  border-top: 3px solid white;
  border-bottom: 3px solid white; }

.button-cta:hover {
  background-color: #fff;
  color: #000;
  transition: .3s; }
  .button-cta:hover:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.578 53.717"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926Z" transform="translate(13120.651 1806.631)" fill="%23fff" stroke="%23fff" stroke-linejoin="round" stroke-width="1"/></svg>');
    right: -11.7px;
    padding-bottom: 1px; }
  .button-cta:hover:before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 15.578 53.717"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926Z" transform="translate(13120.651 1806.631)" fill="%23fff" stroke="%23fff" stroke-linejoin="round" stroke-width="1"/></svg>');
    left: -12.20px;
    padding-bottom: 2px; }

footer {
  display: flex;
  background-color: var(--unnamed-color-000000);
  margin-top: auto; }
  footer .logoDiv {
    width: 145px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; }
    footer .logoDiv a {
      display: flex;
      justify-content: center; }
      footer .logoDiv a svg {
        width: 100%; }
    footer .logoDiv img {
      width: 200px; }
  footer .cta-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px 80px;
    background-color: var(--unnamed-color-64daf7);
    width: 30%; }
    footer .cta-container .cta-container-contact {
      display: flex;
      flex-direction: column;
      gap: 15px; }
      footer .cta-container .cta-container-contact h3 {
        font-size: var(--fs-22);
        font-weight: 600;
        color: #000;
        display: flex;
        flex-direction: column; }
        footer .cta-container .cta-container-contact h3 span {
          white-space: no-wrap; }
      footer .cta-container .cta-container-contact div {
        margin-top: 10px; }
    footer .cta-container .footer-socials {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
      list-style: none;
      padding: 0;
      margin: 0; }
      footer .cta-container .footer-socials li {
        display: flex;
        align-items: center; }
        footer .cta-container .footer-socials li a {
          display: flex; }
          footer .cta-container .footer-socials li a svg {
            width: 35px;
            height: auto;
            transition: transform 0.2s ease-in-out; }
            footer .cta-container .footer-socials li a svg:hover {
              transform: scale(1.05); }
    footer .cta-container .button-cta:hover {
      color: #000;
      background: #fff;
      border-top: 3px #000 solid;
      border-bottom: 3px #000 solid;
      transition: .3s; }
      footer .cta-container .button-cta:hover:before, footer .cta-container .button-cta:hover:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="56px" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="%23fff" stroke="%23000" stroke-width="3" opacity="1"/></svg>') !important;
        transition: .3s; }
  footer .footer-nav-item > .footer-list {
    justify-content: space-evenly; }
  footer .footer-list {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    height: 100%; }
    footer .footer-list li {
      color: var(--unnamed-color-ffffff); }
      footer .footer-list li:last-child {
        margin-bottom: 0; }
      footer .footer-list li a {
        color: var(--unnamed-color-ffffff);
        text-decoration: none; }
        footer .footer-list li a:hover {
          color: #ece318 !important; }
  footer .main-footer {
    padding: 30px 40px 30px 30px;
    width: 70%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding-top: 30px;
    padding-bottom: 25px;
    row-gap: 15px; }
  footer .linedin-li a:hover svg #linekdin-path {
    fill: var(--unnamed-color-34c5e8); }
  footer .button-cta {
    line-height: 30px;
    padding: 10px 26px;
    font-weight: 700;
    color: #000;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000; }
    footer .button-cta:before {
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="56px" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23000" stroke-width="3" opacity="1"/></svg>');
      height: 56px;
      width: 16.2px;
      left: -15.8px; }
    footer .button-cta:after {
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="56px" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23000" stroke-width="3" opacity="1"/></svg>');
      height: 56px;
      width: 16.2px;
      right: -15.8px; }
    footer .button-cta:hover:before, footer .button-cta:hover:after {
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="56px" viewBox="0 0 15.578 53.717"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926Z" transform="translate(13120.651 1806.631)" fill="%23fff" stroke="%23fff" stroke-linejoin="round" stroke-width="3"/></svg>'); }
    footer .button-cta:hover:after {
      right: -15.3px;
      padding-bottom: 2px; }
    footer .button-cta:hover:before {
      left: -15.3px;
      padding-bottom: unset !important; }

.job-banner .cases-button, .event-info.case-banner .cases-button {
  border-top: 3px solid white;
  border-bottom: 3px solid white; }
  .job-banner .cases-button::after, .event-info.case-banner .cases-button::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23fff" stroke-width="3" opacity="1"/></svg>');
    opacity: 1; }
  .job-banner .cases-button::before, .event-info.case-banner .cases-button::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23fff" stroke-width="3" opacity="1"/></svg>');
    opacity: 1; }
  .job-banner .cases-button:hover, .job-banner .cases-button:hover::after, .job-banner .cases-button:hover::before, .event-info.case-banner .cases-button:hover, .event-info.case-banner .cases-button:hover::after, .event-info.case-banner .cases-button:hover::before {
    opacity: 1; }
  .job-banner .cases-button:hover, .event-info.case-banner .cases-button:hover {
    border-top: 3px solid #ece318;
    border-bottom: 3px solid #ece318;
    color: #ece318; }
  .job-banner .cases-button:hover::after, .event-info.case-banner .cases-button:hover::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>');
    border: none; }
  .job-banner .cases-button:hover::before, .event-info.case-banner .cases-button:hover::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>');
    border: none; }

.modal-content .cases-button {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.3); }
  .modal-content .cases-button::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23000" stroke-width="1.5" opacity="1"/></svg>');
    opacity: 0.3; }
  .modal-content .cases-button::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23000" stroke-width="1.5" opacity="1"/></svg>');
    opacity: 0.3; }
  .modal-content .cases-button:hover, .modal-content .cases-button:hover::after, .modal-content .cases-button:hover::before {
    opacity: 1; }
  .modal-content .cases-button:hover {
    border-top: 3px solid rgba(0, 0, 0, 0.9);
    border-bottom: 3px solid rgba(0, 0, 0, 0.9);
    color: rgba(0, 0, 0, 0.9); }
  .modal-content .cases-button:hover::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23000" stroke-width="3" opacity="1"/></svg>');
    border: none; }
  .modal-content .cases-button:hover::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23000" stroke-width="3" opacity="1"/></svg>');
    border: none; }

.cases-button {
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  text-transform: uppercase; }
  .cases-button::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23fff" stroke-width="3" opacity="1"/></svg>');
    opacity: 1; }
  .cases-button::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23fff" stroke-width="3" opacity="1"/></svg>');
    opacity: 1; }
  .cases-button:hover {
    border-top: 3px solid #ece318;
    border-bottom: 3px solid #ece318;
    color: #ece318; }
  .cases-button:hover, .cases-button:hover::after, .cases-button:hover::before {
    opacity: 1; }
  .cases-button:hover::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>'); }
  .cases-button:hover::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>'); }

.home-banner-container {
  position: relative;
  padding-top: 98px; }
  .home-banner-container video {
    width: 100%; }
  .home-banner-container h1 {
    position: absolute;
    top: 50%;
    left: 200px;
    color: #ece318;
    font-size: 4rem;
    transform: translateY(-50%);
    font-weight: 600;
    width: 30%;
    z-index: 1; }

.cases-block-container {
  background-color: white;
  padding-top: 100px;
  padding-bottom: 174px; }
  .cases-block-container h2 {
    font-size: var(--fs-40);
    font-weight: 900;
    background: #ece318;
    padding: 0 1rem; }
  .cases-block-container p {
    margin-top: 35px;
    min-height: 60px;
    overflow: visible;
    line-height: 18px;
    line-height: 18px; }
  .cases-block-container .header .button:hover {
    color: black !important;
    background-color: #ece318 !important; }
    .cases-block-container .header .button:hover:before, .cases-block-container .header .button:hover:after {
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="%23ece318" stroke="%23000" stroke-width="3" opacity="1"/></svg>'); }
  .cases-block-container .header, .cases-block-container .slider {
    display: flex;
    justify-content: space-around;
    margin-bottom: 100px; }
    .cases-block-container .header .text-container, .cases-block-container .slider .text-container {
      max-width: 630px; }
    .cases-block-container .header .button:before, .cases-block-container .header .button:after, .cases-block-container .slider .button:before, .cases-block-container .slider .button:after {
      opacity: 0.3; }
    .cases-block-container .header .button:hover:before, .cases-block-container .header .button:hover:after, .cases-block-container .slider .button:hover:before, .cases-block-container .slider .button:hover:after {
      opacity: 0.9; }
  .cases-block-container .header {
    padding-left: 200px;
    padding-right: 165px;
    justify-content: space-between;
    margin-bottom: 56px; }
  .cases-block-container .header a {
    display: none; }
  .cases-block-container .slider-container {
    width: 90%;
    margin: 0 auto; }
  .cases-block-container .slider {
    margin-bottom: 14px; }
  .cases-block-container .slider-container .next {
    margin-right: 0; }
  .cases-block-container .slider-container .prev {
    margin-left: 0; }
    .cases-block-container .slider .button {
      margin-top: 40px; }
    .cases-block-container .slider p {
      font-size: var(--fs-20);
      font-weight: 400;
      line-height: 22px;
      min-height: 67px; }
    .cases-block-container .slider .slide {
      margin-right: 50px;
      width: 440px; }
      .cases-block-container .slider .slide:last-child {
        margin-right: 0; }

.slider-arrow-container .slick-arrow svg {
  cursor: pointer; }

.slider-arrow-container .next {
  margin-right: 35px; }

.slider-arrow-container .prev svg path:first-of-type, .slider-arrow-container .next svg path:first-of-type {
  transition: .3s; }

.slider-arrow-container .prev:hover svg path:first-of-type, .slider-arrow-container .next:hover svg path:first-of-type {
  fill: #ece318;
  transition: .3s; }

.slider-arrow-container .prev {
  margin-left: 35px; }

.slider-arrow-container section {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px; }

.slider .slide {
  margin-right: 10px; }
  .slider .slide h3 {
    color: #fff;
    font-weight: 700;
    font-size: 16px !important;
    padding: 10px 0; }

.mobile-cases-overview {
  display: none; }

.mobile-blog-overview {
  display: block;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-left: 200px; }

.blog-block-container .header .button {
  display: none; }

/* Montserrat via theme recommended; fallback here */
.ctrl-booking {
  font-family: "Montserrat", sans-serif;
  padding: 80px 0; }
  .ctrl-booking h2 {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em; }
  .ctrl-booking p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 12px; }
  .ctrl-booking label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase; }
  .ctrl-booking input {
    font-family: inherit;
    font-size: 15px;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid #000;
    background: transparent;
    outline: none; }
    .ctrl-booking input:focus {
      border-bottom-color: #ece318; }
    .ctrl-booking input[disabled] {
      opacity: 0.6; }

.ctrl-booking-layout {
  /* Equivalent to: width: min(1100px, calc(100% - 2rem)); but Sass-safe */
  width: calc(100% - 2rem);
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px; }

.ctrl-booking-meta {
  font-size: 14px;
  font-weight: 600;
  border-left: 4px solid #ece318;
  padding-left: 12px;
  margin-top: 16px; }

.ctrl-booking-form {
  display: grid;
  gap: 28px; }

.ctrl-booking-field {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.ctrl-booking-help {
  font-size: 12px;
  opacity: 0.6;
  text-align: right; }

.ctrl-booking-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px; }

.ctrl-booking-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px; }

.ctrl-booking-slot {
  border: 2px solid #000;
  background: transparent;
  padding: 14px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer; }
  .ctrl-booking-slot.selected {
    background: #ece318;
    border-color: #ece318; }
  .ctrl-booking-slot[disabled] {
    opacity: 0.35;
    cursor: not-allowed; }

.ctrl-booking-empty {
  font-size: 14px;
  opacity: 0.6; }

.ctrl-booking-btn {
  margin-top: 12px;
  padding: 18px;
  border: none;
  background: #ece318;
  color: #000;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em; }
  .ctrl-booking-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed; }

.ctrl-booking-status {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600; }
  .ctrl-booking-status.ok {
    color: #0a7a2f; }
  .ctrl-booking-status.err {
    color: #b00020; }

/* =========================
   CTRL Event — Agenda (SCSS)
   Namespace: body .ctrl-agenda
   ========================= */
body .ctrl-agenda {
  max-width: 100%;
  margin: 0 auto 5rem;
  /* ===== Agenda items ===== */
  /* Mobile/tablet: tap toggles .is-open; animate via class */
  /* Desktop: open on hover; animate via :hover */
  /* Type badges */
  /* ===== Presenters (morph transition) ===== */
  /* ===== Mobile layout tweaks ===== */ }
  body .ctrl-agenda__title {
    display: inline-block;
    background: #ece318;
    color: #000;
    font-weight: 800;
    font-size: 2rem;
    padding: .15rem .75rem;
    margin-bottom: 1rem; }
  body .ctrl-agenda__list {
    display: flex;
    flex-direction: column; }
  body .ctrl-agenda .agenda-item {
    border-top: 3px solid #ece318;
    background: #fff;
    transition: background-color .25s;
    /* Chevron icon in summary */
    /* Smooth expand/collapse container (animates on hover + tap) */
    /* If any old stylesheet still sets presenter details to display:none,
	  neutralize it hard (safe even if you don't have that element). */
    /* Keep chevrons from shifting (just in case order changed) */
    /* Desktop-only enlargement with extra specificity */
    /* Respect reduced motion */ }
    body .ctrl-agenda .agenda-item:first-child {
      border-top: none; }
    body .ctrl-agenda .agenda-item:hover {
      background: #f1f2f4; }
    body .ctrl-agenda .agenda-item.is-open {
      background: #f1f2f4; }
    body .ctrl-agenda .agenda-item__summary {
      display: grid;
      grid-template-columns: 160px 1fr 22px;
      /* fixed icon column */
      gap: 1rem;
      align-items: center;
      padding: 2rem 1.5rem;
      cursor: pointer; }
      body .ctrl-agenda .agenda-item__summary[tabindex="0"] {
        outline: none; }
    body .ctrl-agenda .agenda-item__time {
      font-weight: 600;
      font-size: .95rem;
      color: #333;
      white-space: nowrap; }
    body .ctrl-agenda .agenda-item__title {
      font-weight: 800;
      font-size: 1.15rem;
      color: #0f172a;
      width: 75%; }
    body .ctrl-agenda .agenda-item .icon {
      width: 22px;
      height: 22px;
      color: #0f172a;
      transition: transform .3s ease; }
    body .ctrl-agenda .agenda-item__details {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      padding: 0 1.5rem;
      /* collapsed padding */
      background: #f9fafb;
      transition: max-height .45s ease, opacity .35s ease, padding .35s ease; }
    body .ctrl-agenda .agenda-item .presenter__bio {
      display: block;
      /* so max-height anim can work */
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity .35s ease, max-height .45s ease, margin-top .35s ease;
      color: #475569;
      font-size: .95rem;
      line-height: 1.6;
      margin-top: 0; }
    body .ctrl-agenda .agenda-item .presenter.is-open .presenter__bio {
      opacity: 1;
      max-height: 300px;
      margin-top: .9rem; }
    body .ctrl-agenda .agenda-item .presenter__details {
      display: flex !important; }
    body .ctrl-agenda .agenda-item .presenter__chev {
      position: absolute;
      right: 12px;
      top: 22px;
      width: 22px;
      height: 22px;
      pointer-events: none;
      transition: transform .3s ease; }
    body .ctrl-agenda .agenda-item .presenter.is-open .presenter__chev {
      transform: rotate(180deg); }
    body .ctrl-agenda .agenda-item .presenter__avatar {
      max-width: none;
      /* ignore global img max-width */
      object-fit: cover;
      /* keep crop nice while resizing */
      will-change: width, height;
      transform-origin: left center; }

@media (hover: hover) and (pointer: fine) {
  body .ctrl-agenda .agenda-item .presenters .presenter.is-open .presenter__avatar {
    width: 150px;
    height: 150px;
    transition: width .4s ease, height .4s ease;
    /* re-assert transition here */ } }

@media (prefers-reduced-motion: reduce) {
  body .ctrl-agenda .agenda-item .presenters .presenter .presenter__avatar {
    transition: none !important; } }

@media (hover: none), (pointer: coarse) {
  body .ctrl-agenda .agenda-item.is-open .agenda-item__details {
    max-height: 1200px;
    /* large enough for content */
    opacity: 1;
    padding: 1.5rem 1.5rem 2rem; }
  body .ctrl-agenda .agenda-item.is-open .agenda-item__summary .icon {
    transform: rotate(180deg); } }

@media (hover: hover) and (pointer: fine) {
  body .ctrl-agenda .agenda-item:hover .agenda-item__details {
    max-height: 1200px;
    opacity: 1;
    padding: 1.5rem 1.5rem 2rem; }
  body .ctrl-agenda .agenda-item:hover .agenda-item__summary .icon {
    transform: rotate(180deg); } }
  body .ctrl-agenda .badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1rem 0; }
  body .ctrl-agenda .badge {
    background: #0f172a;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: .35rem .7rem;
    border-radius: 9999px; }
  body .ctrl-agenda .presenters {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed #d4d4d4; }
  body .ctrl-agenda .presenter {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    padding: .8rem .9rem;
    transition: background-color .2s, transform .35s ease, box-shadow .35s ease;
    overflow: hidden;
    cursor: pointer;
    /* Row: avatar + info (chevron is absolutely positioned) */
    /* Fixed chevron (doesn't move with content) */
    /* Avatar: rounded square; morphs on desktop only */
    /* Desktop morph (enlarge avatar) */
    /* Mobile: bigger base; no morph needed */
    /* Text */
    /* Biography fades/slides in */ }
    body .ctrl-agenda .presenter:hover {
      background: #f9fafb; }
    body .ctrl-agenda .presenter.is-open {
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
      transform: scale(1.01); }
    body .ctrl-agenda .presenter__row {
      display: grid;
      grid-template-columns: auto 1fr;
      /* avatar + info */
      align-items: center;
      gap: .9rem;
      padding-right: 34px;
      /* reserve space for chevron */ }
    body .ctrl-agenda .presenter__chev {
      position: absolute;
      right: 12px;
      top: 22px;
      width: 22px;
      height: 22px;
      transition: transform .3s ease;
      pointer-events: none;
      /* clicks go to row */ }
    body .ctrl-agenda .presenter.is-open body .ctrl-agenda .presenter__chev {
      transform: rotate(180deg); }
    body .ctrl-agenda .presenter__avatar {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      object-fit: cover;
      flex-shrink: 0;
      transition: width .4s ease, height .4s ease; }

@media (hover: hover) and (pointer: fine) {
  body .ctrl-agenda .presenter.is-open body .ctrl-agenda .presenter__avatar {
    width: 150px;
    height: 150px; } }

@media (hover: none), (pointer: coarse) {
  body .ctrl-agenda .presenter__avatar {
    width: 80px;
    height: 80px; } }
    body .ctrl-agenda .presenter__info {
      display: flex;
      flex-direction: column;
      flex: 1;
      line-height: 1.3;
      min-width: 0;
      transition: transform .35s ease, opacity .35s ease; }
    body .ctrl-agenda .presenter__name {
      font-weight: 700;
      color: #0f172a;
      font-size: 1rem;
      transition: font-size .35s ease; }
    body .ctrl-agenda .presenter.is-open body .ctrl-agenda .presenter__name {
      font-size: 1.15rem; }
    body .ctrl-agenda .presenter__meta {
      font-size: .9rem;
      color: #64748b; }
    body .ctrl-agenda .presenter__bio {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity .35s ease, max-height .45s ease, margin-top .35s ease;
      color: #475569;
      font-size: .95rem;
      line-height: 1.6;
      margin-top: 0; }
    body .ctrl-agenda .presenter.is-open body .ctrl-agenda .presenter__bio {
      opacity: 1;
      max-height: 300px;
      margin-top: .9rem; }
  body .ctrl-agenda .notes {
    margin-top: 1rem;
    color: #475569;
    border-top: 1px dashed #d4d4d4;
    padding-top: .75rem; }

@media (max-width: 720px) {
  body .ctrl-agenda .agenda-item__summary {
    grid-template-columns: 1fr 22px;
    padding: 1.5rem 1rem; }
  body .ctrl-agenda .agenda-item__time {
    order: -1;
    font-size: .9rem;
    grid-column: 1 / -1; }
  body .ctrl-agenda .presenter__chev {
    right: 10px;
    top: 18px; } }

.wp-block-ctrl-why-ctrl-engineering-block, .wp-block-ctrl-why-ctrl-engineering-block-page {
  background-color: var(--unnamed-color-000000);
  padding-top: 100px; }

.why-ctrl-engin-container {
  margin: 0 auto;
  width: 90%;
  display: flex; }
  .why-ctrl-engin-container .text-container {
    width: 25vw;
    margin-top: 100px;
    color: var(--unnamed-color-64daf7); }
    .why-ctrl-engin-container .text-container h2 {
      font-size: var(--fs-40);
      position: relative;
      z-index: 1;
      margin-bottom: 50px; }
    .why-ctrl-engin-container .text-container p {
      position: absolute;
      color: var(--unnamed-color-ffffff);
      z-index: 1;
      width: 50%;
      font-size: 20px; }
    .why-ctrl-engin-container .text-container a {
      left: 0; }
    .why-ctrl-engin-container .text-container .btn-div a.button {
      border-top: 3px solid rgba(236, 227, 24, 0.3);
      border-bottom: 3px solid rgba(236, 227, 24, 0.3); }
      .why-ctrl-engin-container .text-container .btn-div a.button::before {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>');
        opacity: 0.3; }
      .why-ctrl-engin-container .text-container .btn-div a.button::after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>');
        opacity: 0.3; }
    .why-ctrl-engin-container .text-container .btn-div a.button:hover {
      border-top: 3px solid #ece318;
      border-bottom: 3px solid #ece318;
      color: #ece318; }
      .why-ctrl-engin-container .text-container .btn-div a.button:hover::before {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>') !important;
        opacity: 1; }
      .why-ctrl-engin-container .text-container .btn-div a.button:hover::after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>') !important;
        opacity: 1; }
  .why-ctrl-engin-container .image-height-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px; }
    .why-ctrl-engin-container .image-height-container .image-container {
      position: relative; }
      .why-ctrl-engin-container .image-height-container .image-container img {
        width: 100%; }
      .why-ctrl-engin-container .image-height-container .image-container .hex {
        color: #fff;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        line-height: 22px;
        font-weight: 400;
        font-size: 20px; }
      .why-ctrl-engin-container .image-height-container .image-container .hex-0 {
        top: 17%;
        left: 44%; }
      .why-ctrl-engin-container .image-height-container .image-container .hex-1 {
        top: 30%;
        left: 62%;
        color: var(--unnamed-color-64daf7); }
      .why-ctrl-engin-container .image-height-container .image-container .hex-2 {
        top: 57%;
        left: 65%;
        color: var(--unnamed-color-64daf7); }
      .why-ctrl-engin-container .image-height-container .image-container .hex-3 {
        top: 78%;
        left: 53%;
        color: var(--unnamed-color-64daf7); }
      .why-ctrl-engin-container .image-height-container .image-container .hex-4 {
        top: 72%;
        left: 28%; }
      .why-ctrl-engin-container .image-height-container .image-container .hex-5 {
        top: 37%;
        left: 24%; }

.why-ctrl-engin-page-container, .why-ctrl-engin-page-container-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 0px;
  width: 80%;
  margin: auto; }
  .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner {
    display: flex;
    flex-direction: row;
        width: 100%;
    }
    .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .text-container, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .text-container {
      position: relative;
      width: 50%;
      min-width: 40%;
      color: var(--unnamed-color-64daf7); }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .text-container h2, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .text-container h2 {
        font-size: var(--fs-75);
        white-space: nowrap;
        font-weight: unset;
        position: relative;
        z-index: 1;
        margin-bottom: 50px !important;
        max-width: 630px;
        margin: 0 auto; }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .text-container p, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .text-container p {
        position: absolute;
        color: var(--unnamed-color-ffffff);
        z-index: 1;
        width: 50%;
        font-size: 20px; }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .text-container a, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .text-container a {
        position: absolute;
        left: 0; }
    .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .image-height-container, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .image-height-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 100px;
        container-type: inline-size;
        width: 100%;
    }
    .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .image-container, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .image-container {
      position: relative; }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .image-container img, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .image-container img {
        width: 100%; }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .image-container .hex, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .image-container .hex {
        color: #fff;
        position: absolute;
        top: 0;
        width: 200px;
        text-align: center;
        text-transform: uppercase;
        font-size: clamp(12px, 3.52cqw, 20px);
        line-height: 1.1;
        font-weight: 400;
    }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .image-container .hex-0, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .image-container .hex-0 {
        top: 14.4%;
        transform: translateY(-50%);
        left: 39%;
        width: max(24.7%, 7.2em); }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .image-container .hex-1, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .image-container .hex-1 {
        top: 28.4%;
        transform: translateY(-50%);
        left: 60%;
        color: var(--unnamed-color-64daf7);
        width: max(31.3%, 7.9em); }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .image-container .hex-2, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .image-container .hex-2 {
        top: 55.7%;
        transform: translateY(-50%);
        left: 62%;
        color: var(--unnamed-color-64daf7);
        width: 30.5%; }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .image-container .hex-3, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .image-container .hex-3 {
        top: 82.4%;
        transform: translateY(-50%);
        left: 53%;
        width: max(20.4%, 7em);
        color: var(--unnamed-color-64daf7); }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .image-container .hex-4, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .image-container .hex-4 {
        top: 71.7%;
        transform: translateY(-50%);
        left: 20%;
        width: 32.9%;
    }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-banner .image-container .hex-5, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-banner .image-container .hex-5 {
        top: 36.7%;
        transform: translateY(-50%);
        left: 13%;
        width: 28.8%; }
  .why-ctrl-engin-page-container .why-ctrl-engin-page-container-text, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: white; }
    .why-ctrl-engin-page-container .why-ctrl-engin-page-container-text .hex-item, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-text .hex-item {
      display: flex;
      flex-direction: column;
      flex: 1 1 calc(33.33%);
      align-items: center;
      max-width: calc(33.33%);
      min-width: 50%;
      gap: 15px;
      padding: 2rem; }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-text .hex-item h3, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-text .hex-item h3 {
        color: #ece318;
        font-size: 20px !important;
        font-weight: unset;
        text-transform: uppercase;
        text-align: center; }
      .why-ctrl-engin-page-container .why-ctrl-engin-page-container-text .hex-item p, .why-ctrl-engin-page-container-small .why-ctrl-engin-page-container-text .hex-item p {
        font-size: 18px; }

.why-ctrl-engin-container {
  width: unset;
  margin-left: 200px; }
  .why-ctrl-engin-container .text-container p {
    width: 100%; }
  .why-ctrl-engin-container .text-container h2 {
    font-weight: 400;
    white-space: nowrap; }

.wp-block-ctrl-customers-block .customers-container, .wp-block-ctrl-your-benefit-partner-block .customers-container {
  padding: 100px 2px; }
  .wp-block-ctrl-customers-block .customers-container .header-div a.button, .wp-block-ctrl-your-benefit-partner-block .customers-container .header-div a.button {
    color: rgba(236, 227, 24, 0.9);
    border-top: 3px solid rgba(236, 227, 24, 0.6);
    border-bottom: 3px solid rgba(236, 227, 24, 0.6); }
    .wp-block-ctrl-customers-block .customers-container .header-div a.button::before, .wp-block-ctrl-customers-block .customers-container .header-div a.button::after, .wp-block-ctrl-your-benefit-partner-block .customers-container .header-div a.button::before, .wp-block-ctrl-your-benefit-partner-block .customers-container .header-div a.button::after {
      opacity: 0.6; }
    .wp-block-ctrl-customers-block .customers-container .header-div a.button::before, .wp-block-ctrl-your-benefit-partner-block .customers-container .header-div a.button::before {
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>'); }
    .wp-block-ctrl-customers-block .customers-container .header-div a.button::after, .wp-block-ctrl-your-benefit-partner-block .customers-container .header-div a.button::after {
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>'); }
  .wp-block-ctrl-customers-block .customers-container h2, .wp-block-ctrl-your-benefit-partner-block .customers-container h2 {
    width: 85%;
    margin: 0 auto;
    font-weight: 900;
    background: #ece318;
    padding: 0 1rem;
    font-size: var(--fs-40); }

.wp-block-ctrl-customers-block .next-customers, .wp-block-ctrl-customers-block .prev-customers, .wp-block-ctrl-your-benefit-partner-block .next-customers, .wp-block-ctrl-your-benefit-partner-block .prev-customers {
  cursor: pointer; }
  .wp-block-ctrl-customers-block .next-customers svg path:first-of-type, .wp-block-ctrl-customers-block .prev-customers svg path:first-of-type, .wp-block-ctrl-your-benefit-partner-block .next-customers svg path:first-of-type, .wp-block-ctrl-your-benefit-partner-block .prev-customers svg path:first-of-type {
    transition: .3s; }
  .wp-block-ctrl-customers-block .next-customers:hover svg path:first-of-type, .wp-block-ctrl-customers-block .prev-customers:hover svg path:first-of-type, .wp-block-ctrl-your-benefit-partner-block .next-customers:hover svg path:first-of-type, .wp-block-ctrl-your-benefit-partner-block .prev-customers:hover svg path:first-of-type {
    fill: #ece318;
    transition: .3s; }

.wp-block-ctrl-customers-block .next-customers, .wp-block-ctrl-your-benefit-partner-block .next-customers {
  margin-right: 10px; }

.wp-block-ctrl-customers-block .prev-customers, .wp-block-ctrl-your-benefit-partner-block .prev-customers {
  margin-left: 10px; }

.wp-block-ctrl-customers-block .slider-container, .wp-block-ctrl-your-benefit-partner-block .slider-container {
  display: flex;
  align-items: center; }
  .wp-block-ctrl-customers-block .slider-container .slider_customers, .wp-block-ctrl-your-benefit-partner-block .slider-container .slider_customers {
    width: 80%;
    margin: 0 auto; }
    .wp-block-ctrl-customers-block .slider-container .slider_customers .slick-slide, .wp-block-ctrl-your-benefit-partner-block .slider-container .slider_customers .slick-slide {
      min-height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 30px;
      margin-right: 30px; }
    .wp-block-ctrl-customers-block .slider-container .slider_customers img, .wp-block-ctrl-your-benefit-partner-block .slider-container .slider_customers img {
      width: 150px;
      transition: filter 0.3s ease;
      object-fit: contain;
      height: 64px; }

.wp-block-ctrl-customers-block .customers-container h2 {
  width: unset;
  margin-left: 200px; }

.wp-block-ctrl-your-benefit-banner-block {
  color: black !important; }



.wp-block-ctrl-benefits-block, .wp-block-ctrl-your-benefit-banner-block {
  background-color: var(--unnamed-color-000000);
  color: #fff; }
  .wp-block-ctrl-benefits-block .benefit-banner, .wp-block-ctrl-your-benefit-banner-block .benefit-banner {
    background-color: #000 !important;
    flex-direction: row; }
  .wp-block-ctrl-benefits-block section, .wp-block-ctrl-your-benefit-banner-block section {
    display: flex;
    flex-direction: column;
    margin: 0 auto; }
    .wp-block-ctrl-benefits-block section .benefits-banner-container, .wp-block-ctrl-your-benefit-banner-block section .benefits-banner-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between; }
      .wp-block-ctrl-benefits-block section .benefits-banner-container .btn-div a.button, .wp-block-ctrl-your-benefit-banner-block section .benefits-banner-container .btn-div a.button {
        border-top: 3px solid rgba(236, 227, 24, 0.3);
        border-bottom: 3px solid rgba(236, 227, 24, 0.3); }
        .wp-block-ctrl-benefits-block section .benefits-banner-container .btn-div a.button::before, .wp-block-ctrl-your-benefit-banner-block section .benefits-banner-container .btn-div a.button::before {
          content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>');
          opacity: 0.3; }
        .wp-block-ctrl-benefits-block section .benefits-banner-container .btn-div a.button::after, .wp-block-ctrl-your-benefit-banner-block section .benefits-banner-container .btn-div a.button::after {
          content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>');
          opacity: 0.3; }
      .wp-block-ctrl-benefits-block section .benefits-banner-container .btn-div a.button:hover, .wp-block-ctrl-your-benefit-banner-block section .benefits-banner-container .btn-div a.button:hover {
        border-top: 3px solid #ece318;
        border-bottom: 3px solid #ece318;
        color: #ece318; }
        .wp-block-ctrl-benefits-block section .benefits-banner-container .btn-div a.button:hover::before, .wp-block-ctrl-your-benefit-banner-block section .benefits-banner-container .btn-div a.button:hover::before {
          content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>') !important;
          opacity: 1; }
        .wp-block-ctrl-benefits-block section .benefits-banner-container .btn-div a.button:hover::after, .wp-block-ctrl-your-benefit-banner-block section .benefits-banner-container .btn-div a.button:hover::after {
          content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>') !important;
          opacity: 1; }
    .wp-block-ctrl-benefits-block section .benefits-text-container, .wp-block-ctrl-your-benefit-banner-block section .benefits-text-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      color: white;
      width: 100%; }
      .wp-block-ctrl-benefits-block section .benefits-text-container .hex-item, .wp-block-ctrl-your-benefit-banner-block section .benefits-text-container .hex-item {
        display: flex;
        flex-direction: column;
        flex: 1 1 calc(33.33%);
        align-items: center;
        max-width: calc(33.33%);
        min-width: 250px;
        gap: 15px;
        padding: 3rem 0 3rem 0; }
    .wp-block-ctrl-benefits-block section .benefits-text-container .hex-item {
      min-width: 100%; }
        .wp-block-ctrl-benefits-block section .benefits-text-container .hex-item:nth-of-type(1), .wp-block-ctrl-your-benefit-banner-block section .benefits-text-container .hex-item:nth-of-type(1) {
          align-items: start; }
        .wp-block-ctrl-benefits-block section .benefits-text-container .hex-item:nth-of-type(3), .wp-block-ctrl-your-benefit-banner-block section .benefits-text-container .hex-item:nth-of-type(3) {
          align-items: end; }
        .wp-block-ctrl-benefits-block section .benefits-text-container .hex-item h3, .wp-block-ctrl-your-benefit-banner-block section .benefits-text-container .hex-item h3 {
          color: #ece318;
          font-size: 24px;
          width: 100%;
          font-weight: normal;
          text-align: center; }
        .wp-block-ctrl-benefits-block section .benefits-text-container .hex-item p, .wp-block-ctrl-your-benefit-banner-block section .benefits-text-container .hex-item p {
          display: flex;
          flex-direction: column;
          font-size: 20px;
          width: 100%;
          text-align: center;
          line-height: 2rem; }
          .wp-block-ctrl-benefits-block section .benefits-text-container .hex-item p span, .wp-block-ctrl-your-benefit-banner-block section .benefits-text-container .hex-item p span {
            text-align: center;
            padding-top: 2rem;
            padding-bottom: 1rem;
            color: #ece318; }
  .wp-block-ctrl-benefits-block .text-container, .wp-block-ctrl-your-benefit-banner-block .text-container {
    margin-top: 75px;
    width: 25vw;
    color: var(--unnamed-color-64daf7); }
.wp-block-ctrl-your-benefit-banner-block .benefit-banner .text-container {
  width: 100%; }
    .wp-block-ctrl-benefits-block .text-container h2, .wp-block-ctrl-your-benefit-banner-block .text-container h2 {
      white-space: nowrap;
      font-size: var(--fs-40);
      position: relative;
      z-index: 1;
      margin-bottom: 50px;
      font-weight: 400; }
    .wp-block-ctrl-benefits-block .text-container p, .wp-block-ctrl-your-benefit-banner-block .text-container p {
      color: var(--unnamed-color-ffffff);
      z-index: 1;
      max-width: 630px;
      font-size: 20px; }
  .wp-block-ctrl-benefits-block .image-height-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px; }
  .wp-block-ctrl-your-benefit-banner-block .image-height-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px; }
  .wp-block-ctrl-benefits-block .image-container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 80%;
    container-type: inline-size; }
  .wp-block-ctrl-your-benefit-banner-block .image-container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 80%;
        container-type: inline-size; }
    .wp-block-ctrl-benefits-block .image-container .hex-title {
      position: absolute;
      font-size: clamp(12px, 4.13cqw, 16px);
      text-align: center;
      font-weight: 400;
      line-height: 1.375;
      transform: translateY(-50%); }
    .wp-block-ctrl-your-benefit-banner-block .image-container .hex-title {
      position: absolute;
      font-size: 20px;
      text-align: center;
      font-weight: 400;
      line-height: 26px; }
    .wp-block-ctrl-benefits-block .image-container .hex-title-0 {
      top: 14%;
      right: 2.2%;
      width: max(15.8%, 7.15em); }
    .wp-block-ctrl-your-benefit-banner-block .image-container .hex-title-0 {
      top: 12%;
      left: 82%; }
    .wp-block-ctrl-benefits-block .image-container .hex-title-1 {
      top: 86.1%;
      right: 6.2%;
      width: max(15.8%, 9.05em); }
    .wp-block-ctrl-your-benefit-banner-block .image-container .hex-title-1 {
      top: 82%;
      left: 78%;
      width: 190px; }
    .wp-block-ctrl-benefits-block .image-container .hex-title-2 {
      top: 62%;
      left: 7.2%;
      width: max(15.8%, 8.9em); }
    .wp-block-ctrl-your-benefit-banner-block .image-container .hex-title-2 {
      top: 60%;
      right: 77%;
      width: 205px; }
    .wp-block-ctrl-benefits-block .image-container img {
      width: 100%; }
    .wp-block-ctrl-your-benefit-banner-block .image-container img {
      width: 100%; }
  .wp-block-ctrl-benefits-block .btn-div, .wp-block-ctrl-your-benefit-banner-block .btn-div {
    width: 90%;
    margin: 0 auto; }

.wp-block-ctrl-benefits-block section {
  margin: 0 200px; }

.wp-block-ctrl-benefits-block .btn-div {
  width: unset;
  position: relative; }

.wp-block-ctrl-contact-form-block section {
  padding-top: 120px;
  background-color: white; }
  .wp-block-ctrl-contact-form-block section h2 {
    margin-left: 20px;
    font-size: 24px;
    font-weight: 400; }

/* General form styling */
.job-popup .wpcf7-form p:has(button[type="submit"]) {
  margin-top: unset;
  height: 1rem; }

.wpcf7-form {
  background-color: white;
  /* Background color */
  padding: 20px;
  /* Padding */
  border-radius: 5px;
  /* Rounded corners */
  margin: 0 auto;
  /* Center the form */
  width: 70%; }
  .wpcf7-form .wpcf7-response-output {
    border: none;
    color: #000;
    margin-top: 1rem !important; }
  .wpcf7-form > div {
    margin-top: 48px; }
  .wpcf7-form .button {
    border-left: none;
    border-right: none;
    margin-top: 82px; }
  .wpcf7-form label {
    border-bottom: 1px solid var(--unnamed-color-64daf7);
    display: block;
    color: #000;
    font-size: 14px;
    font-weight: 900;
    padding: 10px 0;
    margin-top: 0.5rem; }
  .wpcf7-form input {
    background-color: white;
    border: none;
    outline: none;
    transition: 1s;
    font-size: 19px; }
    .wpcf7-form input:focus {
      transition: 1s; }
      .wpcf7-form input:focus::placeholder {
        transition: 1s;
        opacity: 0; }
    .wpcf7-form input::placeholder {
      font-size: 19px;
      color: #000;
      opacity: 1; }

/* Styling for the form fields */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
  width: 100%;
  /* Full width */ }

/* Placeholder text styling */
::placeholder {
  color: #999;
  /* Placeholder color */ }

/* Submit button styling */
/* Submit button hover effect */
.mail-compant-container {
  display: flex;
  justify-content: space-between; }
  .mail-compant-container div:nth-child(1) {
    margin-right: 25px; }

.wpcf7 form.sent .wpcf7-response-output {
  border: none !important;
  color: #000; }

.wpcf7 form.invalid .wpcf7-response-output {
  border: none !important;
  color: red; }

.wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl {
  padding: 100px 0;
  background-size: cover;
  background-repeat: no-repeat; }
  .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl .button {
    transition: .3s; }
    .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl .button:hover {
      transition: .3s;
      border-top: 3px solid #ece318;
      border-bottom: 3px solid #ece318;
      color: #ece318; }
      .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl .button:hover:after, .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl .button:hover:before {
        transition: .3s;
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>'); }
      .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl .button:hover:after {
        right: -11.4px;
        padding-bottom: 1px; }
      .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl .button:hover:before {
        left: -11.4px;
        padding-bottom: 1px; }
    .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl .button:after, .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl .button:before {
      transition: .3s; }
  .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl h2 {
    color: #fff;
    font-size: var(--fs-40);
    text-align: center;
    font-weight: 400; }
    .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl h2 span {
      color: #ece318; }
  .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl .paragraph-container {
    margin: 0 auto;
    width: 50%;
    max-width: 660px; }
  .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl .btn-container {
    margin-top: 88px;
    display: flex;
    justify-content: center; }
  .wp-block-ctrl-cta-working-for-ctrl-engineering .cta-workging-for-ctrl p {
    margin-top: 40px;
    color: #fff;
    font-size: 16px; }

.blog-block-container .slide .data-time {
  color: var(--unnamed-color-34c5e8);
  font-size: 14px;
  padding: 4px 0; }

.blog-block-container .slide h3 {
  padding-top: 35px;
  padding-bottom: 25px;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  height: 156px;
  text-overflow: ellipsis;
  overflow: hidden; }

.blog-block-container .slide a {
  margin-top: 40px; }

.blog-block-container .paragraph {
  display: -webkit-box;
  max-width: 100%;
  height: 64px;
  margin: 0 auto;
  line-height: 1;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; }

.blog-block-container .header, .blog-block-container .slider {
  display: flex;
  justify-content: space-around;
  margin-bottom: 100px; }
  .blog-block-container .header .text-container, .blog-block-container .slider .text-container {
    max-width: 630px; }
    .blog-block-container .header .text-container h2, .blog-block-container .slider .text-container h2 {
      font-size: var(--fs-40);
      margin-bottom: 50px;
      font-weight: 400; }
    .blog-block-container .header .text-container h3, .blog-block-container .slider .text-container h3 {
      font-size: var(--fs-40);
      font-weight: 400; }
  .blog-block-container .header .button:before, .blog-block-container .header .button:after, .blog-block-container .slider .button:before, .blog-block-container .slider .button:after {
    opacity: 0.3; }
  .blog-block-container .header .button:hover:before, .blog-block-container .header .button:hover:after, .blog-block-container .slider .button:hover:before, .blog-block-container .slider .button:hover:after {
    opacity: 0.9; }

.blog-block-container .header {
  padding-left: 200px;
  justify-content: space-between;
  align-items: center; }

.blog-block-container .button {
  border-top: 1px solid rgba(100, 218, 247, 0.3) !important;
  border-bottom: 1px solid rgba(100, 218, 247, 0.3) !important;
  color: var(--unnamed-color-64daf7); }
  .blog-block-container .button:hover {
    border-top: 1px solid rgba(100, 218, 247, 0.8) !important;
    border-bottom: 1px solid rgba(100, 218, 247, 0.8) !important; }
  .blog-block-container .button:after, .blog-block-container .button:before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23ece318" stroke-width="1.5" opacity="1"/></svg>');
    opacity: 0.3; }
  .blog-block-container .button:hover:after, .blog-block-container .button:hover:before {
    opacity: 0.8; }

.blog-block-container .slider-arrow-container {
  display: flex;
  justify-content: flex-end; }
  .blog-block-container .slider-arrow-container section {
    width: calc(100% - 322px);
    border-bottom: 1px solid var(--unnamed-color-34c5e8); }

.wp-block-ctrl-why-ctrl-banner {
  background-color: var(--unnamed-color-000000);
  padding: 10px 0 110px; }
  .wp-block-ctrl-why-ctrl-banner .why-ctrl-banner-container {
    display: flex;
    margin: 3rem auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    width: 60%; }
    .wp-block-ctrl-why-ctrl-banner .why-ctrl-banner-container h1, .wp-block-ctrl-why-ctrl-banner .why-ctrl-banner-container h2 {
      font-size: var(--fs-75);
      color: var(--unnamed-color-34c5e8);
      font-weight: 400;
      line-height: 1;
      width: 45%; }
    .wp-block-ctrl-why-ctrl-banner .why-ctrl-banner-container p {
      color: var(--unnamed-color-ffffff);
      font-size: var(--fs-20);
      line-height: 24px;
      width: 45%; }
    .wp-block-ctrl-why-ctrl-banner .why-ctrl-banner-container h1, .wp-block-ctrl-why-ctrl-banner .why-ctrl-banner-container h2, .wp-block-ctrl-why-ctrl-banner .why-ctrl-banner-container p {
      position: relative;
      z-index: 10; }

.wp-block-ctrl-why-ctrl-paragraph-with-media {
  margin-top: -1px;
  padding-bottom: 65px;
  background-color: #000;
  padding-left: 5px;
  padding-right: 5px; }
  .wp-block-ctrl-why-ctrl-paragraph-with-media:last-of-type section {
    padding-bottom: 65px !important; }
  .wp-block-ctrl-why-ctrl-paragraph-with-media .why-ctrl-paragraph-with-media-container {
    background-color: #000;
    color: #fff;
    display: grid;
    justify-content: center;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 90%;
    margin: auto; }
    .wp-block-ctrl-why-ctrl-paragraph-with-media .why-ctrl-paragraph-with-media-container div {
      width: 75%;
      max-width: 1000px; }
    .wp-block-ctrl-why-ctrl-paragraph-with-media .why-ctrl-paragraph-with-media-container .image-container img {
      width: 100%;
      max-width: 1000px; }
    .wp-block-ctrl-why-ctrl-paragraph-with-media .why-ctrl-paragraph-with-media-container .text-container h3 {
      margin-top: 25px;
      margin-bottom: 50px;
      font-size: var(--fs-40);
      line-height: 45px;
      font-weight: 400; }
      .wp-block-ctrl-why-ctrl-paragraph-with-media .why-ctrl-paragraph-with-media-container .text-container h3 span {
        color: #ece318; }
    .wp-block-ctrl-why-ctrl-paragraph-with-media .why-ctrl-paragraph-with-media-container .text-container p {
      line-height: 25px;
      font-weight: unset;
      font-size: 18px; }

.wp-block-ctrl-your-benefit-banner-block {
  background-color: #fff; }
  .wp-block-ctrl-your-benefit-banner-block .benefit-banner {
    padding: 100px 50px;
  flex-direction: column;
  align-items: center;
    background-color: var(--unnamed-color-64daf7); }
      .wp-block-ctrl-your-benefit-banner-block .benefit-banner .image-container .item-0:hover a {
        color: #ece318;
        transition: .3s;
        font-weight: bold; }
      .wp-block-ctrl-your-benefit-banner-block .benefit-banner .image-container .item-0:hover a svg path {
        stroke: #ece318 !important;
        transition: .3s; }
      .wp-block-ctrl-your-benefit-banner-block .benefit-banner .image-container .item-1:hover a {
        color: #ece318;
        transition: .3s;
        font-weight: bold; }
      .wp-block-ctrl-your-benefit-banner-block .benefit-banner .image-container .item-1:hover a svg path {
        stroke: #ece318 !important;
        transition: .3s; }
      .wp-block-ctrl-your-benefit-banner-block .benefit-banner .image-container .item-2:hover a {
        color: #ece318;
        transition: .3s;
        font-weight: bold; }
      .wp-block-ctrl-your-benefit-banner-block .benefit-banner .image-container .item-2:hover a svg path {
        stroke: #ece318 !important;
        transition: .3s; }
  .wp-block-ctrl-your-benefit-banner-block .content-container {
    padding-top: 50px; }
  .wp-block-ctrl-your-benefit-banner-block section {
    display: flex;
    width: 100%;
    padding-left: 200px; }
  .wp-block-ctrl-your-benefit-banner-block .text-container h1 {
    font-size: var(--fs-40);
    font-weight: 400;
    margin-bottom: 50px;
    line-height: 40px;
    color: white; }
    .wp-block-ctrl-your-benefit-banner-block .text-container h1 span {
      color: #ece318; }
  .wp-block-ctrl-your-benefit-banner-block .text-container p {
    font-size: 18px;
    line-height: 24px;
    width: 100%; }
  .wp-block-ctrl-your-benefit-banner-block .image-container {
    position: relative; }
    .wp-block-ctrl-your-benefit-banner-block .image-container svg:hover .border-path {
      opacity: 1; }
    .wp-block-ctrl-your-benefit-banner-block .image-container svg .border-path {
      opacity: 0.6; }
      .wp-block-ctrl-your-benefit-banner-block .image-container svg .border-path:hover {
        opacity: 1; }
    .wp-block-ctrl-your-benefit-banner-block .image-container h2 {
      margin-bottom: 0;
      width: 100%;
        font-size: inherit; }
      .wp-block-ctrl-your-benefit-banner-block .image-container h2 a {
        color: white;
        text-decoration: none;
        font-weight: 400; }
    .wp-block-ctrl-your-benefit-banner-block .image-container div {
      position: absolute; }
    .wp-block-ctrl-your-benefit-banner-block .image-container .how-we-work-item, .wp-block-ctrl-your-benefit-banner-block .image-container .item-0, .wp-block-ctrl-your-benefit-banner-block .image-container .item-1, .wp-block-ctrl-your-benefit-banner-block .image-container .item-2 {
      display: flex;
      flex-direction: column;
      align-items: center;
        font-size: clamp(20px, 2.4cqw, 26px);
        transform: translateY(-50%); }
    .wp-block-ctrl-your-benefit-banner-block .image-container .how-we-work-item {
      text-align: center;
      top: 45%;
      left: 43%; }
    .wp-block-ctrl-your-benefit-banner-block .image-container .item-0 {
      left: 52%;
      top: 24.2%;
        width: max(24.2%, 7.85em);
      text-align: center;
      transition: 1s; }
    .wp-block-ctrl-your-benefit-banner-block .image-container .item-1 {
      left: 54%;
      top: 69.5%;
        width: max(20.6%, 6.95em);
      text-align: center;
      transition: 1s; }
    .wp-block-ctrl-your-benefit-banner-block .image-container .item-2 {
      top: 46.3%;
      left: 25%;
        width: max(24.2%, 6.45em);
      transition: 1s;
      text-align: center; }
    .wp-block-ctrl-your-benefit-banner-block .image-container img {
      width: 100%;
      max-width: 1400px;
      min-width: 850px; }
.wp-block-ctrl-your-benefit-partner-block .header-div {
  display: flex;
  justify-content: space-between;
  padding-left: 200px;
  padding-right: 140px; }

.wp-block-ctrl-your-benefit-partner-block .button {
  border-top: 1px solid rgba(100, 218, 247, 0.3) !important;
  border-bottom: 1px solid rgba(100, 218, 247, 0.3) !important;
  color: var(--unnamed-color-64daf7); }
  .wp-block-ctrl-your-benefit-partner-block .button:hover {
    border-top: 1px solid rgba(100, 218, 247, 0.9);
    border-bottom: 1px solid rgba(100, 218, 247, 0.9); }
    .wp-block-ctrl-your-benefit-partner-block .button:hover:before, .wp-block-ctrl-your-benefit-partner-block .button:hover:after {
      opacity: 0.9; }
  .wp-block-ctrl-your-benefit-partner-block .button:before, .wp-block-ctrl-your-benefit-partner-block .button:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%2334c5e8" stroke-width="1" opacity="1"/></svg>');
    opacity: 0.3; }

.wp-block-ctrl-events-banner-block {
  background-color: black;
  color: white;
  padding: 100px;
  padding-top: 250px;
  padding-left: 200px;
  margin-bottom: 5rem; }

/* Events banner: reduce oversized padding inherited from shared rule above,
   and cap the badge image so it doesn't dominate the block. */
.wp-block-ctrl-events-banner-block {
  padding: 192px 100px 99px 100px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
  position: relative;
  background-image: url('/wp-content/uploads/2025/06/Mask-Group-2.png');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

.wp-block-ctrl-events-banner-block p {
  max-width: 820px !important;
}
.wp-block-ctrl-events-banner-block .image-container {
  margin-top: 8px;
}
.wp-block-ctrl-events-banner-block .image-container img {
  width: 220px;
  height: 220px;
  max-width: 100%;
}
@media (max-width: 767px) {
  .wp-block-ctrl-events-banner-block {
    padding: 120px 30px 99px 30px !important;
    min-height: 100vh;
  }
  .wp-block-ctrl-events-banner-block .image-container img {
    width: 140px;
    height: 140px;
  }
}
  .wp-block-ctrl-our-solutions-banner-block h1, .wp-block-ctrl-events-banner-block h1 {
    font-size: var(--fs-75);
    font-weight: 400;
    margin-bottom: 50px; }
    .wp-block-ctrl-our-solutions-banner-block h1 span, .wp-block-ctrl-events-banner-block h1 span {
      color: #ece318; }
  .wp-block-ctrl-our-solutions-banner-block p, .wp-block-ctrl-events-banner-block p {
    font-size: 20px;
    line-height: 24px;
    max-width: 740px; }

.wp-block-ctrl-our-solutions-banner-block {
  background-color: black;
  color: white;
  padding: 150px 50px 100px 50px;
  margin-bottom: 5rem; }
.wp-block-ctrl-our-solutions-banner-block section h1 {
  margin-top: 75px; }
  .wp-block-ctrl-our-solutions-banner-block section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; }
    .wp-block-ctrl-our-solutions-banner-block section div {
      margin-top: 50px;
      display: flex;
      flex-wrap: wrap;
      row-gap: 15px;
      justify-content: center; }
    .wp-block-ctrl-our-solutions-banner-block svg {
      transform: unset !important;
      left: unset !important; }
      .wp-block-ctrl-our-solutions-banner-block section div a {
        margin-right: 30px; }
  .wp-block-ctrl-our-solutions-banner-block h1 {
    font-size: var(--fs-75);
    font-weight: 400;
    margin-bottom: 50px; }
    .wp-block-ctrl-our-solutions-banner-block h1 span {
      color: #ece318; }
  .wp-block-ctrl-our-solutions-banner-block p {
    font-size: var(--fs-20);
    line-height: 24px;
    max-width: 740px; }

.wp-block-ctrl-events-banner-block {
  padding-top: 100px;
  padding-left: 100px; }
  .wp-block-ctrl-events-banner-block section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-top: 2rem; }
  .wp-block-ctrl-events-banner-block .text-container {
    margin-top: unset !important;
    flex-direction: column; }
  .wp-block-ctrl-events-banner-block .image-container {
    margin-top: unset !important;
    display: flex;
    justify-content: center; }
    .wp-block-ctrl-events-banner-block .image-container img {
      width: 220px !important;
      height: 220px !important;
      min-width: 0 !important;
      max-width: 100% !important;
      object-fit: contain !important; }

.wp-block-ctrl-events-banner-block .events-banner-text-container {
  display: flex;
  flex-direction: column;
  padding-left: 4rem; }

.wp-block-ctrl-cases-banner-block {
  padding-top: 250px;
  padding-bottom: 100px;
  padding-left: 200px;
  background-size: cover;
  color: #fff; }
  .wp-block-ctrl-cases-banner-block section {
    width: 55%; }
  .wp-block-ctrl-cases-banner-block h1 {
    font-size: var(--fs-75);
    line-height: 1;
    margin-bottom: 50px;
    font-weight: 400; }
    .wp-block-ctrl-cases-banner-block h1 span {
      color: #ece318; }
  .wp-block-ctrl-cases-banner-block p {
    line-height: 24px;
    font-size: 20px;
    max-width: 661px; }

.wp-block-ctrl-cases-overview-cases-block {
  background-color: white;
  padding-top: 140px; }
  .wp-block-ctrl-cases-overview-cases-block section {
    display: flex;
    justify-content: center;
    flex-direction: column; }
  .wp-block-ctrl-cases-overview-cases-block .cases-overview-contianer {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-template-columns: repeat(2, minmax(250px, 500px));
    grid-column-gap: 100px;
    justify-content: space-between;
    width: 100%;
    padding: 0 50px; }
    .wp-block-ctrl-cases-overview-cases-block .cases-overview-contianer .cases-overview-item {
      border-top: 2px solid var(--unnamed-color-64daf7);
      margin-bottom: 50px;
      cursor: pointer;
      display: flex;
      flex-direction: column; }
      .wp-block-ctrl-cases-overview-cases-block .cases-overview-contianer .cases-overview-item img {
        width: 100%;
        filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4)); }
      .wp-block-ctrl-cases-overview-cases-block .cases-overview-contianer .cases-overview-item .link-div {
        display: flex;
        justify-content: flex-end;
        margin-top: auto; }
      .wp-block-ctrl-cases-overview-cases-block .cases-overview-contianer .cases-overview-item h2 {
        margin: 20px 0;
        font-weight: 400;
        line-height: 29px;
        font-size: 26px !important; }
      .wp-block-ctrl-cases-overview-cases-block .cases-overview-contianer .cases-overview-item h3 {
        font-weight: 600;
        color: #000;
        font-size: 15px !important;
        padding: 10px 0; }
      .wp-block-ctrl-cases-overview-cases-block .cases-overview-contianer .cases-overview-item p {
        display: block;
        display: -webkit-box;
        max-width: 100%;
        height: 43px;
        margin: 0 auto;
        font-size: 14px;
        line-height: 22px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 50px; }
  .wp-block-ctrl-cases-overview-cases-block .cases-filter-container {
    position: relative;
    padding-right: 0;
    padding-left: 50px;
    width: 100%;
    margin: 0 auto 50px auto; }
    .wp-block-ctrl-cases-overview-cases-block .cases-filter-container h4 {
      position: absolute;
      top: -25px;
      font-size: 14px;
      color: #000;
      font-weight: 900;
      width: 250px;
      display: flex;
      justify-content: space-between; }
      .wp-block-ctrl-cases-overview-cases-block .cases-filter-container h4 .show-all {
        cursor: pointer;
        transition: 2s; }
    .wp-block-ctrl-cases-overview-cases-block .cases-filter-container ul {
      width: 250px;
      list-style-type: none;
      border-top: 1px solid var(--unnamed-color-64daf7);
      border-bottom: 1px solid var(--unnamed-color-64daf7); }
      .wp-block-ctrl-cases-overview-cases-block .cases-filter-container ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        font-size: 14px;
        font-weight: 400;
        padding: 6px 0;
        display: flex;
        justify-content: space-between;
        cursor: pointer; }
        .wp-block-ctrl-cases-overview-cases-block .cases-filter-container ul li svg {
          width: 18px; }
        .wp-block-ctrl-cases-overview-cases-block .cases-filter-container ul li:hover {
          font-weight: bold; }

.single-cases-container .banner {
  display: flex;
  justify-content: center;
  height: clamp(600px, calc((100vh - 93px) / 2), 900px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  margin-top: 92px; }

/* Mobiel-specifieke banner-foto voor Yummy Bakery (post 4573): brede desktop-foto is op mobiel te sterk uitvergroot, */
/* terug naar de wit-opgevulde versie die op mobiel al goed oogde. Op verzoek van Peter. */
@media (max-width: 767px) {
  body.postid-4573 .single-cases-container .banner {
    background-image: url("/wp-content/uploads/2026/09/pannenkoek_wit_80pct-scaled.jpg") !important;
  }
}

/* Event-pagina achtergrond onderaan uitlijnen (Peter, 9 september 2026) */
.single-event .single-cases-container .banner {
  background-position: center bottom;
}

/* Mobiele fix (sessie 9, TRANSFER_cases-paginas-styling.md): de vaste 600px-ondergrens   */
/* hierboven overschrijft de bedoelde 50/50-verdeling op elke viewport lager dan ±1293px, */
/* dus vrijwel elk mobiel toestel. Zelfde formule, lagere noodgrens.                      */
@media (max-width: 767px) {
  .single-cases-container .banner {
    height: clamp(360px, calc((100vh - 93px) / 2), 900px);
  }
}

/* Mobiele fix (sessie 9): #case-scroll-down-btn is 'position:fixed; right:30px; width:64px'  */
/* en overlapt op smalle schermen de introtekst, die tot de rand loopt (op desktop is er      */
/* van nature ruimte naast de tekstkolom). Rechtermarge reserveren zodat de knop niet over     */
/* de laatste tekstregels valt.                                                               */
@media (max-width: 767px) {
  .single-case .cc-page-text {
    padding-right: 84px;
  }
}
  .single-cases-container .banner #case-banner {
    display: flex;
    justify-content: space-between;
    width: 80%; }
    .single-cases-container .banner #case-banner h1.case-banner-title {
      font-size: 2rem !important;
      margin-bottom: 4rem; }
@media screen and (min-width: 768px) {
  .single-cases-container .banner #case-banner h1.case-banner-title {
    margin-bottom: 2.5rem !important;
  }
}
      .single-cases-container .banner #case-banner h1.case-banner-title > span {
        font-size: 2.5rem;
        margin-bottom: 0; }
    .single-cases-container .banner #case-banner h3 {
      font-size: 20px !important; }
  .single-cases-container .banner #case-video {
    max-width: 50rem;
    height: 30rem;
    min-height: 25rem;
    max-height: 35rem; }

.single-cases-container .job-banner {
  display: flex;
  justify-content: center;
  padding-top: 50px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin-top: 92px; }
  .single-cases-container .job-banner #job-banner {
    display: flex;
    justify-content: space-between;
    width: 80%;
    z-index: 1;
    margin-top: 5rem;
    margin-bottom: 10rem; }
    .single-cases-container .job-banner #job-banner h1.job-banner-title {
      font-size: 4rem;
      margin-bottom: 2rem;
      color: white; }
      .single-cases-container .job-banner #job-banner h1.job-banner-title > span {
        font-size: 5rem;
        margin-bottom: 0.5rem; }

.single-cases-container .banner-cta {
  position: absolute;
  top: 82%;
  right: 0;
  padding-bottom: 50px;
  padding-left: 70px;
  padding-right: 70px;
  width: 30%;
  background-color: var(--unnamed-color-64daf7); }
  .single-cases-container .banner-cta .apply-here-btn {
    transition: 0s !important; }
    .single-cases-container .banner-cta .apply-here-btn:after, .single-cases-container .banner-cta .apply-here-btn:before {
      transition: 0s !important; }
    .single-cases-container .banner-cta .apply-here-btn:hover {
      color: #ece318 !important;
      transition: 0s !important;
      background-color: #fff !important; }
      .single-cases-container .banner-cta .apply-here-btn:hover:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="%23fff" stroke="%23fff" stroke-width="3" opacity="1"/></svg>') !important;
        opacity: 1 !important; }
      .single-cases-container .banner-cta .apply-here-btn:hover:before {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="%23fff" stroke="%23fff" stroke-width="3" opacity="1"/></svg>') !important;
        opacity: 1 !important; }
  .single-cases-container .banner-cta h2 {
    padding-top: 84px;
    font-weight: 400;
    color: #fff; }
  .single-cases-container .banner-cta p {
    margin: 50px 0; }
  .single-cases-container .banner-cta .button {
    transition: 0s; }
    .single-cases-container .banner-cta .button:after, .single-cases-container .banner-cta .button:before {
      transition: 0s; }
    .single-cases-container .banner-cta .button:before {
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23fff" stroke-width="1.5" opacity="1"/></svg>'); }
    .single-cases-container .banner-cta .button:after {
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23fff" stroke-width="1.5" opacity="1"/></svg>'); }
    .single-cases-container .banner-cta .button:hover {
      margin-bottom: 0 !important; }
      .single-cases-container .banner-cta .button:hover:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23fff" stroke-width="3" opacity="1"/></svg>');
        opacity: 0.9; }
      .single-cases-container .banner-cta .button:hover:before {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23fff" stroke-width="3" opacity="1"/></svg>');
        opacity: 0.9; }

.main-content {
  margin-left: 200px;
  width: 50%;
  margin-bottom: 150px; }
  .main-content div h1 {
    font-weight: 400;
    margin-top: 50px;
    line-height: 40px;
    font-size: 34px; }
  .main-content > div {
    position: relative; }
  .main-content .button {
    border-top: 0.5px solid #ece318;
    border-bottom: 0.5px solid #ece318;
    color: #000;
    background: #ece318;
    margin-top: 30px; }
    .main-content .button:before, .main-content .button:after {
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="%23ece318" stroke="%23ece318" stroke-width="3" opacity="1"/></svg>');
      opacity: 1; }
  .main-content h3 {
    color: var(--unnamed-color-64daf7);
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
    border-bottom: 1px solid var(--unnamed-color-64daf7);
    padding-bottom: 10px; }

.wp-block-ctrl-paragraph-content-block .paragraph2-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 28px;
  font-size: 20px; }
  .wp-block-ctrl-paragraph-content-block .paragraph2-container > div {
    margin-bottom: 5rem; }
.wp-block-ctrl-paragraph-content-block .paragraph2-container > div ul {
  width: 90%;
  margin: auto; }
    .wp-block-ctrl-paragraph-content-block .paragraph2-container > div h3 {
      color: var(--unnamed-color-64daf7);
      font-size: var(--fs-28) !important;
      line-height: 2rem;
      font-weight: 400;
      margin-bottom: 25px;
      border-bottom: none; }
      .wp-block-ctrl-paragraph-content-block .paragraph2-container > div h3 p {
        font-size: var(--fs-28) !important;
        font-weight: 900;
        color: #000;
        background: #ece318;
        padding: 0 1rem;
        width: fit-content;
        margin-top: 2rem; }
    .wp-block-ctrl-paragraph-content-block .paragraph2-container > div ul li {
      margin: 1rem auto; }
      .wp-block-ctrl-paragraph-content-block .paragraph2-container > div ul li::marker {
        display: none; }

.wp-block-ctrl-paragraph-content-block .paragraph1-container {
  margin-top: 50px; }
  .wp-block-ctrl-paragraph-content-block .paragraph1-container h3 {
    color: var(--unnamed-color-64daf7);
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    margin-bottom: 25px;
    border-bottom: none;
    padding-bottom: 0; }
  .wp-block-ctrl-paragraph-content-block .paragraph1-container p {
    line-height: 22px; }

.wp-block-ctrl-paragraph-with-media-block section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 3rem auto;
  margin-right: 1rem; }
  .wp-block-ctrl-paragraph-with-media-block section .text-and-image-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; }
  .wp-block-ctrl-paragraph-with-media-block section .text-and-image-container.text-only {
    justify-content: flex-start; }
    .wp-block-ctrl-paragraph-with-media-block section .text-and-image-container.text-only > div {
      width: 100%;
      max-width: 900px; }
    .wp-block-ctrl-paragraph-with-media-block section .text-and-image-container img {
      filter: drop-shadow(5px 13px 9px rgba(0, 0, 0, 0.4)); }
    .wp-block-ctrl-paragraph-with-media-block section .text-and-image-container p {
      line-height: 28px;
      font-size: 20px;
      margin-bottom: 3rem; }
  .wp-block-ctrl-paragraph-with-media-block section h3 {
    color: #ece318;
    margin-bottom: 25px;
    border-bottom: none;
    padding-bottom: 0;
    width: 100%;
    font-size: var(--fs-28) !important;
    font-weight: normal;
    text-align: center; }
    .wp-block-ctrl-paragraph-with-media-block section h3 p {
      font-size: var(--fs-28) !important;
      font-weight: 900;
      color: #000;
      background: #ece318;
      padding: 0 1rem;
      width: fit-content;
      margin-top: 2rem; }

  /* Mobiele herwerking single-event blok 2: zelfde formaten/stijlen als op de
     events-overzichtspagina (.events-title / .events-description), en het
     gele titelvak zelf gecentreerd i.p.v. edge-to-edge. */
  /* Desktop blok 2: afbeelding uitlijnen met de bovenkant van de tekst,
   i.p.v. verticaal gecentreerd t.o.v. de volledige tekstkolom. */
@media screen and (min-width: 768px) {
  .single-event .wp-block-ctrl-paragraph-with-media-block section .text-and-image-container {
    align-items: flex-start;
  }
}

@media screen and (max-width: 767px) {
    /* Minder witruimte boven het titelvak */
    .single-event .wp-block-ctrl-paragraph-with-media-block section {
      margin: 1rem auto;
    }
    .single-event .wp-block-ctrl-paragraph-with-media-block section h3 {
      text-align: center;
      align-self: stretch;
      width: 100%;
    }
    .single-event .wp-block-ctrl-paragraph-with-media-block section h3 p {
      font-size: 20px !important;
      padding: 8px !important;
      margin-top: 0.5rem;
      /* Titelvak even breed als de tekstblok eronder i.p.v. fit-content */
      width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      box-sizing: border-box;
    }
    .single-event .wp-block-ctrl-paragraph-with-media-block section .text-and-image-container p {
      font-size: 16px;
      line-height: normal;
      text-align: justify;
    }
    /* Zelfde mobiele tekstgrootte toegepast op vacaturepagina's (blok 1), op vraag van Peter, zie TRANSFER_vacatures-website.md */
    .single-vacancies .wp-block-ctrl-paragraph-with-media-block section .text-and-image-container p {
      font-size: 16px;
      line-height: normal;
      text-align: justify;
    }
    /* Titel-boxen (gele blokken) in blok 2/3 van vacaturepagina's: zelfde mobiele grootte als de titelvak-box op de event-pagina (single-event), op vraag van Peter */
    .single-vacancies .wp-block-ctrl-paragraph-content-block .paragraph2-container > div h3 p {
      font-size: 20px !important;
      padding: 8px !important;
    }
    /* Categorie-titelblokken (ADMINISTRATION/ENGINEERING) op de careers-overzichtspagina: pasten niet op echte smalle mobiele schermen (bv. 360-393px), enkel getest op de 500px-minimumbreedte van de browsertool waar het toevallig nog net paste. Zelfde 20px/8px-aanpak toegepast als de andere titelblokken, op vraag van Peter. */
    .jobs-container .group-title, .jobs-container .download-item h3, .download-container .group-title, .download-container .download-item h3 {
      font-size: 20px !important;
      padding: 8px !important;
    }
    /* Vacaturetitels in de joblijst (bv. "Business Development Engineer"): zelfde mobiele tekstgrootte als de gele titelblokken hierboven, op vraag van Peter */
    .jobs-container .job-content h4, .download-container .job-content h4 {
      font-size: 20px !important;
    }
    /* Bullet-lijst tekst onder Beschrijving/Vereisten (blok 2/3): zelfde grootte als de preview/intro-tekst op de overzichtspagina (18px), op vraag van Peter */
    .single-vacancies .wp-block-ctrl-paragraph-content-block .paragraph2-container {
      font-size: 16px !important;
      line-height: normal !important;
    }
    /* De vorige regel wordt overschreven door een bestaande regel op ul (max-width:1099.98px), daarom hier expliciet ook de ul zelf targeten */
    .single-vacancies .wp-block-ctrl-paragraph-content-block .paragraph2-container > div ul {
      font-size: 16px !important;
      line-height: normal !important;
    }
    /* h3-wrapper rond de gele titelbox: eigen line-height (2rem) sijpelt door naar de p erin, ook gelijktrekken naar 'normal' zoals de introtekst */
    .single-vacancies .wp-block-ctrl-paragraph-content-block .paragraph2-container > div h3 {
      line-height: normal !important;
    }
    /* Blok-scheidingslijnen verplaatst naar universele (niet-mobiel-gescopede) sectie onderaan dit bestand, zodat ze ook op desktop werken met een eigen max-breedte-logica */
    /* Scheidingslijnen tussen de tekstalinea's: gele lijn i.p.v. grijs,
       zoals tussen de events op de events-overzichtspagina */
    .single-event .wp-block-ctrl-paragraph-with-media-block hr {
      border: none !important;
      border-top: 2px solid #ece318 !important;
      margin: 1.5rem 0 !important;
    }
  }
  .wp-block-ctrl-paragraph-with-media-block section div {
    width: 100%; }
    .wp-block-ctrl-paragraph-with-media-block section div img {
      width: 100%; }
  .wp-block-ctrl-paragraph-with-media-block section ul {
    font-size: 20px;
    line-height: 28px; }

.wp-block-ctrl-video-block iframe {
  min-height: 400px; }

.wp-block-ctrl-video-block .video-component {
  position: relative; }
  .wp-block-ctrl-video-block .video-component img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    cursor: pointer; }
  .wp-block-ctrl-video-block .video-component video {
    width: 100%; }

.wp-block-ctrl-blog-overview-blog .blog-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 168px;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
  padding-top: 140px; }
  .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item {
    margin-bottom: 100px;
    width: 590px;
    border-top: 1px solid var(--unnamed-color-34c5e8); }
    .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item h3 {
      font-size: 14px;
      line-height: 14px;
      font-weight: 400;
      padding: 10px 0;
      color: var(--unnamed-color-34c5e8); }
    .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item h2 {
      margin: 20px 0;
      font-weight: 400;
      font-size: 30px;
      line-height: 33px;
      height: 104px;
      overflow: hidden; }
    .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item p {
      display: -webkit-box;
      max-width: 100%;
      height: 64px;
      margin: 0 auto;
      font-size: 14px;
      line-height: 1;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 22px; }
    .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item img {
      width: 100%;
      height: 397px;
      object-fit: cover; }
    .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item .button {
      border-top: 1px solid rgba(100, 218, 247, 0.3);
      border-bottom: 1px solid rgba(100, 218, 247, 0.3);
      color: var(--unnamed-color-34c5e8); }
      .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item .button:hover {
        border-top: 1px solid rgba(100, 218, 247, 0.9);
        border-bottom: 1px solid rgba(100, 218, 247, 0.9); }
        .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item .button:hover:before, .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item .button:hover:after {
          opacity: 0.9; }
      .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item .button:before, .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item .button:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%2334c5e8" stroke-width="1.5" opacity="1"/></svg>');
        opacity: 0.3; }
    .wp-block-ctrl-blog-overview-blog .blog-container .blog-overview-item .link-div {
      padding-top: 50px;
      display: flex;
      justify-content: flex-end; }

.download-container {
  width: 40%;
  margin-left: 250px;
  margin-bottom: 160px; }
  .download-container .download-item {
    margin-top: 70px; }
  .download-container h3 {
    color: var(--unnamed-color-64daf7);
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid var(--unnamed-color-64daf7);
    padding-bottom: 10px; }
  .download-container ul {
    list-style-type: none; }
    .download-container ul li {
      padding: 19px 0;
      border-bottom: 1px solid var(--unnamed-color-64daf7);
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .download-container ul li a {
        font-size: 30px;
        color: black;
        text-decoration: none;
        display: flex;
        align-items: center; }
      .download-container ul li .border-path {
        transition: 0.3s; }
      .download-container ul li svg {
        transition: 2s; }
        .download-container ul li svg:hover .border-path {
          opacity: 0.9; }

.wp-block-ctrl-contact-page-block {
  background-color: white; }
  .wp-block-ctrl-contact-page-block .contact-block-container .header {
    padding-left: 20px; }
    .wp-block-ctrl-contact-page-block .contact-block-container .header h1 {
      font-size: var(--fs-40);
      font-weight: 400; }
    .wp-block-ctrl-contact-page-block .contact-block-container .header p {
      margin-top: 50px;
      margin-bottom: 60px;
      max-width: 661px;
      line-height: 20px; }
  .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container {
    width: 95%;
    margin-top: 0;
    display: flex;
    justify-content: center;
    padding: 20px; }
    .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container .address-container {
      padding-bottom: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
    .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container .contact-details-item p {
      border-bottom: 1px solid var(--unnamed-color-64daf7);
      padding-bottom: 10px;
      font-size: 14px;
      color: #000;
      font-weight: 900;
      margin-top: 0.5rem; }
    .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container .contact-details-item a:not(.button), .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container .contact-details-item span {
      display: inline-block;
      color: #000;
      text-decoration: none;
      font-size: var(--fs-40);
      line-height: 46px; }
    .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container .contact-details-item a:not(.button) {
      padding: 0;
      margin-top: 10px; }
      .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container .contact-details-item a:not(.button):hover {
        text-shadow: 0px 0px 1px #000; }
    .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container .contact-details-item .button {
      padding: 12px 20px; }
    .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container .address-link a {
      font-size: 14px;
      display: inline; }
    .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container .contact-details-item-address span {
      padding: 0; }
    .wp-block-ctrl-contact-page-block .contact-block-container .contact-details-container .contact-details-item-address .button {
      display: inline;
      font-size: 14px;
      color: var(--unnamed-color-64daf7); }

.wp-block-ctrl-job-overview-block section .header {
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 200px;
  padding-left: 200px;
  padding-bottom: 100px;
  color: #fff;
  position: relative;
  z-index: 10; }

/* Zwarte chevron-overgang tussen blok 1 (.header) en blok 2 (.jobs-container),
   zelfde techniek als bij de event-pagina's: trekt omhoog tegen de onderkant
   van blok 1 zodat de punt in het witte blok 2 "prikt". */
.wp-block-ctrl-job-overview-block .job-header-chevron {
  display: block;
  width: 100%;
  height: 25px;
  margin-top: 0;
  position: relative;
  z-index: 2;
  background: #fff;
}

/* Mobiel: blok 1 kreeg dezelfde te-hoge, niet-schalende padding als de
   event-pagina's hadden. Zelfde oplossing: min-height i.p.v. vaste padding. */
@media screen and (max-width: 767px) {
  .wp-block-ctrl-job-overview-block section .header {
    padding-top: 110px;
    padding-left: 25px;
    padding-bottom: 40px;
    min-height: 100vh;
    box-sizing: border-box;
  }
}
  .wp-block-ctrl-job-overview-block section .header h1 {
    font-size: var(--fs-75);
    font-weight: 400; }
    .wp-block-ctrl-job-overview-block section .header h1 span {
      color: #ece318; }
  .wp-block-ctrl-job-overview-block section .header > p {
    margin-top: 50px;
    max-width: 661px;
    line-height: 24px;
    font-size: 20px; }

.wp-block-ctrl-job-overview-block .banner-cta {
  color: #000;
  position: absolute;
  top: 82%;
  z-index: 3; /* boven de chevron-overgang tekenen i.p.v. eronder, zodat de
                 witte lijn niet meer door dit vlak zichtbaar is */
  right: 0;
  padding-bottom: 50px;
  padding-left: 2rem;
  width: 30%;
  background-color: var(--unnamed-color-64daf7); }
  .wp-block-ctrl-job-overview-block .banner-cta h3 {
    padding-top: 84px;
    font-size: 30px;
    font-weight: 600; }
  .wp-block-ctrl-job-overview-block .banner-cta p {
    margin: 50px 0;
    font-size: 18px;
    width: 80%; }
  .wp-block-ctrl-job-overview-block .banner-cta .button {
    transition: .3s !important; }
    .wp-block-ctrl-job-overview-block .banner-cta .button:after, .wp-block-ctrl-job-overview-block .banner-cta .button:before {
      transition: .3s !important;
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23000" stroke-width="3" opacity="1"/></svg>');
      opacity: 1.0 !important; }
    .wp-block-ctrl-job-overview-block .banner-cta .button:hover {
      color: #000 !important;
      transition: .3s !important;
      background-color: #fff !important;
      border-top: 2px solid #000 !important;
      border-bottom: 2px solid #000 !important; }
      .wp-block-ctrl-job-overview-block .banner-cta .button:hover:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="%23fff" stroke="%23000" stroke-width="3" opacity="1"/></svg>') !important;
        transition: .3s !important; }
      .wp-block-ctrl-job-overview-block .banner-cta .button:hover:before {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="%23fff" stroke="%23000" stroke-width="3" opacity="1"/></svg>') !important;
        transition: .3s !important; }

.vacancy-main-content .jobs-overview-button-container a {
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  background: none !important;
  transition: .3s; }
  .vacancy-main-content .jobs-overview-button-container a:before, .vacancy-main-content .jobs-overview-button-container a:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23000" stroke-width="3" opacity="1"/></svg>'); }
  .vacancy-main-content .jobs-overview-button-container a:hover {
    background: #ece318 !important;
    transition: .3s; }
    .vacancy-main-content .jobs-overview-button-container a:hover:before, .vacancy-main-content .jobs-overview-button-container a:hover:after {
      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="%23ece318" stroke="%23000" stroke-width="3" opacity="1"/></svg>'); }

.jobs-container, .download-container {
  margin-left: 280px;
  width: 45%;
  margin-bottom: 80px;
  /* To ensure the hover effect works when hovering over either the title or content */ }
  .jobs-container .group-title, .jobs-container .download-item h3, .download-container .group-title, .download-container .download-item h3 {
    font-size: var(--fs-40);
    font-weight: 900;
    color: #000;
    background: #ece318;
    margin-top: 75px;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
    width: fit-content; }
  .jobs-container .job-content, .download-container .job-content {
    overflow: hidden;
    border-bottom: 2px solid var(--unnamed-color-64daf7);
    transition: all 0.6s ease;
    /* smooth transition effect */ }
    .jobs-container .job-content p, .download-container .job-content p {
      line-height: 24px;
      color: black; }
  .jobs-container .job-content h4, .download-container .job-content h4 {
    font-size: var(--fs-30);
    font-weight: 600;
    cursor: pointer;
    padding: 15px 0;
    margin: 0; }
  .jobs-container .job-content .seccond-content, .download-container .job-content .seccond-content {
    max-height: 0;
    /* initially hidden */
    opacity: 0;
    /* initially transparent */
    transition: all 0.6s ease;
    /* transition for both max-height and opacity */
    overflow: hidden;
    font-size: 18px; }
  .jobs-container .job-content:hover .seccond-content, .download-container .job-content:hover .seccond-content {
    max-height: 1000px;
    /* Ruime vaste waarde i.p.v. 300px: bij langere preview-teksten (bv. Elektrisch Ontwerpingenieur) werd de 'Verder lezen'-knop afgesneden. Zie ook de analoge JS-fix in job-overview-block.php. Gemeld door Mathieu. */
    opacity: 1;
    /* fully visible */ }
  .jobs-container .job-content:hover, .download-container .job-content:hover {
    border-bottom: 1px solid var(--unnamed-color-64daf7);
    /* maintain border on hover */ }
  .jobs-container .seccond-content .teaser-content, .download-container .seccond-content .teaser-content {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 40px; }
    .jobs-container .seccond-content .teaser-content h3, .download-container .seccond-content .teaser-content h3 {
      font-size: 16px;
      font-weight: 600; }
    .jobs-container .seccond-content .teaser-content .button, .download-container .seccond-content .teaser-content .button {
      border-top: 3px solid black !important;
      border-bottom: 3px solid black !important;
      color: #000 !important; }
      .jobs-container .seccond-content .teaser-content .button:before, .jobs-container .seccond-content .teaser-content .button:after, .download-container .seccond-content .teaser-content .button:before, .download-container .seccond-content .teaser-content .button:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="none" stroke="%23000" stroke-width="3" opacity="1"/></svg>');
        opacity: 1 !important; }
      .jobs-container .seccond-content .teaser-content .button:after, .download-container .seccond-content .teaser-content .button:after {
        right: -11.25px; }
      .jobs-container .seccond-content .teaser-content .button:hover, .download-container .seccond-content .teaser-content .button:hover {
        border-top: 3px solid black !important;
        border-bottom: 3px solid black !important;
        background: #ece318;
        transition: .3s; }
        .jobs-container .seccond-content .teaser-content .button:hover:before, .jobs-container .seccond-content .teaser-content .button:hover:after, .download-container .seccond-content .teaser-content .button:hover:before, .download-container .seccond-content .teaser-content .button:hover:after {
          content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.514 50.502"><path id="Path_3327" data-name="Path 3327" d="M-13105.573-1754.777l-14.5-25.074,14.5-24.926" transform="translate(13120.654 1805.028)" fill="%23ece318" stroke="%23000" stroke-width="3" opacity="1"/></svg>');
          opacity: 1 !important; }

.file-upload {
  width: 45%; }
  .file-upload p:has(button) {
    height: 4rem; }
  .file-upload .button {
    margin-top: 10px; }
  .file-upload .file-input {
    display: none; }
  .file-upload .delete-button {
    cursor: pointer; }

.button {
  cursor: pointer; }

.modal {
  z-index: 20;
  display: none;
  /* Hidden by default */
  position: absolute;
  /* Stay in place */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.8);
  /* Black w/ opacity */ }

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 16% auto;
  /* 15% from the top and centered */
  /*padding: 20px;*/
  border: 1px solid #888;
  width: 100%;
  /* Could be more or less, depending on screen size */
  /*max-width: 600px; !* Limit max width *!*/
  border-radius: 8px;
  /* Rounded corners */ }

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin: 2rem; }

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer; }

/* Button */
.button-modal {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px; }

.button-modal:hover {
  background-color: #0056b3; }

.modal-title {
  font-size: var(--fs-40);
  font-weight: 300;
  width: 80%;
  margin: 0 auto;
  text-align: center; }

.modal-title-span {
  font-weight: 700; }

.wp-block-ctrl-partners-block > section {
  padding: unset !important; }

.wp-block-ctrl-events-overview-block {
  padding-top: 73px; }

.events-container {
  width: 75%;
  margin: 0 auto; }

.past-events-divider {
  width: 75%;
  margin: 1.5rem auto 3rem;
  height: 6px;
  border-top: 2px solid #ece318;
  border-bottom: 2px solid #ece318; }
  .events-container .events-item {
    margin-bottom: unset !important;
    padding-bottom: 3rem; }
    .events-container .events-item:not(:first-child) {
      margin-top: 3rem; }
    .events-container .events-item .events-logo {
      width: 20%;
      padding-right: 1rem; }
      .events-container .events-item .events-logo img {
        max-width: 250px;
        min-width: 150px;
        padding: unset; }
    .events-container .events-item .events-text-content {
      width: 70%; }

  /* Desktop herwerking: 'Read more'-knop verplaatst onder de infotekst
     (zie events-overview-block.php), tekstkolom breidt uit tot aan
     de gele lijn i.p.v. ruimte vrij te laten voor een aparte knop-kolom. */
  @media (min-width: 1201px) {
    .wp-block-ctrl-events-overview-block .events-item .events-text-content {
      width: 80%;
    }
    .wp-block-ctrl-events-overview-block .events-item .events-actions {
      max-width: none;
      width: auto;
      margin-top: 1.5rem;
    }
  }
    .events-container .events-item .events-title {
      font-size: 1.25rem;
      font-weight: 900;
      background: #ece318;
      padding: .5rem;
      max-width: fit-content; }
    .events-container .events-item .events-meta {
      margin-top: 1rem;
      font-size: .8rem;
      width: 100%; }
      .events-container .events-item .events-meta .events-date, .events-container .events-item .events-meta .events-location {
        display: flex;
        align-items: center;
        font-weight: 700; }
      .events-container .events-item .events-meta .events-date {
        margin-bottom: 1rem; }
      .events-container .events-item .events-meta svg {
        min-width: 2rem; }
    .events-container .events-item .events-description {
      margin-bottom: 1.25rem;
      padding: .5rem;
      text-align: justify;
      text-justify: inter-word; }
    .events-container .events-item .events-actions {
      max-width: 10%; }
      .events-container .events-item .events-actions .button {
        padding-top: .5rem;
        padding-bottom: .5rem; }

.partners-container .partners-item, .partners-container .events-item, .events-container .partners-item, .events-container .events-item {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  border-bottom: 2px solid var(--unnamed-color-64daf7); }
  .partners-container .partners-item:last-child, .partners-container .events-item:last-child, .events-container .partners-item:last-child, .events-container .events-item:last-child {
    border-bottom: unset !important; }
  .partners-container .partners-item img, .partners-container .events-item img, .events-container .partners-item img, .events-container .events-item img {
    width: 100%;
    max-width: 300px;
    padding: 50px 0;
    margin-right: 125px; }
  .partners-container .partners-item div, .partners-container .events-item div, .events-container .partners-item div, .events-container .events-item div {
    width: 60%; }
  .partners-container .partners-item p, .partners-container .events-item p, .events-container .partners-item p, .events-container .events-item p {
    width: 90%; }

  /* Datum, locatie en beschrijving even breed als het gele titelblok
     (dat blijft op 100% van events-text-content zitten) i.p.v. de 90%
     uit de gedeelde partners/events-regel hierboven. */
  .events-container .events-item .events-date,
  .events-container .events-item .events-location,
  .events-container .events-item .events-description {
    width: 100% !important;
  }


.content-container {
  width: 75%;
  margin: 0 auto; }
  .content-container .content-full-row {
    margin-top: 3rem;
    padding-bottom: 6rem;
    position: relative; }
    .content-container .content-full-row:nth-child(even) .content-item {
      position: relative;
      left: 100%;
      transform: translateX(-100%); }
  .content-container .content-item:nth-child(even) {
    position: relative;
    left: 40%; }
  .content-container .content-item .title {
    margin-bottom: 50px;
    font-size: 30px;
    color: #000;
    font-weight: 900;
    padding: 0 1rem;
    background: #ece318;
    width: fit-content; }
  .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-block {
    margin-top: 50px; }
    .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-block h3 {
      color: #000;
      font-size: var(--fs-40);
      padding-right: 100px;
      font-weight: 400; }
    .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-block h4 {
      font-size: 20px;
      line-height: 24px;
      font-weight: 400; }
    .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-block p {
      margin-top: 25px;
      color: #000; }
    .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-block .bold-paragraph {
      margin-top: 50px;
      font-size: 20px;
      color: #000;
      font-weight: unset; }
  .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-with-media-block .pgwm .image-container img {
    filter: drop-shadow(5px 13px 9px rgba(0, 0, 0, 0.4)); }
  .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-with-media-block {
    margin-top: 50px; }
    .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-with-media-block .pgwm {
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-with-media-block .pgwm div {
        width: 45%;
        margin-bottom: 3rem; }
      .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-with-media-block .pgwm .paragraph-container {
        margin-right: 73px;
        font-size: 18px;
        line-height: 1.75rem; }
        .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-with-media-block .pgwm .paragraph-container ul br:last-of-type {
          display: none; }
        .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-with-media-block .pgwm .paragraph-container h3 {
          font-size: var(--fs-28);
          font-weight: unset; }
        .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-with-media-block .pgwm .paragraph-container .paragraph {
          margin-top: 25px;
          color: #000; }
      .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-with-media-block .pgwm .image-container {
        margin-top: 0;
        margin-left: 0;
        display: flex;
        align-items: center; }
      .content-container .content-item .wp-block-ctrl-content-per-hexagon-paragraph-with-media-block .pgwm img {
        width: 100%;
        max-height: 500px;
        min-width: unset;
        object-fit: cover; }

.wp-block-ctrl-cases-block, .wp-block-ctrl-why-ctrl-engineering-block, .wp-block-ctrl-benefits-block {
  position: relative;
  top: -4px; }

.wp-block-ctrl-video-block, .wp-block-ctrl-general-image-block {
  margin-top: 50px; }

.blog-container-single-post .blog-block-container .header {
  margin: 0 200px;
  padding-left: 0;
  align-items: flex-start; }

.blog-container-single-post .slider-arrow-container {
  margin-top: 60px; }

.blog-container-single-post .slider-arrow-container section {
  padding-bottom: 25px; }

.blog-container-single-post .blog-block-container .slide .data-time {
  padding: 10px 0; }

.blog-container-single-post .blog-block-container .slider .slide {
  width: 440px;
  margin-right: 48px; }

.wp-block-ctrl-general-image-block img {
  width: 100%; }

.small-benefit-content-container {
  margin: 35px auto;
  width: 90%; }
  .small-benefit-content-container h3 {
    margin: 15px 0; }
  .small-benefit-content-container ul {
    list-style-type: none;
    margin-left: 10px; }

.btn-div-2 {
  margin-top: 25px;
  display: none; }

.small-benefit-content-container {
  display: none; }

.btn-div-small {
  display: none; }

.btn-div-size-small {
  display: none; }

.wp-block-ctrl-cases-overview-cases-block .wp-block-ctrl-cta-working-for-ctrl-engineering {
  margin-bottom: 0;
  padding-bottom: 140px; }

.slider-arrow-container .next-blog {
  margin-right: 35px; }

.is-safari .wp-block-ctrl-your-benefit-partner-block .slider-container .slider_customers .slick-slide {
  margin-left: 0 !important; }.is-safari .wp-block-ctrl-your-benefit-partner-block .slider-container .slider_customers img, .is-safari .wp-block-ctrl-customers-block .slider-container .slider_customers img {
  max-width: 250px; }

.wp-block-ctrl-paragraph-with-media-block section div h3 {
  color: var(--unnamed-color-64daf7);
  font-size: var(--fs-28);
  line-height: 24px;
  font-weight: 400;
  margin-bottom: 25px;
  border-bottom: none; }

.modal-content .wpcf7-form {
  padding-bottom: 118px; }

.banner-cta-small {
  display: none;
  position: static !important;
  width: 100% !important;
  padding-left: 35px !important; }

.wp-block-ctrl-contact-form-block {
  padding-bottom: 3rem;
  background-color: white; }

.wp-block-ctrl-customers-block .slider-container .slider_customers img:hover,
.wp-block-ctrl-your-benefit-partner-block .slider-container .slider_customers img:hover {
  filter: grayscale(0%); }


/* Blok-scheidingslijnen (Beschrijving/Wat houdt dit in/Vereisten/Voordelen): universeel (mobiel EN desktop), op vraag van Peter. Zie TRANSFER_vacatures-website.md.
   Lijn als losstaand ::before-element i.p.v. border-top, zodat de breedte onafhankelijk van de tekstkolom ingesteld kan worden:
   - Mobiel: width:100% van de container (436.5px), binnen de max-width van 616px blijft dit gewoon 100%.
   - Desktop: width:100% zou 1200px zijn (volle tekstkolom), maar max-width:616px kapt dit af tot exact de breedte van de lijnen op de vacature-overzichtspagina. */
.single-vacancies .wp-block-ctrl-paragraph-content-block .paragraph2-container > div {
  margin-bottom: 0 !important;
}
.single-vacancies .wp-block-ctrl-paragraph-content-block .paragraph2-container > div + div,
.single-vacancies .wp-block-ctrl-paragraph-content-block + .wp-block-ctrl-paragraph-content-block .paragraph2-container > div:first-child {
  position: relative;
  margin-top: 30px !important;
  padding-top: 30px !important;
}
.single-vacancies .wp-block-ctrl-paragraph-content-block .paragraph2-container > div + div::before,
.single-vacancies .wp-block-ctrl-paragraph-content-block + .wp-block-ctrl-paragraph-content-block .paragraph2-container > div:first-child::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 616px;
  height: 2px;
  background-color: #ece318;
}
.single-vacancies .wp-block-ctrl-paragraph-content-block .paragraph2-container > div + div h3 p,
.single-vacancies .wp-block-ctrl-paragraph-content-block + .wp-block-ctrl-paragraph-content-block .paragraph2-container > div:first-child h3 p {
  margin-top: 0 !important;
}


/* Case-pagina's: gele scheidingslijn tussen de casev2-blokken, dezelfde stijl als bij de vacaturepagina's, op vraag van Peter. Zie TRANSFER_sector-competentie-grid_v2.md / case-pagina-restyling */
[class^="wp-block-ctrl-casev2-"] + [class^="wp-block-ctrl-casev2-"] {
  position: relative;
  border-top: 2px solid #ece318;
  margin-top: 40px !important;
}


/* Case-pagina's: decoratieve gele hexagon-achtergrond (#primary::before, sitebreed gebruikt) specifiek uitschakelen op case-pagina's, op vraag van Peter. Andere paginatypes (vacatures, events, ...) blijven ongewijzigd. */
.single-case #primary::before {
  display: none !important;
}


/* Case-pagina's mobiel: extra zijmarge wegnemen zodat tekst even dicht bij de rand staat als op de vacaturepagina's, op vraag van Peter */
@media screen and (max-width: 767px) {
  .single-case .case-content.container {
    padding: 0 !important;
  }
}


/* Case-banner mobiel: vaste 540px padding-top (bedoeld voor desktop hero) veel te groot op mobiel, waardoor introtekst niet zichtbaar was bij laden. Op vraag van Peter verkleind. */
@media screen and (max-width: 767px) {
  .single-cases-container .banner {
    padding-top: clamp(555px, 50vh, 650px) !important;
    margin-top: 0 !important;
  }
}


/* Case-banner: lege ruimte boven titel en onder tags gelijk maken (vaste marges i.p.v. auto-centrering), en Competenties/Industrie-tekst kleiner + niet vet zodat ze op mobiel op 1 regel passen. Op vraag van Peter. */
.single-cases-container .banner #case-banner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding-bottom: 30px !important;
}
.single-cases-container .banner #case-banner > div {
  margin: 0 !important;
}
.single-cases-container .banner #case-banner h3 {
  font-weight: 400 !important;
  text-align: center !important;
}
@media screen and (max-width: 767px) {
  .single-cases-container .banner #case-banner h3 {
    font-size: 15px !important;
    font-weight: 400 !important;
    margin-top: 1.75rem !important;
  }
  .single-cases-container .banner #case-banner h1.case-banner-title {
    margin-top: 30px !important;
  }
}


/* Hyperlink-stijl voor competenties in de case-banner (bv. link naar troeven-pagina), op vraag van Peter: geel + vet bij hover */
.single-cases-container .banner #case-banner .competency-link {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  padding: 10px 20px;
  margin: 6px 4px;
  font-size: 14px !important;
  text-transform: uppercase !important;
}
.single-cases-container .banner #case-banner .competency-link:not(.topic-link) {
  min-width: 140px;
}
.single-cases-container .banner #case-banner .competency-link.topic-link {
  color: #ece318;
}
.single-cases-container .banner #case-banner .competency-link.topic-link:hover,
.single-cases-container .banner #case-banner .competency-link.topic-link:active,
.single-cases-container .banner #case-banner .competency-link.topic-link:focus {
  color: #ffffff;
}
.single-cases-container .banner #case-banner .competency-link.topic-link:hover svg polygon,
.single-cases-container .banner #case-banner .competency-link.topic-link:active svg polygon,
.single-cases-container .banner #case-banner .competency-link.topic-link:focus svg polygon {
  stroke: #ece318 !important;
}
.single-cases-container .banner #case-banner .competency-link {
  text-align: center;
  box-sizing: border-box;
}
.single-cases-container .banner #case-banner .competency-link .hex-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.single-cases-container .banner #case-banner .competency-link:hover,
.single-cases-container .banner #case-banner .competency-link:active,
.single-cases-container .banner #case-banner .competency-link:focus {
  color: #ece318;
}
.single-cases-container .banner #case-banner .competency-link svg polygon {
  transition: stroke 0.2s ease;
}
.single-cases-container .banner #case-banner .competency-link:hover svg polygon,
.single-cases-container .banner #case-banner .competency-link:active svg polygon,
.single-cases-container .banner #case-banner .competency-link:focus svg polygon {
  stroke: #ffffff !important;
}


/* Scroll-down-knop op case-paginas: wisselt met de WPFront scroll-up-knop */
/* zie TRANSFER_cases-paginas-styling.md sectie 4 */
.single-case #case-scroll-down-btn {
  position: fixed;
  bottom: 20px;
  right: 30px;
  width: 64px;
  height: 64px;
  z-index: 9999;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-case #wpfront-scroll-top-container,
.single-case button#wpfront-scroll-top-container.show {
  display: none !important;
}
.single-case.case-at-bottom #wpfront-scroll-top-container {
  display: block !important;
}
.single-case.case-at-bottom #case-scroll-down-btn {
  display: none !important;
}


/* Subtitel in de case-banner (los van de h1-titelspan) */
.single-cases-container .banner #case-banner h1.case-banner-title {
  text-align: center;
}
.single-cases-container .banner #case-banner h1.case-banner-title .case-banner-subtitle {
  display: block;
  font-size: 20px !important;
  font-weight: 400;
  color: #ece318;
  margin-top: 0.5rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .single-cases-container .banner #case-banner h1.case-banner-title .case-banner-subtitle {
    margin-top: 2rem !important;
  }
}
.single-cases-container .banner #case-banner h1.case-banner-title .case-banner-context {
  display: block;
  font-size: 20px !important;
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  margin-top: 0.5rem;
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 400px) {
  .single-cases-container .banner #case-banner h1.case-banner-title .case-banner-context {
    font-size: 15px !important;
  }
}
@media screen and (max-width: 767px) {
  .single-cases-container .banner #case-banner h1.case-banner-title .case-banner-subtitle {
    font-size: 20px !important;
  }
}


/* Content in de case-banner iets lager zetten op mobiel: compenseert dat de */
/* absolute header het bovenste deel van de (geometrisch gecentreerde) ruimte */
/* verbergt, waardoor het anders te veel naar boven uitgelijnd oogt. */


/* Introtekst (blok 1) minstens halve schermhoogte: voorkomt dat de */
/* carrousel er al bij het laden van de pagina onderaan bij piept. */
.paragraph-carousel-block .content-block p {
  min-height: 50vh;
  box-sizing: border-box;
}

/* CTRL G2M - cases-paginas 50/50-herstructurering (Peter, sessie 7/9/2026):     */
/* op case-pagina's vult de tekst-helft (.cc-page-text, incl. titel+introtekst)  */
/* de resterende vrije ruimte na de banner, met een vaste veiligheidsmarge van   */
/* 24px zodat de carrousel nooit meepiept bij het laden.                        */
/* Header = 93px (zie technische les 3.20/3.25/3.26 in TRANSFER_cases-paginas-styling.md). */
/* Sessie 5/2H: min-height verplaatst van de losse <p> (oude selector hieronder  */
/* gecommentarieerd t.b.v. traceerbaarheid) naar de nieuwe .cc-page-text-wrapper, */
/* want die wrapper omvat nu ook de titel <h2> - enkel de <p> targetten liet de   */
/* carrousel alsnog gedeeltelijk zichtbaar bij het laden (live gemeten: carrousel */
/* startte op y=1041 op een 894px-viewport, dus 153px binnen het scherm).        */
.single-case .cc-page-text {
  min-height: calc(100vh - 93px - 24px - clamp(600px, calc((100vh - 93px) / 2), 900px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Nieuw, sessie 5/2H: .cc-page-carousel zelf hoeft geen eigen min-height -    */
/* zolang .cc-page-text hierboven de volledige resterende ruimte al vult, kan */
/* de carrousel simpelweg beginnen waar de tekst-helft eindigt. Enkel zorgen  */
/* dat er geen onbedoelde overlap/gat ontstaat door margin-collapsing.        */
.single-case .cc-page-carousel {
  box-sizing: border-box;
}


/* ===================================================================== */
/* Case-pagina 4-schermen-mechanisme (up/down-knoppen, dynamische kleur) */
/* Overgezet van sandbox (post 4575) naar single-case.php/main.css.      */
/* Zie TRANSFER_cases-paginas-styling.md sectie N + sectie 4 stappenplan.*/
/* Bewust NAAST de bestaande #case-scroll-down-btn/getScrollTargets()-   */
/* logica geplaatst (nog geen keuze gemaakt tussen beide, zie sectie 4). */
/* ===================================================================== */
.single-case .snap-page {
  height: 100vh;
  height: 100svh;
  padding-top: 93px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}



/* Sessie 18, vervolg: op verzoek van Peter - de losstaande 'WPFront Scroll Top'-pluginknop
   (#wpfront-scroll-top-container, sitewide, eigen SVG-icoon) botst visueel met onze eigen
   up/down-navigatieknoppen op de case-snap-pages. Enkel verborgen op case-pagina's; blijft
   overal elders op de site (vacatures, blog, ...) actief. Zie TRANSFER_cases-paginas-styling.md. */
.single-case #wpfront-scroll-top-container,
.single-case button#wpfront-scroll-top-container.show {
  display: none !important;
}


/* ===================================================================== */
/* Pagina-fix: carrousel + introtekst (paragraph-carousel-block) laten   */
/* passen binnen 1 scherm. Onderdeel van het snap-page-mechanisme.       */
/* Zie TRANSFER_cases-paginas-styling.md sectie N + sectie 4.            */
/* ===================================================================== */
.single-case .snap-page {
  display: flex;
  flex-direction: column;
}
.single-case .snap-page > * {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.single-case .snap-page .cc-page-text {
  min-height: 0;
  margin-bottom: 0;
  flex: 0 1 auto;
  overflow: hidden;
  padding: 0 24px;
}

.single-case .snap-page .cc-page-text p {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 8px;
}


/* ===================================================================== */
/* Pagina 1 (banner + introtekst): 50/50 zwart/wit, zoals sandbox N.7.   */
/* Up/down-knop-visuals voor het nieuwe snap-page-navigatiemechanisme.   */
/* Zie TRANSFER_cases-paginas-styling.md sectie N + sectie 4.            */
/* ===================================================================== */
.single-case .snap-page:first-child {
  display: flex;
  flex-direction: column;
}
.single-case .snap-page:first-child .cc-page-text p {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: #000;
}

/* O.11 Introtekst pagina 1: responsieve font-size i.p.v. vast 14px overal, */
/* om witruimte op grotere schermen op te vullen (verzoek Peter). */
@media (min-width: 400px) and (max-width: 767px) {
  .single-case .snap-page:first-child .cc-page-text p {
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  .single-case .snap-page:first-child .cc-page-text p {
    font-size: 22px;
    text-align: left;
  }
}

/* O.13 Marges + titelstijl van 'Het resultaat' toegepast op 'Het probleem' (pagina 2) */
/* en 'De aanpak' (pagina 3) -- enkel desktop, op verzoek van Peter. Pagina 1 (introtekst) */
/* bewust NIET meegenomen: die zit in een krap 50/50-flexbox met overflow:hidden. */
@media (min-width: 768px) {
  .single-case .snap-page:nth-child(1) > div > .content-block h2,
  .single-case .snap-page:nth-child(2) > div > .content-block h2,
  .single-case .snap-page:nth-child(3) > div > .content-block h2 ,
  .single-case .snap-page:nth-child(4) > div > .content-block h2{
    font-size: 30px;
    font-weight: 800;
    position: relative;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 30px;
  }
  .single-case .snap-page:nth-child(1) > div > .content-block .custom-highlight,
  .single-case .snap-page:nth-child(2) > div > .content-block .custom-highlight,
  .single-case .snap-page:nth-child(3) > div > .content-block .custom-highlight ,
  .single-case .snap-page:nth-child(4) > div > .content-block .custom-highlight{
    display: inline;
    background-color: #ece318;
    padding: 0 15px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.5;
  }
}
@media (max-width: 1199.98px) {
  .single-case .snap-page:nth-child(1) > div > .content-block h2,
  .single-case .snap-page:nth-child(2) > div > .content-block h2,
  .single-case .snap-page:nth-child(3) > div > .content-block h2 ,
  .single-case .snap-page:nth-child(4) > div > .content-block h2{
    font-size: 20px !important;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  .single-case .snap-page:nth-child(1) > div > .content-block .custom-highlight,
  .single-case .snap-page:nth-child(2) > div > .content-block .custom-highlight,
  .single-case .snap-page:nth-child(3) > div > .content-block .custom-highlight ,
  .single-case .snap-page:nth-child(4) > div > .content-block .custom-highlight{
    padding: 8px !important;
  }
}
#case-page-up-btn svg {
  transform: rotate(180deg);
}


/* ===================================================================== */


/* ===================================================================== */
/* Pagina 1 (50/50): sessie 9 gaf .single-cases-container .banner op      */
/* smalle schermen een padding-top van min. 555px (bedoeld voor de OUDE   */
/* niet-snap-page layout, om overlap met de scroll-knop te vermijden).    */
/* Binnen het snap-page-mechanisme domineert die padding de volledige     */
/* bannerhoogte en verdringt de flex-verdeling volledig. Overschreven     */
/* naar 0 binnen deze scope; de knop-overlap is hier niet van toepassing  */
/* (up/down-knoppen staan los, zie sectie 4).                             */
/* ===================================================================== */
.single-case .snap-page:first-child section.banner {
  padding-top: 0 !important;
}


/* ===================================================================== */
/* Decoratief vouw-element (SVG#Layer_1) bovenaan de banner verbergen     */
/* binnen het snap-page-mechanisme -- hoort niet bij de compacte 50/50-   */
/* indeling, oogt als storend element tussen header en zwarte banner.     */
/* Blijft ongewijzigd op de normale (niet-snap-page) case-weergave.       */
/* ===================================================================== */
.single-case .snap-page:first-child section.banner > svg#Layer_1 {
  display: none !important;
}


/* ===================================================================== */
/* Pagina 1 bevat nu een tussenliggende wrapper-div (banner+introtekst    */
/* samen), toegevoegd door de vaste 5-pagina-indeling. De 50/50-flex-fix  */
/* moet door die wrapper heen werken; wrapper zelf krijgt ook flex.       */
/* ===================================================================== */
.single-case .snap-page:first-child > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}


/* ===================================================================== */
/* Pagina 1: 50/50-verdeling werkt nu door de wrapper-div heen (banner+   */
/* introtekst zitten in een gezamenlijke wrapper i.p.v. rechtstreeks in   */
/* .snap-page). Overschrijft de eerdere, niet-wrapper-bewuste regel.      */
/* ===================================================================== */
.single-case .snap-page:first-child > div > section.banner {
  height: auto !important;
  flex: 1 1 50% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
}
.single-case .snap-page:first-child > div > .content-block.cc-page-text {
  height: auto !important;
  flex: 1 1 50% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  margin-bottom: 0 !important;
}

/* Vaste afstand banner-titel op mobiel, op verzoek van Peter (was variabel door verticale centrering) */
@media (max-width: 767px) {
  .single-case .snap-page:first-child > div > .content-block.cc-page-text {
    justify-content: flex-start !important;
    padding-top: 24px !important;
  }
}

/* O.14 Introtekst pagina 1: zelfde horizontale kantlijn-marge (55px) als pagina 2/3, */
/* op verzoek van Peter -- via padding i.p.v. margin. Regel bewust NA de structurele */
/* 50/50-layoutregel geplaatst, want die zet padding:12px 24px !important op dezelfde */
/* selector en zou anders winnen door latere bronvolgorde bij gelijke specificiteit. */
@media (min-width: 768px) {
  .single-case .snap-page:first-child > .content-block.cc-page-text,
  .single-case .snap-page:first-child > div > .content-block.cc-page-text {
    padding-left: 79px !important;
    padding-right: 79px !important;
  }
}

/* O.16 'Het probleem' (pagina 2) nu ook op mobiel gelijk aan 'Het resultaat' */
/* (gele highlight-box, gewicht 800, 16px tekst i.p.v. 14px) -- op verzoek van Peter. */
/* Enkel <768px: de bestaande desktop-regel (O.12/O.13) blijft ongewijzigd. */
@media (max-width: 767px) {
  .single-case .snap-page:nth-child(1) > div > .content-block h2,
  .single-case .snap-page:nth-child(2) > div > .content-block h2 {
    font-weight: 800 !important;
  }
  .single-case .snap-page:nth-child(1) > div > .content-block .custom-highlight,
  .single-case .snap-page:nth-child(2) > div > .content-block .custom-highlight {
    background-color: #ece318 !important;
    padding: 8px !important;
    display: inline !important;
    line-height: 1.5 !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
  }
}

.single-case .snap-page:first-child > div > section.banner > svg#Layer_1 {
  display: none !important;
}




/* ===================================================================== */
/* Decoratief vouw-element (SVG#Layer_1) ook verbergen op event-pagina's, */
/* zelfde als bij de case-snap-pages. Hier staat het onderaan de banner   */
/* i.p.v. bovenaan (ander template), maar het gaat om hetzelfde element.  */
/* ===================================================================== */
.single-event section.banner > svg#Layer_1 {
  display: none !important;
}



/* O.17: mobiele titel-tekst-spacing 'Het probleem' gelijk aan 'Het resultaat' (30px) */
@media (max-width: 767px) {
  .single-case .snap-page:nth-child(1) > div > .content-block h2,
  .single-case .snap-page:nth-child(2) > div > .content-block h2 {
    margin-bottom: 20px !important;
  }
}

/* T.8.1 vervolg (Peter-feedback): zelfde kleine-scherm-tekstverkleining (<400px) als pagina 3, nu ook op pagina 4 ("Het resultaat") */
@media (max-width: 400px) {
	.result-block .content-block p {
		font-size: 14px !important;
		line-height: 1.4 !important;
	}
}


/* Peter-feedback: 2 competentiebadges (Elektrisch/Software) op zeer klein mobiel scherm (<400px) terug naast elkaar i.p.v. gestapeld. Root cause: #case-banner is 80% breed (~288px op 360px scherm), 2x min-width:140px+marge (~296px) paste net niet. Sector-badge (topic-link) bewust ongemoeid, staat al goed op eigen regel. */
@media (max-width: 400px) {
	.single-cases-container .banner #case-banner .competency-link {
		padding: 8px 10px !important;
		margin: 4px 3px !important;
		font-size: 12px !important;
	}
	.single-cases-container .banner #case-banner .competency-link:not(.topic-link) {
		min-width: 115px !important;
	}
}

/* T.8: pagina 4 quote-blok - marges gelijktrekken met .result-block .content-block, gele bovenrand van resultBlock weghalen (overbodig na quote) */
.wp-block-ctrl-casev2-quote .content-block{margin-left:55px;margin-right:55px;}
.wp-block-ctrl-casev2-quote blockquote.quote p:not(.author){font-style:italic;}
body.single-case .wp-block-ctrl-casev2-result{border-top:none;}


/* T.8: quote-blok pagina 4 - mobiele marges gelijktrekken met .result-block .content-block responsive gedrag (was enkel desktop gefixed) */
@media (max-width: 900px){
  .wp-block-ctrl-casev2-quote .content-block{margin:20px 0px !important;}
}
@media (min-width: 1600px){
  .wp-block-ctrl-casev2-quote .content-block{margin:55px auto 150px;}
}

/* T.8: quote-tekst pagina 4 - zelfde responsive font-schaal als .result-block .content-block p (22/16/14px), enkel de quote zelf (niet de auteursregel) */
.wp-block-ctrl-casev2-quote blockquote.quote p:not(.author){font-family:Montserrat,sans-serif;font-size:22px;}
@media (max-width: 900px){
  .wp-block-ctrl-casev2-quote blockquote.quote p:not(.author){font-size:16px !important;line-height:normal !important;}
}
@media (max-width: 400px){
  .wp-block-ctrl-casev2-quote blockquote.quote p:not(.author){font-size:14px !important;line-height:1.4 !important;}
}

/* T.8: quote-blok pagina 4 - naamregel proportioneel mee laten schalen met de quote-tekst (was vast 16px, gaf omgekeerde verhouding op kleinste mobiel) */
.wp-block-ctrl-casev2-quote blockquote.quote p.author{font-size:18px;}
@media (max-width: 900px){
  .wp-block-ctrl-casev2-quote blockquote.quote p.author{font-size:14px !important;}
}
@media (max-width: 400px){
  .wp-block-ctrl-casev2-quote blockquote.quote p.author{font-size:12px !important;}
}

/* T.8: pagina 5 (video) - marge gelijktrekken met de rest van de pagina's, zelfde logica als .result-block .content-block */
/* T.8: video verplaatst naar pagina 4, daarom class-selector i.p.v. positie (nth-child) gebruikt */
.single-case .cc-video-placeholder > .content-block{margin:55px 55px 150px;}
@media (max-width: 900px){
  .single-case .cc-video-placeholder > .content-block{margin:20px 0px !important;}
}
@media (min-width: 1600px){
  .single-case .cc-video-placeholder > .content-block{margin:55px auto 150px;flex-basis:100vw;}
}
/* T.8: video-venster als illustratie van formaat/locatie, in afwachting van de echte video */
/* FIX (nieuwe sessie): width:100% + aspect-ratio liet de video op brede schermen evenredig HOGER worden (los van beschikbare verticale ruimte), wat op desktop een grote verticale overloop gaf op pagina 3 (Onze aanpak+video). Hoogte nu begrensd via viewporthoogte (45vh), breedte volgt de 16:9-verhouding daaruit, met max-width:100% als extra vangnet op smalle/vierkante schermen. */
.cc-video-frame-placeholder{width:auto;max-width:100%;height:auto;max-height:27vh;aspect-ratio:16/9;box-sizing:border-box;border:2px dashed #ece318;border-radius:5px;display:flex;align-items:center;justify-content:center;text-align:center;margin-top:24px;margin-left:auto;margin-right:auto;background:rgba(236,227,24,0.05);}
.cc-video-frame-placeholder span{font-family:Montserrat,sans-serif;font-size:16px;color:#999;padding:0 20px;}











/* T.8: pagina 6 cases-carrousel - de verticale scrollbalk (~15px) maakte de links/rechts-marges visueel asymmetrisch, daarom hier ooit verborgen. Sessie 17: op uitdrukkelijk verzoek van Peter de scrollbalk terug zichtbaar gemaakt (regels verwijderd) - de asymmetrie kan dus terugkomen in screenshots, is bewust aanvaard. */

/* T.8: testimonial in geel kader, zelfde geel als de video-placeholder-achtergrond, maar zonder stippellijn */
.wp-block-ctrl-casev2-quote blockquote.quote{background:rgba(236,227,24,0.05) !important;border-radius:5px;padding:24px;box-sizing:border-box;}




/* Sessie 17: pagina 5 (cases-carrousel+footer) - .cases-block-container is een sitebrede component (o.a. homepage) met padding-top:100px/padding-bottom:174px, bedoeld voor een gewone doorloop-pagina. Op post 4573 (snap-page-mechanisme) geeft dat een te grote afstand tot de carrousel en een grote witte ruimte voor de footer. Enkel post 4573, enkel desktop: bovenmarge gelijkgetrokken met de 20px-conventie van pagina 2 (fotogalerij) en pagina 4 (video), ondermarge sterk verkleind zodat carrousel+footer samen op 1 pagina passen. Mobiel bewust nog niet aangepast, volgt in een aparte stap. */
@media (min-width: 992px){
  body.single-case .cases-block-container{padding-top:37px !important;padding-bottom:20px !important;} /* Sessie 17, vervolg: padding-top verhoogd van 20 naar 37px op verzoek van Peter, zodat de witruimte boven en onder de carrousel bijna gelijk oogt (~45-47px) - de ondermarge wordt niet apart aangepast, want die volgt via de sticky-footer margin-top:auto toch niet lineair uit padding-bottom, zie hierboven. */
}


/* Sessie 17: pagina 5 (cases-carrousel) - mobiel gebruikte de carrousel nog de sitebrede .cases-block-container padding (top:100px/bottom:174px), enkel voor desktop was dit al verkleind. Op verzoek van Peter eerste stap: zelfde soort verkleining nu ook voor mobiel, om te zien hoeveel ruimte er nog ontbreekt om de footer volledig zichtbaar te krijgen. Waarde bewust behoudend (20px) gekozen als eerste iteratie, verder te verfijnen na screenshot-feedback. */
@media (max-width: 991px){
  body.single-case .cases-block-container{padding-top:20px !important;padding-bottom:20px !important;}
}


/* Sessie 18, EINDE-VAN-BESTAND-fix: op verzoek van Peter volledig verborgen, desktop+mobiel,
   alle case-posts. Eerdere versie van deze regel (met .single-case-klasse-scoping) werd door de
   browser onverklaarbaar als .single-case .single-case #case-page-up-btn geparsed (dubbele klasse,
   nooit-matchend) - oorzaak niet gevonden, daarom nu bewust simpel gehouden: pure ID-selectors,
   helemaal achteraan het bestand, buiten elke mogelijk verwarrende context. */
#case-page-up-btn, #case-page-down-btn { display: none !important; }


/* Y.10: Sessie 19 - viewport-fitting-audit: pagina 1/3/4 tekst+marges verkleind
   wanneer viewport zowel smal (mobiel) als kort (korte browserhoogte) is.
   Sitewide (geldt voor alle 61 case-posts), raakt bestaande <400px-regels niet aan. */
@media (max-width: 900px) and (max-height: 760px) {
  .single-case .snap-page:first-child .cc-page-text p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .result-block .content-block p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}


/* Y.11: Sessie 19 - quote-tekst pagina 4 krijgt dezelfde responsive font-schaal (22/16/14px)
   en regelafstand (1.4) als de andere tekstblokken, voor volledige consistentie.
   casev2-quote.css wordt niet geladen (bekend, apart euvel) - vandaar hier via main.css.
   Sitewide (geldt voor alle 61 case-posts). Auteursregel (.author) bewust niet aangepast. */
.single-case .quote-block .content-block blockquote.quote p:not(.author) {
  font-family: Montserrat, sans-serif;
  font-size: 22px;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .single-case .quote-block .content-block blockquote.quote p:not(.author) {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}
@media (max-width: 400px) {
  .single-case .quote-block .content-block blockquote.quote p:not(.author) {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}


/* Y.12: Sessie 19 - brug voor 768-900px: pagina 4 (Het resultaat) en de quote gebruikten
   nog 900px als omslagpunt i.p.v. de overal elders gebruikte 768px, wat in deze smalle band
   een mismatch gaf (16px i.p.v. 22px). Enkel tekstgrootte/regelafstand overschreven,
   de bestaande layout/marge-regels van dat blok blijven op 900px staan. Sitewide. */
@media (min-width: 768px) and (max-width: 900px) {
  .result-block .content-block p,
  .single-case .quote-block .content-block blockquote.quote p:not(.author) {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }
}


/* Y.13: Sessie 19 - Mathieu-feedback (Teams, 15/9): pagina 1 "De situatie" krijgt geen
   zichtbare titel meer en de introtekst wordt cursief gezet (krantenstijl), zoals bij
   een krant waar de introparagraaf vaak zonder hoofding en schuin staat.
   Nog niet bevestigd als definitief sitewide ontwerp: voorlopig enkel op post 4573 (Yummy
   Bakery dosering, de actieve testcase), zie TRANSFER_cases-paginas-styling.md. */
body.single-case .snap-page:first-child .cc-page-text h2 {
  display: none;
}
body.single-case .snap-page:first-child .cc-page-text p {
  font-style: italic;
}


/* Sessie 26 (22/9/2026): de sessie-20-regel body.single-case .cc-diepgang-block .col-text
   { background-color: #ece318; padding: 16px 20px; } (Mathieu's overlap-fix met het videokader) is
   geschrapt: "Technisch onder de loep" staat sinds sessie 24 alleen op pagina 5, de overlap-reden is vervallen. */








/* ============================================================================================
   SESSIE 32 (23 september 2026) - UITROL NAAR ALLE 61 CASE-POSTS
   De sessie-26/28/29-blokken hieronder en de losse regels voor de result-bovenrand, de cases-container-padding
   en de hero-intro zijn generiek gemaakt: in de selectors is body.postid-4573 mechanisch vervangen door
   body.single-case (zelfde specificiteit, zelfde bronvolgorde). De commentaren die nog "post 4573" of
   "alles binnen body.postid-4573" zeggen, beschrijven de sandboxfase (sessie 26-31) en gelden nu voor alle posts.
   Enige uitzondering: de mobiele bannerfoto van Yummy Bakery (regel op .single-cases-container .banner) blijft
   4573-gescoped, dat is content van die ene post. Zie TRANSFER_cases-status.md sessie 32.
   ============================================================================================ */

/* ============================================================================================
   SESSIE 26 (22 september 2026) - POST 4573: HERMAPPING VAN POSITIE NAAR BLOKKLASSE
   Sinds sessie 24 staan casev2-quote en casev2-whyitmatters als echte ACF-blokken in de content van
   post 4573. WordPress print dan de blok-CSS (casev2-quote.css, casev2-whyitmatters.css) inline in
   de head, voor main.css. Dit blok neutraliseert die opmaak enkel op post 4573 en herhaalt de
   p3-opmaak (regels voor .snap-page:nth-child(3)) blokklasse-gebonden voor p4 en p5.
   Alles binnen body.single-case; de sitewide regels en de 60 andere posts blijven ongemoeid.
   ============================================================================================ */

body.single-case .cc-diepgang-block {
  flex: 0 0 auto !important;
  overflow: visible !important;
}
/* (b) h2 + highlight zoals het aanpak-blok, voor diepgang en whyitmatters */
@media (min-width: 768px) {
  body.single-case .cc-diepgang-block h2,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .content-block h2 {
    font-size: 30px !important;
    font-weight: 800 !important;
    position: relative;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 30px;
  }
  body.single-case .cc-diepgang-block .custom-highlight,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .custom-highlight {
    display: inline;
    background-color: #ece318;
    padding: 0 15px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.5;
  }
}
@media (max-width: 1199.98px) {
  body.single-case .cc-diepgang-block h2,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .content-block h2 {
    font-size: 20px !important;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  body.single-case .cc-diepgang-block .custom-highlight,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .custom-highlight {
    padding: 8px !important;
  }
}
@media (max-width: 767px) {
  body.single-case .cc-diepgang-block h2,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .content-block h2 {
    font-weight: 800 !important;
    margin-bottom: 20px !important;
  }
  body.single-case .cc-diepgang-block .custom-highlight,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .custom-highlight {
    background-color: #ece318 !important;
    padding: 8px !important;
    display: inline !important;
    line-height: 1.5 !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
  }
}

/* (c) lopende tekst zoals het aanpak-blok, voor diepgang (.col-text p) en whyitmatters (.textFlex p) */
@media (min-width: 768px) {
  body.single-case .cc-diepgang-block .col-text p,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .textFlex p {
    font-size: 22px !important;
    text-align: left !important;
    line-height: 1.4 !important;
  }
}
@media (max-width: 400px) {
  body.single-case .cc-diepgang-block .col-text p,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .textFlex p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}
@media (min-width: 401px) and (max-width: 767px) {
  body.single-case .cc-diepgang-block .col-text p,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .textFlex p {
    line-height: 1.4 !important;
  }
}
@media (max-width: 900px) and (max-height: 760px) {
  body.single-case .cc-diepgang-block .col-text p,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .textFlex p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}

/* (d) zijmarges: 55px vanaf 768px (verslaat ook margin auto / flex-basis 100vw op 1600px en breder), 0 op mobiel */
@media (min-width: 768px) {
  body.single-case .wp-block-ctrl-casev2-quote .content-block {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  body.single-case .wp-block-ctrl-casev2-result .content-block,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .content-block,
  body.single-case .cc-diepgang-block {
    margin: 0 55px !important;
  }
}
@media (max-width: 767px) {
  body.single-case .wp-block-ctrl-casev2-result .content-block,
  body.single-case .wp-block-ctrl-casev2-whyitmatters .content-block,
  body.single-case .cc-diepgang-block {
    margin: 0 !important;
  }
}

/* (e) whyitmatters: de inline kaartstijl (witte kaart, schaduw, hexagon voor de titel, gele bovenrand) neutraliseren */
body.single-case .wp-block-ctrl-casev2-whyitmatters {
  border-top: none;
}
body.single-case .wp-block-ctrl-casev2-whyitmatters .content-block {
  background: transparent;
  padding: 0 !important;
  box-shadow: none;
  border-radius: 0;
}
body.single-case .wp-block-ctrl-casev2-whyitmatters .content-block h2 {
  padding-left: 0 !important;
}
body.single-case .wp-block-ctrl-casev2-whyitmatters .content-block h2::before {
  content: none !important;
  display: none !important;
}
body.single-case .wp-block-ctrl-casev2-whyitmatters .flex-container-img {
  margin-top: 0;
}

/* (f) quote: de inline casev2-quote-stijl (witte tekst, gele linkerbalk, gecentreerd, schaduw, hover) terug naar de kale stijl van voor sessie 24 */
body.single-case .wp-block-ctrl-casev2-quote .quote-block .quote,
body.single-case .wp-block-ctrl-casev2-quote .quote-block .quote:hover {
  color: inherit;
  border-left: none;
  text-align: left;
  min-height: 0;
  box-shadow: none;
  font-size: 22px;
  padding: 24px;
  transition: none;
}
body.single-case .wp-block-ctrl-casev2-quote .quote-block .quote .author {
  color: inherit;
  font-style: normal;
}


/* ============================================================================================
   SESSIE 28 (23 september 2026) - POST 4573: SCROLLSTROOM NA PAGINA 1 (koerswijziging Peter, sessie 27)
   single-case.php bouwt op 4573 nog één section.snap-page.cc-hero (banner + intro) en daarna .cc-flow met
   per inhoudsblok een .cc-flow-block met eigen klasse (cc-fb-uitdaging, -fotos, -aanpak, -video, -diepgang,
   -whyitmatters, -resultaat, -quote) en de cases-carrousel in .cc-fb-cases. Alle nth-child-regels hierboven
   zijn op 4573 daardoor dood (blijven gelden voor de 60 andere posts); dit blok geeft de opmaak klasse-gebonden.
   Beslissingen Peter (sessie 28): gele lijn max-width 616px zoals de vacaturepagina, 30px boven en onder de lijn,
   een lijn boven elk inhoudsblok (ook binnen een eenheid). Alles binnen body.single-case.
   ============================================================================================ */

/* (a) hero: één viewport die op elk scherm past, mag groeien, knipt nooit (principe 3). Overschrijft #697/#706/#731-#733 enkel op 4573. */
body.single-case .snap-page.cc-hero {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  overflow: visible !important;
}
body.single-case .snap-page.cc-hero > div {
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
body.single-case .snap-page.cc-hero > div > section.banner,
body.single-case .snap-page.cc-hero > div > .content-block.cc-page-text {
  flex: 1 1 0 !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* (b) scrollstroom: zijmarges van de case-template (24px mobiel, 55px vanaf 768px), 30px onder de hero */
body.single-case .cc-flow {
  margin: 30px 24px 0;
}
@media (min-width: 768px) {
  body.single-case .cc-flow {
    margin: 30px 55px 0;
  }
}
/* (c) blokwrapper: gele lijn (#ece318, 2px, max-width 616px zoals de vacaturepagina) 30px onder de vorige tekst en 30px boven de volgende */
body.single-case .cc-flow-block {
  position: relative;
  padding-top: 30px;
  margin-top: 30px;
}
body.single-case .cc-flow > .cc-flow-block:first-child {
  margin-top: 0;
}
body.single-case .cc-flow-block::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 616px;
  height: 2px;
  background-color: #ece318;
}
/* cases-carrousel staat buiten .cc-flow (volle breedte voor de slider): lijn op de case-marges */
body.single-case .cc-fb-cases {
  margin-top: 30px;
}
body.single-case .cc-fb-cases::before {
  left: 24px;
  width: calc(100% - 48px);
}
@media (min-width: 768px) {
  body.single-case .cc-fb-cases::before {
    left: 55px;
    width: calc(100% - 110px);
  }
}
/* (d) blokeigen marges op 0: de tussenruimte komt uitsluitend van de wrapper (les 3.128: #778/#780 video-C 55/150, inline quote-C 55/85/150/55, sitewide 40px +-regel, #863/#864 zijmarges 55) */
body.single-case .cc-flow .cc-flow-block .content-block,
body.single-case .cc-flow .cc-flow-block .cc-video-placeholder > .content-block,
body.single-case .cc-flow .cc-flow-block .wp-block-ctrl-casev2-quote .content-block,
body.single-case .cc-flow .cc-flow-block > [class^="wp-block-ctrl-casev2-"],
body.single-case .cc-flow .cc-flow-block > .cc-video-placeholder {
  margin: 0 !important;
}
/* (e) fotogalerij: de inline lightbox-CSS rekent op een ouder met vaste hoogte (height calc(100% - 40px), grid-auto-rows 1fr); in de stroom krijgt elke thumb een vaste verhouding */
body.single-case .cc-fb-fotos .cc-page-carousel,
body.single-case .cc-fb-fotos .carousel-outer,
body.single-case .cc-fb-fotos .cc-thumb-grid {
  height: auto !important;
}
body.single-case .cc-fb-fotos .cc-thumb-grid {
  margin: 0 !important;
  grid-auto-rows: auto;
}
body.single-case .cc-fb-fotos .cc-thumb-grid .cc-thumb {
  aspect-ratio: 4 / 3;
}

/* (f) tekstladder en highlight voor uitdaging en aanpak: kopie van de sessie-26-regels voor .cc-diepgang-block, klasse-gebonden op elke .content-block in de stroom (zelfde waarden, dus geen wijziging voor diepgang/whyitmatters/resultaat) */
/* was #853 (sessie 26) */
@media (min-width: 768px) {
  body.single-case .cc-flow-block .content-block h2 {
    font-size: 30px !important; font-weight: 800 !important; position: relative; display: inline-block; margin-top: 0; margin-bottom: 30px;
  }
}
/* was #854 (sessie 26) */
@media (min-width: 768px) {
  body.single-case .cc-flow-block .content-block .custom-highlight {
    display: inline; background-color: #ece318; padding: 0 15px; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.5;
  }
}
/* was #855 (sessie 26) */
@media (max-width: 1199.98px) {
  body.single-case .cc-flow-block .content-block h2 {
    font-size: 20px !important;
  }
}
/* was #856 (sessie 26) */
@media (min-width: 768px) and (max-width: 900px) {
  body.single-case .cc-flow-block .content-block .custom-highlight {
    padding: 8px !important;
  }
}
/* was #857 (sessie 26) */
@media (max-width: 767px) {
  body.single-case .cc-flow-block .content-block h2 {
    font-weight: 800 !important; margin-bottom: 20px !important;
  }
}
/* was #858 (sessie 26) */
@media (max-width: 767px) {
  body.single-case .cc-flow-block .content-block .custom-highlight {
    background-color: #ece318 !important; padding: 8px !important; display: inline !important; line-height: 1.5 !important; -webkit-box-decoration-break: clone !important; box-decoration-break: clone !important;
  }
}
/* was #859 (sessie 26) */
@media (min-width: 768px) {
  body.single-case .cc-flow-block .content-block .col-text p {
    font-size: 22px !important; text-align: left !important; line-height: 1.4 !important;
  }
}
/* was #860 (sessie 26) */
@media (max-width: 400px) {
  body.single-case .cc-flow-block .content-block .col-text p {
    font-size: 14px !important; line-height: 1.4 !important;
  }
}
/* was #861 (sessie 26) */
@media (min-width: 401px) and (max-width: 767px) {
  body.single-case .cc-flow-block .content-block .col-text p {
    line-height: 1.4 !important;
  }
}
/* was #862 (sessie 26) */
@media (max-width: 900px) and (max-height: 760px) {
  body.single-case .cc-flow-block .content-block .col-text p {
    font-size: 14px !important; line-height: 1.4 !important;
  }
}

/* (g) cases-carrousel: de AB.5-stijl (sessie 16) letterlijk, .snap-page:nth-child(6) vervangen door .cc-fb-cases (principe 4) */
/* was #783 */
body.single-case .cc-fb-cases .slider-container {
  position:relative;
}
/* was #784 */
body.single-case .cc-fb-cases .slider-arrow-container {
  position:static;
}
/* was #785 */
body.single-case .cc-fb-cases .prev.slick-arrow {
  position:absolute !important;left:-62px;top:50%;transform:translateY(-50%);margin:0 !important;
}
/* was #786 */
body.single-case .cc-fb-cases .next.slick-arrow {
  position:absolute !important;right:-62px;top:50%;transform:translateY(-50%);margin:0 !important;
}
/* was #787 */
body.single-case .cc-fb-cases .slider-arrow-container svg path.hexagon {
  fill:transparent !important;stroke:#ece318 !important;
}
/* was #788 */
body.single-case .cc-fb-cases .slider-arrow-container svg path:not(.hexagon) {
  stroke:#000 !important;
}
/* was #789 */
body.single-case .cc-fb-cases .slick-slide img {
  object-fit:cover;width:100%;aspect-ratio:16/9;display:block;height:auto;
}
/* was #790 */
body.single-case .cc-fb-cases a.cases-button {
  position:relative;background:#ece318;border:none !important;color:#000;display:inline-block;padding:10px 20px;transition:color 0.2s ease;clip-path:polygon(6% 7.5%, 94% 7.5%, 98% 50%, 94% 92.5%, 6% 92.5%, 2% 50%);
}
/* was #791 */
body.single-case .cc-fb-cases a.cases-button svg.hex-border {
  position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;
}
/* was #792 */
body.single-case .cc-fb-cases a.cases-button::before,
body.single-case .cc-fb-cases a.cases-button::after {
  content:none !important;
}
/* was #793 */
body.single-case .cc-fb-cases a.cases-button svg.hex-border polygon {
  transition:stroke 0.2s ease;
}
/* was #794 */
body.single-case .cc-fb-cases a.cases-button:hover svg.hex-border polygon,
body.single-case .cc-fb-cases a.cases-button:active svg.hex-border polygon,
body.single-case .cc-fb-cases a.cases-button:focus svg.hex-border polygon {
  stroke:#000;
}
/* was #795 */
body.single-case .cc-fb-cases .slick-slide h3 {
  display:inline-block;background:#000;color:#fff;padding:8px 20px;margin-bottom:10px;clip-path:polygon(6% 7.5%, 94% 7.5%, 98% 50%, 94% 92.5%, 6% 92.5%, 2% 50%);
}
/* was #796 */
body.single-case .cc-fb-cases .slick-slide p {
  font-style:italic;
}
/* was #797 */
body.single-case .cc-fb-cases .slick-slide p span {
  font-style:normal;font-weight:700;
}
/* was #798 */
body.single-case .cc-fb-cases .slick-slide {
  text-align:center;
}
/* was #799 */
body.single-case .cc-fb-cases .slick-slide img {
  border-radius:5px;box-shadow:none;
}
/* was #800 */
body.single-case .cc-fb-cases .slick-slide p span {
  margin-bottom:16px;
}
/* was #801 */
body.single-case .cc-fb-cases .slick-slide p {
  font-size:16px;
}
/* was #802 */
body.single-case .cc-fb-cases .slick-slide p span {
  font-size:20px;
}
/* was #803 */
body.single-case .cc-fb-cases a.cases-button {
  margin-top:0 !important;
}
/* was #804 */
body.single-case .cc-fb-cases .slick-slide p {
  height:auto !important;min-height:67px;overflow:visible !important;
}
/* was #805 */
body.single-case .cc-fb-cases .slick-slide p {
  width:100% !important;box-sizing:border-box;
}
/* was #806 */
body.single-case .cc-fb-cases .slick-slide img {
  filter:none !important;
}
/* was #807 */
body.single-case .cc-fb-cases .slider-arrow-container {
  left:-50px;right:-50px;width:auto;
}
/* was #808 */
@media (max-width: 991px) {
  body.single-case .cc-fb-cases .prev.slick-arrow,
  body.single-case .cc-fb-cases .next.slick-arrow {
    width:44px !important;height:44px !important;transform:translateY(-50%);z-index:20;display:flex !important;align-items:center;justify-content:center;
  }
}
/* was #809 */
@media (max-width: 991px) {
  body.single-case .cc-fb-cases .prev.slick-arrow svg,
  body.single-case .cc-fb-cases .next.slick-arrow svg {
    width:30px !important;height:32px !important;pointer-events:none;
  }
}
/* was #810 */
@media (max-width: 991px) {
  body.single-case .cc-fb-cases .prev.slick-arrow {
    left:0px;
  }
}
/* was #811 */
@media (max-width: 991px) {
  body.single-case .cc-fb-cases .next.slick-arrow {
    right:0px;
  }
}
/* was #812 */
body.single-case .cc-fb-cases .prev.slick-arrow svg,
body.single-case .cc-fb-cases .next.slick-arrow svg {
  pointer-events:none;
}
/* was #813 */
body.single-case .cc-fb-cases .prev.slick-arrow,
body.single-case .cc-fb-cases .next.slick-arrow {
  cursor:pointer;z-index:50;
}
/* was #814 */
body.single-case .cc-fb-cases .slick-list,
body.single-case .cc-fb-cases .slick-track,
body.single-case .cc-fb-cases .slick-slide {
  z-index:1;
}
/* was #815 */
@media (min-width: 992px) {
  body.single-case .cc-fb-cases .slick-slide {
    margin-right:20px !important;
  }
}
/* was #816 */
@media (min-width: 992px) {
  body.single-case .cc-fb-cases .slick-list {
    width:1092px !important;margin:0 auto !important;flex-shrink:0 !important;
  }
}
/* was #817 */
@media (max-width: 400px) {
  body.single-case .cc-fb-cases .slick-slide p {
    font-size:14px !important;
  }
}
/* was #828 */
@media (min-width: 992px) {
  body.single-case .cc-fb-cases > div {
    flex:1 1 auto !important;display:flex !important;flex-direction:column !important;
  }
}
/* ============================================================================================
   SESSIE 29, DEEL 2 (23 september 2026) - POST 4573: GELE LIJNEN HERLEID TOT 4 (beslissing Peter na review)
   Enkel het eerste blok van een eenheid houdt de lijn (uitdaging, aanpak, technisch onder de loep, resultaat).
   Foto's, video, wat betekent dit voor jou en quote: geen lijn en geen padding-top (cases-carrousel houdt de lijn, correctie Peter na screenshots);
   de margin-top van 30px (regels hierboven) blijft, zodat de afstand tussen twee blokken overal 30px is.
   De 24px marge boven het videokader (generieke regel .cc-video-frame-placeholder) gaat binnen de stroom op 0.
   Alles binnen body.single-case.
   ============================================================================================ */
body.single-case .cc-fb-fotos,
body.single-case .cc-fb-video,
body.single-case .cc-fb-whyitmatters,
body.single-case .cc-fb-quote {
  padding-top: 0;
}
body.single-case .cc-fb-fotos::before,
body.single-case .cc-fb-video::before,
body.single-case .cc-fb-whyitmatters::before,
body.single-case .cc-fb-quote::before {
  content: none;
}
body.single-case .cc-flow .cc-fb-video .cc-video-frame-placeholder {
  margin-top: 0;
}

/* Sessie 30 (23/9/2026), op vraag van Peter: de footer is altijd het einde van een case-pagina. Sinds de uitrol van de
   scrollstroom (sessie 32) verplaatst single-case.php alle inhoudsblokken uit .case-content.container naar .cc-flow; de
   container blijft als lege schil (met eventuele niet-gebruikte blokresten) achter en wordt hier generiek verborgen.
   Dit vervangt de vroegere inline regel .case-content.container{display:none} uit het lightbox-script. */
.single-case .case-content.container {
	display: none !important;
}


/* ============================================================================================
   SESSIE 32 (23 september 2026) - LIGHTBOX EN FOTOGALERIJ-GRID, GENERIEK
   Letterlijk verhuisd uit de inline <style> in single-case.php (guard 3, enkel op 4573 sinds sessie 9), nu voor
   alle case-posts en met .single-case-prefix zodat niets buiten het case-template geraakt wordt. Volgorde en
   waarden ongewijzigd; enkel .case-content.container{display:none} is weggelaten (zie de sessie-30-regel hierboven).
   ============================================================================================ */
.single-case .cc-lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.single-case .cc-lightbox-overlay.hidden{display:none;}
.single-case .cc-lightbox-counter{position:absolute;top:20px;left:50%;transform:translateX(-50%);color:#fff;font-family:Montserrat,sans-serif;font-size:16px;}
.single-case .cc-lightbox-close{position:absolute;top:16px;right:24px;color:#fff;font-size:32px;background:none;border:none;cursor:pointer;line-height:1;}
.single-case .cc-lightbox-main{max-width:90vw;max-height:70vh;display:flex;align-items:center;justify-content:center;position:relative;}
.single-case .cc-lightbox-main img{max-width:90vw;max-height:70vh;object-fit:contain;}
.single-case .cc-lightbox-prev,.single-case .cc-lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.single-case .cc-lightbox-prev svg,.single-case .cc-lightbox-next svg{display:block;}
.single-case .cc-lightbox-prev{left:16px;}
.single-case .cc-lightbox-next{right:16px;}
.single-case .cc-lightbox-thumbs{display:flex;gap:8px;margin-top:20px;max-width:90vw;overflow-x:auto;padding:4px;}
.single-case .cc-lightbox-thumbs img{height:56px;width:auto;object-fit:cover;opacity:.5;cursor:pointer;border:2px solid transparent;border-radius:4px;}
.single-case .cc-lightbox-thumbs img.active{opacity:1;border-color:#ece318;}
.single-case .carousel-outer .item img{cursor:zoom-in;}
.single-case .cc-thumb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:auto;margin:20px 55px;}
@media (max-width:900px){.single-case .cc-thumb-grid{margin:20px 0 !important;}}
@media (max-width:600px){.single-case .cc-thumb-grid{grid-template-columns:repeat(3,1fr);}}
.single-case .cc-thumb-grid .cc-thumb{position:relative;overflow:hidden;border-radius:4px;cursor:zoom-in;}
.single-case .cc-thumb-grid .cc-thumb img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-height:none !important;max-width:none !important;object-fit:cover !important;margin:0 !important;display:block !important;}
.single-case .cc-page-carousel,.single-case .carousel-outer{height:100% !important;}
.single-case .paragraph-carousel-block{width:100% !important;}
.single-case .cc-thumb-grid{height:calc(100% - 40px);align-content:start;grid-auto-rows:minmax(0,1fr);}


/* ==========================================================================
   CASES-OVERZICHT (sessie 55, 27-30 sep 2026) - geconsolideerd blok
   Pagina's: /nl/succesverhalen/ (3145), /fr/realisations/ (3186), /successstories/ (397)
   Kaartstijl afgestemd op de cases-carrousel (main.css #789-#797), filter als gele
   hexagon-chips gecentreerd boven het grid, 3 kolommen vanaf 1024px, compacte banner.
   Alle regels staan bewust achteraan en met hogere specificiteit dan main-responsive.css
   en style.css (beide laden na dit bestand). Zie TRANSFER_cases-overzicht.md.
   ========================================================================== */

/* --- 1. Banner (blok cases-banner-block) --- */
.wp-block-ctrl-cases-banner-block {
    padding-top: 120px;
    padding-bottom: 40px;
}
.wp-block-ctrl-cases-banner-block section {
    width: 60%;
}
.wp-block-ctrl-cases-banner-block h1 {
    font-size: var(--fs-40);
    line-height: 40px;
    margin-bottom: 20px;
}
@media (min-width: 768px) {
    .wp-block-ctrl-cases-banner-block {
        background-size: auto 600px;   /* hexagon in de foto blijft rechts van de tekst */
        background-position: 0 50%;
    }
}
@media (max-width: 767.98px) {
    .wp-block-ctrl-cases-banner-block {
        padding-top: 110px;
        padding-bottom: 30px;
    }
    .wp-block-ctrl-cases-banner-block h1 {
        line-height: 1.2;
    }
    .wp-block-ctrl-cases-banner-block p {
        font-size: 16px;
        line-height: 22px;
        margin: 0;
    }
}

/* --- 2. Overzichtsblok en section --- */
.wp-block-ctrl-cases-overview-cases-block {
    padding-top: 20px;
}
.wp-block-ctrl-cases-overview-cases-block .home-banner-container {
    display: none;                     /* lege container met lege h1 (98px) */
}
.wp-block-ctrl-cases-overview-cases-block .cases-filter-container .event-btn {
    display: none;                     /* "Download our cases" */
}
@media (min-width: 1024px) {
    body .wp-block-ctrl-cases-overview-cases-block section {
        flex-direction: column;
        padding: 0 50px;
        max-width: 1700px;
        margin: 0 auto;
    }
}

/* --- 3. Filter: gele hexagon-chips, gecentreerd --- */
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    width: 100%;
    margin: 0 0 20px;
    padding: 0 20px;
}
@media (min-width: 1024px) {
    body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container {
        padding: 0;
    }
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container h4 {
    display: none;                     /* label "Filter" */
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: auto;
    border: 0;
    margin: 0;
    padding: 0;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul li {
    position: relative;
    z-index: 0;
    border: 0;
    background-color: transparent !important;  /* filterscript zet inline background/font-weight */
    color: #000;
    font-size: 16px;
    font-weight: 700 !important;
    line-height: normal;
    padding: 8px 20px;
    cursor: pointer;
    transition: color 0.2s ease;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul li svg {
    display: none;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul li::before,
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul li::after {
    content: "";
    position: absolute;
    display: block;
    clip-path: polygon(6% 7.5%, 94% 7.5%, 98% 50%, 94% 92.5%, 6% 92.5%, 2% 50%);
    transition: opacity 0.2s ease;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul li::before {
    z-index: -1;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: #ece318;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul li::after {
    z-index: -2;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    opacity: 0;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul li[style*="white"] {           /* actieve keuze: zwarte hexagon, gele tekst */
    color: #ece318;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul li[style*="white"]::before {
    background: #000;
}
@media (hover: hover) and (pointer: fine) {
    body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul li:hover::after {
        opacity: 1;                    /* zwarte contour enkel met muis */
    }
    body .wp-block-ctrl-cases-overview-cases-block section .cases-filter-container ul li[style*="white"]:hover::after {
        opacity: 0;
    }
}

/* --- 4. Grid --- */
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer {
    align-items: stretch;
    padding: 0 20px;
}
@media (min-width: 1024px) {
    body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer {
        width: 100%;
        max-width: 1600px;
        margin: 0;
        padding: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-column-gap: 50px;
    }
}

/* --- 5. Kaart --- */
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item {
    border-top: 2px solid #ece318;
    padding-top: 30px;
    margin-bottom: 30px;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item:first-child {
    border-top: 0;
    padding-top: 0;
}
@media (min-width: 1024px) {
    body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item:nth-child(2),
    body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item:nth-child(3) {
        border-top: 0;
        padding-top: 0;
    }
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item h3 {                              /* sectortag */
    align-self: center;
    display: inline-block;
    background: #000;
    color: #fff;
    font-size: 16px !important;
    font-weight: 700;
    padding: 8px 20px;
    margin: 0 0 10px;
    clip-path: polygon(6% 7.5%, 94% 7.5%, 98% 50%, 94% 92.5%, 6% 92.5%, 2% 50%);
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer div.cases-overview-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    border-radius: 5px;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer div.cases-overview-item img[src="false"] {
    display: none;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item h2 {                              /* bedrijfsnaam (span) + subtitel */
    margin: 20px 0 0;
    font-size: 16px !important;
    font-weight: 400;
    font-style: italic;
    line-height: 22px;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item h2 span {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 22px;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item h2 span[style*="display"] {
    margin-bottom: 16px;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item h2 span[style*="#fff"] {
    display: none;                     /* duiding (inline color:#fff) niet op de kaart */
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer div.cases-overview-item img[src="false"] + h2 {
    margin-top: 0;
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer div.cases-overview-item img[src="false"] + h2::before {  /* placeholder voor kaarten zonder foto */
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 5px;
    margin-bottom: 35px;
    background: #f2f2f2 url(/wp-content/uploads/2025/03/placeholder-1024x1024.png) center / cover no-repeat;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item p {                               /* intro */
    height: auto;
    min-height: 66px;
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 22px;
}
@media (max-width: 1199.98px) {
    body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item p {
        -webkit-line-clamp: 2;
        min-height: 44px;
    }
}
body .wp-block-ctrl-cases-overview-cases-block section .cases-overview-contianer .cases-overview-item .link-div {
    display: none;                     /* knop weg, hele kaart is klikbaar */
}

/* --- 6. Carrousel op de casepagina's: duiding-span zichtbaar maken --- */
.cc-fb-cases .slick-slide p span[style*="#fff"],
.cases-block-container .slick-slide p span[style*="#fff"] {
    color: #000 !important;
}

/* --- 7. WPFront scroll-top-knop niet op de overzichtspagina's --- */
body.page-id-3145 #wpfront-scroll-top-container,
body.page-id-3186 #wpfront-scroll-top-container,
body.page-id-397 #wpfront-scroll-top-container {
    display: none !important;
}

/* CASES-CARROUSEL 1 (30 sep 2026) - carrousel op de casepagina's in de kaartstijl van de overzichtspagina's: duiding verborgen, knop visueel verborgen en de hele slide klikbaar (stretched link, geen JS). Alle regels met body.single-case-scope, geen regel van het overzichtsblok gewijzigd. */
body.single-case .cc-fb-cases .slick-slide { position: relative; cursor: pointer; }
body.single-case .cc-fb-cases .slick-slide p span[style*="#fff"] { display: none !important; }
body.single-case .cc-fb-cases .slick-slide a.cases-button { position: static; display: block; width: auto; height: 0; margin: 0; padding: 0; overflow: visible; background: none; clip-path: none; font-size: 0; line-height: 0; color: transparent; }
body.single-case .cc-fb-cases .slick-slide a.cases-button svg.hex-border { display: none; }
body.single-case .cc-fb-cases .slick-slide a.cases-button::after { content: "" !important; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; margin: 0; transform: none; z-index: 1; }
body.single-case .cc-fb-cases .slick-slide a.cases-button:focus-visible::after { outline: 2px solid #000; outline-offset: -4px; }
/* CASES-CARROUSEL 2: geen zwarte hover-randen op de verborgen knop */
body.single-case .cc-fb-cases .slick-slide a.cases-button:hover { border-top: 0 !important; border-bottom: 0 !important; }
/* CASES-BANNER 1: #case-banner in de stroom (was inline position:absolute), banner groeit mee met zijn inhoud */
body.single-case .snap-page.cc-hero section.banner #case-banner { position: relative !important; height: auto !important; top: auto !important; }
/* CASES-BANNER 2: compacte banner op mobiel, hero past op een scherm */
@media (max-width: 767px) {
  body.single-case .snap-page.cc-hero section.banner #case-banner { padding-bottom: 16px !important; }
  body.single-case .snap-page.cc-hero section.banner #case-banner h1.case-banner-title { margin: 12px 0 12px !important; }
  body.single-case .snap-page.cc-hero section.banner #case-banner h1.case-banner-title > span:first-child { font-size: 24px !important; margin-bottom: 8px !important; }
  body.single-case .snap-page.cc-hero section.banner #case-banner h1.case-banner-title > .case-banner-context,
  body.single-case .snap-page.cc-hero section.banner #case-banner h1.case-banner-title > .case-banner-subtitle { margin: 4px 0 8px !important; }
  body.single-case .snap-page.cc-hero section.banner #case-banner h1.case-banner-title > .case-banner-subtitle { font-size: 18px !important; }
  body.single-case .snap-page.cc-hero section.banner #case-banner h3 { margin-top: 12px !important; }
  body.single-case .snap-page.cc-hero section.banner #case-banner h3 br { display: none; }
  body.single-case .snap-page.cc-hero section.banner #case-banner h3 a { margin: 2px 3px !important; }
}

/* CASES-INTRO 1: ruimere regelafstand van de intro vanaf 1900px breed, vult het witte vlak onder de banner (alle cases) */
@media (min-width: 1900px) {
  body.single-case .snap-page.cc-hero .content-block.cc-page-text p { line-height: 2.4 !important; }
}

/* CASES-BANNER 3: V-bord, geen zwarte laag over de bannerfoto (foto is zelf donker, titel staat op zwart) */
body.postid-4621 .snap-page.cc-hero section.banner > div:first-child { opacity: 0 !important; }

/* CASES-BANNER 4: V-bord op mobiel, bannerfoto als strook onderaan zodat beide borden zichtbaar blijven */
@media (max-width: 767px) {
  body.postid-4621 .snap-page.cc-hero section.banner { background-size: 100% auto !important; background-position: center bottom !important; background-repeat: no-repeat !important; background-color: #000 !important; }
  body.postid-4621 .snap-page.cc-hero section.banner #case-banner { padding-bottom: calc(100vw / 3.7 + 12px) !important; }
}

/* CASES-BANNER 5: mobiel, sectorhexagon (tweede rij) iets lager zodat hij niet tegen de competentiehexagons plakt */
@media (max-width: 767px) {
  body.single-case .snap-page.cc-hero section.banner #case-banner h3 a.competency-link.topic-link { margin-top: 10px !important; }
}

/* CASES-BANNER 6: mobiel, sectorhexagon altijd onder de competentiehexagons (CASES-BANNER 2 verborg de br, waardoor ze bij brede telefoons naast elkaar kwamen) */
@media (max-width: 767px) {
  body.single-case .snap-page.cc-hero section.banner #case-banner h3 br { display: inline; }
}

/* CASES-BANNER 7: V-bord FR (4622) en EN (4623), zelfde banner als NL: geen zwarte laag en op mobiel de foto als strook onderaan (zie CASES-BANNER 3 en 4) */
body.postid-4622 .snap-page.cc-hero section.banner > div:first-child,
body.postid-4623 .snap-page.cc-hero section.banner > div:first-child { opacity: 0 !important; }
@media (max-width: 767px) {
  body.postid-4622 .snap-page.cc-hero section.banner,
  body.postid-4623 .snap-page.cc-hero section.banner { background-size: 100% auto !important; background-position: center bottom !important; background-repeat: no-repeat !important; background-color: #000 !important; }
  body.postid-4622 .snap-page.cc-hero section.banner #case-banner,
  body.postid-4623 .snap-page.cc-hero section.banner #case-banner { padding-bottom: calc(100vw / 3.7 + 12px) !important; }
}


/* FINALE 2 (3 okt 2026): zwart trapezium onder de banners sitebreed verwijderd (events, troeven, sector en partners) */
.wp-block-ctrl-events-banner-block > svg#our-solution,
.wp-block-ctrl-our-solutions-banner-block > svg#our-solution,
.wp-block-ctrl-your-benefit-banner-block > svg#Layer_1,
.wp-block-ctrl-job-overview-block svg.job-header-chevron,
.single-cases-container section.banner > svg#Layer_1,
svg.banner-chevron,
#ctrl-block3-sectors > svg,
.wp-block-ctrl-customers-block > svg {
  display: none !important;
}


/* FINALE 2 (3 okt 2026): hexagon-knoppen als echte zeshoek met clip-path (verstuurknop, header Contact, footer Contacteer ons!), rand en vulling als twee lagen, hover wisselt vulling en tekstkleur; vaste hoogte 40px zodat binnen- en buitenpolygoon dezelfde helling hebben (16/40 = 14,4/36) */
.wpcf7-form button.button,
header #contact_item,
footer .cta-container .button-cta {
  --hex-rand: #000;
  --hex-vul: #ece318;
  --hex-tekst: #000;
  position: relative !important;
  display: inline-block !important;
  isolation: isolate;
  border: 0 !important;
  background: var(--hex-rand) !important;
  color: var(--hex-tekst) !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 30px !important;
  line-height: 40px !important;
  white-space: nowrap !important;
  vertical-align: middle;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  transition: color .3s, background-color .3s;
}
.wpcf7-form button.button::before,
header #contact_item::before,
footer .cta-container .button-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  width: auto !important;
  height: auto !important;
  left: 2px !important;
  right: 2px !important;
  top: 2px !important;
  bottom: 2px !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  background: var(--hex-vul) !important;
  clip-path: polygon(14.4px 0, calc(100% - 14.4px) 0, 100% 50%, calc(100% - 14.4px) 100%, 14.4px 100%, 0 50%);
  z-index: -1;
  transition: background-color .3s;
}
.wpcf7-form button.button::after,
header #contact_item::after,
footer .cta-container .button-cta::after { display: none !important; content: none !important; }
.wpcf7-form button.button:hover,
.wpcf7-form button.button:focus-visible { --hex-vul: #000; --hex-tekst: #ece318; }
header #contact_item { --hex-rand: #fff; --hex-vul: #000; --hex-tekst: #fff; }
header #contact_item:hover,
header #contact_item:focus-visible { --hex-rand: #ece318; --hex-vul: #ece318; --hex-tekst: #000; }
footer .cta-container .button-cta { --hex-rand: #000; --hex-vul: #ece318; --hex-tekst: #000; }
footer .cta-container .button-cta:hover,
footer .cta-container .button-cta:focus-visible { --hex-vul: #000; --hex-tekst: #ece318; }

/* Onder 1200px staat Contact in het uitklapmenu: gewone zwarte tekst zoals de andere menu-items, geen zeshoek */
@media (max-width: 1199.98px) {
  header #contact_item {
    background: transparent !important;
    clip-path: none !important;
    color: #000 !important;
    height: auto !important;
    line-height: normal !important;
    padding: 10px !important;
    margin: 10px !important;
    white-space: normal !important;
  }
  header #contact_item::before { display: none !important; content: none !important; }
  header #contact_item:hover,
  header #contact_item:focus-visible { background: transparent !important; color: #000 !important; font-weight: 700 !important; }
}

/* FINALE 2: hamburgermenu (onder 1200px): alle items, Contact inbegrepen, gewone zwarte tekst; bij hover enkel vet (zoals Contact al deed), geen zeshoek */
@media (max-width: 1199.98px) {
  header .main-list li.menu-item a.button:not(#ctrl-geen):hover,
  header .main-list li.menu-item a.button:not(#ctrl-geen):focus-visible { color: #000 !important; font-weight: 700 !important; background: transparent !important; border: 0 !important; }
  header .main-list li.menu-item a.button:hover::before,
  header .main-list li.menu-item a.button:hover::after { display: none !important; content: none !important; }
}

/* ctrl-hex-hover-fix: het thema zet bij hover met !important een SVG-zijstuk als content op ::before/::after (footer .cta-container .button-cta:hover::before); die regel wint door :hover van de vullaag hierboven. Zelfde specificiteit, later in het bestand, dus deze wint. */
footer .cta-container .button-cta:hover::before,
footer .cta-container .button-cta:focus-visible::before,
header #contact_item:hover::before,
.wpcf7-form button.button:hover::before {
  content: '' !important;
  background: var(--hex-vul) !important;
  width: auto !important;
  height: auto !important;
  left: 2px !important;
  right: 2px !important;
  top: 2px !important;
  bottom: 2px !important;
  transform: none !important;
}
footer .cta-container .button-cta:hover::after,
footer .cta-container .button-cta:focus-visible::after,
header #contact_item:hover::after,
.wpcf7-form button.button:hover::after { display: none !important; content: none !important; }


/* FINALE 2 (3 okt 2026): intro-contexttekst van de casepagina's (eerste scherm, cc-hero) vult op desktop de beschikbare hoogte beter: verticaal gecentreerd en regelhoogte 35 tot 46px op basis van de vensterhoogte (4,6vh); lettergrootte 24px (was 22). Gemeten (langste tekst, Gilbos): 1440x900 7 regels met 63px wit boven en onder (was 111/119), 1280x720 7 regels met 38px wit, 1200x800 8 regels met 36px; het blok behoudt zijn hoogte. */
@media (min-width: 1200px) {
  .single-cases-container .cc-hero .cc-page-text { display: flex !important; align-items: center !important; }
  .single-cases-container .cc-hero .cc-page-text p { font-size: 24px !important; line-height: clamp(35px, 4.6vh, 46px) !important; margin: 0 !important; }
}

/* UITROL 1 (6 oktober 2026): vacaturebanner, fotopositie en mobiele opmaak (banner, intro en contextfoto op een scherm); goedgekeurd op Business Development Ingenieur als voorbeeld */
.single-cases-container .job-banner {
  background-position: right 35%;
}
/* Uitzondering: foto met de persoon hoog in beeld, Software/Automatiseringsingenieur (4569/4570/4571) */
.postid-4569 .single-cases-container .job-banner,
.postid-4570 .single-cases-container .job-banner,
.postid-4571 .single-cases-container .job-banner {
  background-position: right 10%;
}
@media (max-width: 767px) {
  .single-cases-container .job-banner {
    min-height: 34vh;
    min-height: 34dvh;
    padding-top: 0;
    align-items: center;
  }
  .single-cases-container .job-banner #job-banner {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  body.single-vacancies .wp-block-ctrl-paragraph-with-media-block section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  body.single-vacancies .wp-block-ctrl-paragraph-with-media-block .text-and-image-container p {
    margin-bottom: 1.5rem;
  }
  body.single-vacancies .wp-block-ctrl-paragraph-with-media-block img {
    width: 100%;
    max-height: 26vh;
    max-height: 26dvh;
    object-fit: cover;
  }
}

/* UITROL 4, update Mathieu (12 oktober 2026): header-knop Contact niet vet bij hover, zodat de knop 116 px breed blijft en het menu niet verschuift */
header #contact_item, header #contact_item:hover, header #contact_item:focus-visible { font-weight: 400 !important; }

/* UITROL 4, update Mathieu (12 oktober 2026): knoppen op vacature-overzicht, vacaturepagina's, events-overzicht en eventpagina's als zeshoek; op wit de referentie (rust geel/zwart, hover zwart/geel), in de vacaturebanner op de foto de zwarte variant (rust zwart/geel, hover geel/zwart) */
.wp-block-ctrl-job-overview-block a.button.cases-button:not(.banner-cta a), body.single-vacancies a.button.cases-button:not(.job-banner a), .wp-block-ctrl-events-overview-block a.button.cases-button, body.single-event a.button.cases-button, body.single-event a.button.cases-button-extra{--hex-rand:#000;--hex-vul:#ece318;--hex-tekst:#000;}
.wp-block-ctrl-job-overview-block a.button.cases-button:not(.banner-cta a):hover, .wp-block-ctrl-job-overview-block a.button.cases-button:not(.banner-cta a):focus-visible, body.single-vacancies a.button.cases-button:not(.job-banner a):hover, body.single-vacancies a.button.cases-button:not(.job-banner a):focus-visible, .wp-block-ctrl-events-overview-block a.button.cases-button:hover, .wp-block-ctrl-events-overview-block a.button.cases-button:focus-visible, body.single-event a.button.cases-button:hover, body.single-event a.button.cases-button:focus-visible, body.single-event a.button.cases-button-extra:hover, body.single-event a.button.cases-button-extra:focus-visible{--hex-vul:#000;--hex-tekst:#ece318;}
.wp-block-ctrl-job-overview-block a.button.cases-button:not(.banner-cta a), body.single-vacancies a.button.cases-button:not(.job-banner a), .wp-block-ctrl-events-overview-block a.button.cases-button, body.single-event a.button.cases-button, body.single-event a.button.cases-button-extra{position:relative !important;display:inline-block !important;isolation:isolate;border:0 !important;background:var(--hex-rand) !important;color:var(--hex-tekst) !important;height:40px !important;box-sizing:border-box !important;padding:0 30px !important;line-height:40px !important;font-size:14px !important;font-weight:700 !important;white-space:nowrap !important;clip-path:polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);transition:color .3s, background-color .3s;}
.wp-block-ctrl-job-overview-block a.button.cases-button:not(.banner-cta a)::before, body.single-vacancies a.button.cases-button:not(.job-banner a)::before, .wp-block-ctrl-events-overview-block a.button.cases-button::before, body.single-event a.button.cases-button::before, body.single-event a.button.cases-button-extra::before{content:"" !important;position:absolute !important;inset:2px !important;width:auto !important;height:auto !important;border:0 !important;padding:0 !important;margin:0 !important;transform:none !important;background:var(--hex-vul) !important;clip-path:polygon(14.4px 0, calc(100% - 14.4px) 0, 100% 50%, calc(100% - 14.4px) 100%, 14.4px 100%, 0 50%);z-index:-1;transition:background-color .3s;}
.wp-block-ctrl-job-overview-block a.button.cases-button:not(.banner-cta a)::after, body.single-vacancies a.button.cases-button:not(.job-banner a)::after, .wp-block-ctrl-events-overview-block a.button.cases-button::after, body.single-event a.button.cases-button::after, body.single-event a.button.cases-button-extra::after{content:none !important;}
body.single-vacancies .job-banner a.button.cases-button{--hex-rand:#ece318;--hex-vul:#000;--hex-tekst:#ece318;}
body.single-vacancies .job-banner a.button.cases-button:hover, body.single-vacancies .job-banner a.button.cases-button:focus-visible{--hex-vul:#ece318;--hex-tekst:#000;}
body.single-vacancies .job-banner a.button.cases-button{position:relative !important;display:inline-block !important;isolation:isolate;border:0 !important;background:var(--hex-rand) !important;color:var(--hex-tekst) !important;height:40px !important;box-sizing:border-box !important;padding:0 30px !important;line-height:40px !important;font-size:14px !important;font-weight:700 !important;white-space:nowrap !important;clip-path:polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);transition:color .3s, background-color .3s;}
body.single-vacancies .job-banner a.button.cases-button::before{content:"" !important;position:absolute !important;inset:2px !important;width:auto !important;height:auto !important;border:0 !important;padding:0 !important;margin:0 !important;transform:none !important;background:var(--hex-vul) !important;clip-path:polygon(14.4px 0, calc(100% - 14.4px) 0, 100% 50%, calc(100% - 14.4px) 100%, 14.4px 100%, 0 50%);z-index:-1;transition:background-color .3s;}
body.single-vacancies .job-banner a.button.cases-button::after{content:none !important;}
/* UITROL 5, update 1: vacature-overzicht "Verder lezen", hover-rand en svg-zijstukken van het thema uit */
.wp-block-ctrl-job-overview-block a.button.cases-button:not(.banner-cta a):hover{border:0 !important;}
.wp-block-ctrl-job-overview-block a.button.cases-button:not(.banner-cta a):hover::before{content:"" !important;}
.wp-block-ctrl-job-overview-block a.button.cases-button:not(.banner-cta a):hover::after{content:none !important;}