@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('https://beta.ctrlengineering.eu/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("https://beta.ctrlengineering.eu/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;
}
.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;
}
.single-case #case-page-down-btn {
  position: fixed;
  bottom: 12px;
  right: 12px;
  width: 64px;
  height: 64px;
  z-index: 99999;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-case /* Sessie 18, vervolg: op uitdrukkelijk verzoek van Peter - de up/down-navigatieknoppen volledig
   verborgen, desktop EN mobiel, op alle case-posts. Reden: de knoppen bleven telkens nieuwe
   styling-conflicten opleveren (contrast, WPFront-plugin-botsing, tussenruimte, transparantie) en
   zijn overbodig geworden nu wheel/swipe-navigatie (zie verderop) de volledige functionaliteit
   overneemt. BEWUST GEKOZEN VOOR display:none i.p.v. de knoppen uit de JS te verwijderen: alle
   onderliggende logica (currentIdx-tracking, updateButtons(), de wheel/touch-handlers) blijft zo
   gewoon draaien zonder risico op null-reference-fouten - enkel het zichtbare element verdwijnt.
   Makkelijk terug te draaien: enkel onderstaande regel verwijderen.
   Zie TRANSFER_cases-paginas-styling.md. */
#case-page-up-btn {
  display: none;
  position: fixed;
  bottom: 81px;
  right: 12px;
  width: 64px;
  height: 64px;
  z-index: 99999;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.single-case .navtheme-light svg polygon,
.single-case .navtheme-light svg path {
  stroke: #000 !important;
}

/* Sessie 18: op-verzoek-fix - de up/down-navigatieknop wordt geforceerd zwart (los van .navtheme-light) wanneer hij overlapt met het gele .cta-container-CTA-blok onderaan de footer, ongeacht welk data-navtheme de huidige pagina heeft. Klasse wordt puur JS-gestuurd (overlap-detectie in single-case.php), zie TRANSFER_cases-paginas-styling.md. */
.single-case .cta-contrast-override svg polygon,
.single-case .cta-contrast-override svg path {
  stroke: #000 !important;
}

/* Sessie 18, vervolg: op verzoek van Peter - de up/down-knop krijgt een donkere, halftransparante
   vulling in de bestaande hexagon-omtrek (i.p.v. een aparte cirkel), zodat hij nooit meer 'kaal'
   bovenop tekst of foto's staat. Het pijltje/de omtrek wordt daardoor ALTIJD geel (i.p.v. te
   wisselen met zwart via .navtheme-light), want geel is tegen deze donkere vulling overal leesbaar.
   ID-selectors zorgen voor voldoende specificiteit om de oudere .navtheme-light/.cta-contrast-override-
   regels (die nu overbodig zijn voor deze twee knoppen, maar bewust niet verwijderd) te overstemmen.
   Zie TRANSFER_cases-paginas-styling.md. */
.single-case #case-page-up-btn .hexagon,
.single-case #case-page-down-btn .hexagon {
  fill: rgba(10, 10, 10, 0.1) !important;
  stroke-opacity: 0.1 !important;
}
.single-case #case-page-up-btn svg path,
.single-case #case-page-down-btn svg path {
  stroke: #ece318 !important;
}

/* 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 .paragraph-carousel-block {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.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;
}
.single-case .snap-page .cc-page-carousel {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}
.single-case .snap-page .cc-page-carousel img {
  max-height: 26vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}


/* ===================================================================== */
/* 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 > section.banner {
  height: auto;
  flex: 1 1 50%;
  min-height: 0;
  overflow: hidden;
}
.single-case .snap-page:first-child > .content-block.cc-page-text {
  height: auto;
  flex: 1 1 50%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 24px;
  margin-bottom: 0;
}
.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.12 Harmonisatie tekststijl 'Het resultaat' (22px, text-align left) toegepast op */
/* de teksten van pagina 2 (Het probleem) en pagina 3 (De aanpak) -- enkel desktop, */
/* op verzoek van Peter. De 'Het resultaat'-tekst zelf (.result-block .content-block p) */
/* is bewust niet aangeraakt, blijft de brontsijl voor deze harmonisatie. */
@media (min-width: 768px) {
  .single-case .snap-page:nth-child(2) > div > .content-block p {
    font-size: 22px !important;
    text-align: left !important;
  }
  .single-case .snap-page:nth-child(3) > div > .content-block > .col-text p {
    font-size: 22px;
    text-align: left;
  }
  .single-case .snap-page:nth-child(4) > div > .content-block > .col-text p {
    font-size: 22px !important;
    text-align: left !important;
  }
}
@media (min-width: 768px) {
  .single-case .snap-page:nth-child(3) > div > .content-block > .col-text p {
    line-height: 1.4 !important;
  }
}

/* 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(3) > div > .content-block {
    margin: 55px 55px 150px;
  }
  .single-case .snap-page:nth-child(2) > div > .content-block {
    margin: 20px 55px;
  }
  .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;
  }
}

/* O.18 'De aanpak' (pagina 3) nu ook op mobiel volledig gelijk aan 'Het resultaat' */
/* -- spiegelbeeld van O.16, dit keer voor pagina 3, in dezelfde ronde meegenomen. */
@media (max-width: 767px) {
  .single-case .snap-page:nth-child(3) > div > .content-block h2 {
    font-weight: 800 !important;
    margin-bottom: 20px !important;
  }
  .single-case .snap-page:nth-child(3) > 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;
  }
}

/* O.18-vervolg (nieuwe sessie): zelfde mobiele titelstijl nu ook voor pagina 4 (Technisch onder de loep + Wat betekent dit voor jou) - stond nooit in deze harmonisatie, want die pagina bestond nog niet toen O.18 geschreven werd. */
@media (max-width: 767px) {
  .single-case .snap-page:nth-child(4) > div > .content-block h2 {
    font-weight: 800 !important;
    margin-bottom: 20px !important;
  }
  .single-case .snap-page:nth-child(4) > 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;
  }
}

/* O.19 Pagina 2 (carrousel + Het probleem) van gecentreerde flex-groep naar */
/* een vaste 50/50-verdeling, zoals pagina 1 (banner/intro) al doet -- op verzoek */
/* van Peter, om de te grote lege ruimte boven de carrousel structureel op te lossen. */
.single-case .snap-page:nth-child(2) > div > .wp-block-ctrl-casev2-image-carousel {
  flex: 1 1 calc(50% - 8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

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


/* ===================================================================== */
/* Pagina 3 (De aanpak + Het resultaat): beide content-blokken samen      */
/* verticaal centreren binnen de wrapper-div, i.p.v. bovenaan geplakt met */
/* lege ruimte eronder. Analoog aan de pagina-1-fix.                      */
/* ===================================================================== */
/* T.8-uitbreiding: pagina 4 (Quote+Resultaat) en pagina 5 (video) hergebruiken dezelfde centrerings-aanpak als pagina 3 (De aanpak). */
/* T.8: pagina 5 (video-only) verwijderd - nth-child(5) hier weggehaald zodat de nieuwe pagina 5 (cases-carrousel) deze generieke flex-centrering niet erft */
.single-case .snap-page:nth-child(3) > div,
.single-case .snap-page:nth-child(4) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 24px !important;
  box-sizing: border-box !important;
  padding: 0 24px !important;
  overflow: hidden !important;
}
.single-case .snap-page:nth-child(3) > div > *,
.single-case .snap-page:nth-child(4) > div > * {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !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;
}


/* ===================================================================== */
/* Pagina 2 (idx=1, carrousel + Het probleem): wrapper-div zelf flex      */
/* maken en carrousel/tekst laten passen binnen 1 scherm, analoog aan de  */
/* eerdere carrousel-fix maar nu door de wrapper-laag heen.               */
/* ===================================================================== */
.single-case .snap-page:nth-child(2) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  padding: 0 24px !important;
  overflow: hidden !important;
}
.single-case .snap-page:nth-child(2) > div > .cc-page-carousel {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.single-case .snap-page:nth-child(2) > div > .cc-page-carousel img {
  max-height: 26vh !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
}
.single-case .snap-page:nth-child(2) > div > .content-block {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.single-case .snap-page:nth-child(2) > div > .content-block {
  flex: 1 1 calc(50% - 8px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
@media (min-width: 401px) {
  .single-case .snap-page:nth-child(2) > div > .content-block {
    justify-content: flex-start !important;
    padding-top: 24px !important;
  }
}

.single-case .snap-page:nth-child(2) > div > .content-block p {
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
}

@media (min-width: 768px) {
  .single-case .snap-page:nth-child(2) > div > .content-block p {
    font-size: 22px !important;
    text-align: left !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;
  }
}

@media (max-width: 767px) {
  .single-case .snap-page:nth-child(2) > div > .content-block p {
    font-size: 16px !important;
  }
}


/* ===================================================================== */
/* Footer-pagina (laatste snap-page): originele, natuurlijke footer-      */
/* afmetingen herstellen. De generieke .snap-page > * regel (height:100%;*/
/* overflow:hidden) knijpt de footer anders in de standaard schermhoogte,*/
/* wat zijn layout (met name op desktop) breekt. Footer mag hoger zijn   */
/* dan 1 scherm; de gebruiker scrollt dan binnen die laatste pagina.     */
/* ===================================================================== */
.single-case .snap-page[data-idx="5"] {
  height: auto !important;
  min-height: 100svh !important;
  overflow: visible !important;
}
.single-case .snap-page[data-idx="5"] > footer.footer {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}


/* T.8.1 mobiel: pagina 3 ("De aanpak" + "Technische diepgang") bovenaan starten i.p.v. verticaal centreren op grote mobiele schermen (>767px content overschrijdt scherm niet altijd) */
@media (max-width: 767px) {
	.single-case .snap-page:nth-child(3) > div,
	.single-case .snap-page:nth-child(4) > div {
		justify-content: flex-start !important;
		padding-top: 24px !important;
	}
}


/* T.8.1 zeer klein mobiel (<400px): tekst in "De aanpak"/"Technische diepgang" op pagina 3 verkleind om afsnijding te voorkomen (Peter-feedback) */
@media (max-width: 400px) {
	.single-case .snap-page:nth-child(3) > div > .content-block > .col-text p,
	.single-case .snap-page:nth-child(4) > div > .content-block > .col-text p {
		font-size: 14px !important;
		line-height: 1.4 !important;
	}
}


/* T.8.1 vervolg (Peter-feedback): regelafstand pagina 3 "De aanpak"/"Technische diepgang" expliciet gelijk gemaakt op groot mobiel (401-767px), i.p.v. impliciete browser-standaard "normal" */
@media (min-width: 401px) and (max-width: 767px) {
	.single-case .snap-page:nth-child(3) > div > .content-block > .col-text p,
	.single-case .snap-page:nth-child(4) > div > .content-block > .col-text p {
		line-height: 1.4 !important;
	}
}

/* T.8.1 vervolg (Peter-feedback): zelfde kleine-scherm-tekstverkleining (<400px) als pagina 3, nu ook op pagina 2 ("Het probleem") */
@media (max-width: 400px) {
	.single-case .snap-page:nth-child(2) > div > .content-block p {
		font-size: 14px !important;
		line-height: 1.4 !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.postid-4573 .wp-block-ctrl-casev2-result{border-top:none;}

/* T.8: pagina 3 - overbodige onderste marge (150px) van het laatste content-block (Technische diepgang) weghalen, geeft te veel witruimte onderaan op desktop */
.single-case .snap-page:nth-child(3) > div > .content-block:last-child{margin-bottom:0;}

/* 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 - pijltjes dichter bij de kaarten i.p.v. op een losse volle-breedte balk (Peter's optie A) */
body.postid-4573 .snap-page:nth-child(6) .slider-container{position:relative;}
body.postid-4573 .snap-page:nth-child(6) .slider-arrow-container{position:static;}
body.postid-4573 .snap-page:nth-child(6) .prev.slick-arrow{position:absolute !important;left:-62px;top:50%;transform:translateY(-50%);margin:0 !important;}
body.postid-4573 .snap-page:nth-child(6) .next.slick-arrow{position:absolute !important;right:-62px;top:50%;transform:translateY(-50%);margin:0 !important;}
/* T.8: hexagon-stijl van de pijltjes overnemen van de foto-gallerij-slideshow: doorzichtig met gele rand, zwarte pijl */
body.postid-4573 .snap-page:nth-child(6) .slider-arrow-container svg path.hexagon{fill:transparent !important;stroke:#ece318 !important;}
body.postid-4573 .snap-page:nth-child(6) .slider-arrow-container svg path:not(.hexagon){stroke:#000 !important;}

/* T.8: pagina 6 cases-carrousel - foto's niet laten uitrekken (geen object-fit gedefinieerd, browserstandaard 'fill' vervormde de beelden) */
body.postid-4573 .snap-page:nth-child(6) .slick-slide img{object-fit:cover;width:100%;aspect-ratio:16/9;display:block;height:auto;}

/* T.8: pagina 6 cases-carrousel - 'Lees dit succesverhaal'-knop in hexagon-stijl, zelfde ontwerp als de sector/competentie-badges op de banner (pagina 1) */
body.postid-4573 .snap-page:nth-child(6) 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%);}
body.postid-4573 .snap-page:nth-child(6) a.cases-button svg.hex-border{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
body.postid-4573 .snap-page:nth-child(6) a.cases-button::before,
body.postid-4573 .snap-page:nth-child(6) a.cases-button::after{content:none !important;}

/* T.8: 'Lees dit succesverhaal'-knop - rollover: enkel de hexagon-rand wordt zwart, tekst blijft zwart */
body.postid-4573 .snap-page:nth-child(6) a.cases-button svg.hex-border polygon{transition:stroke 0.2s ease;}
body.postid-4573 .snap-page:nth-child(6) a.cases-button:hover svg.hex-border polygon,
body.postid-4573 .snap-page:nth-child(6) a.cases-button:active svg.hex-border polygon,
body.postid-4573 .snap-page:nth-child(6) a.cases-button:focus svg.hex-border polygon{stroke:#000;}

/* T.8: pagina 6 cases-carrousel - sectorvermelding in zwarte hexagon-badge (zelfde vormtaal als de hex-border knop), bedrijfsnaam vet, introtekst cursief */
body.postid-4573 .snap-page:nth-child(6) .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%);}
body.postid-4573 .snap-page:nth-child(6) .slick-slide p{font-style:italic;}
body.postid-4573 .snap-page:nth-child(6) .slick-slide p span{font-style:normal;font-weight:700;}

/* T.8: pagina 6 cases-carrousel - herschikking op verzoek van Peter: alles centreren, foto afgeronde hoeken (zoals foto-galerij) i.p.v. schaduw, extra ruimte tussen bedrijfsnaam en introtekst, introtekst 1 formaat kleiner */
body.postid-4573 .snap-page:nth-child(6) .slick-slide{text-align:center;}
body.postid-4573 .snap-page:nth-child(6) .slick-slide img{border-radius:5px;box-shadow:none;}
body.postid-4573 .snap-page:nth-child(6) .slick-slide p span{margin-bottom:16px;}
body.postid-4573 .snap-page:nth-child(6) .slick-slide p{font-size:16px;}
body.postid-4573 .snap-page:nth-child(6) .slick-slide p span{font-size:20px;}

/* T.8: pagina 6 cases-carrousel - lege ruimte tussen introtekst en 'Lees dit succesverhaal'-knop weghalen (was margin-top:40px van sitebrede .cases-button) */
body.postid-4573 .snap-page:nth-child(6) a.cases-button{margin-top:0 !important;}

/* T.8: pagina 6 cases-carrousel - vaste 67px hoogte op introtekst weghalen (sneed langere teksten af), volledige tekst nu zichtbaar */
body.postid-4573 .snap-page:nth-child(6) .slick-slide p{height:auto !important;min-height:67px;overflow:visible !important;}

/* T.8: pagina 6 cases-carrousel - introtekst-paragraaf had geen volledige breedte (184px i.p.v. 306px), waardoor centreren links-verankerd oogde i.p.v. echt gecentreerd t.o.v. de foto */
body.postid-4573 .snap-page:nth-child(6) .slick-slide p{width:100% !important;box-sizing:border-box;}

/* T.8: pagina 6 cases-carrousel - schaduw op de foto was geen box-shadow maar filter:drop-shadow(), vandaar niet gevonden/verwijderd bij eerdere poging */
body.postid-4573 .snap-page:nth-child(6) .slick-slide img{filter:none !important;}

/* 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: vorige/volgende-pijltjes naast de kaarten plaatsen i.p.v. binnen de kaartenrij */
body.postid-4573 .snap-page:nth-child(6) .slider-arrow-container{left:-50px;right:-50px;width:auto;}

/* T.8: pagina 6 cases-carrousel - op mobiel: pijltjes op halve grootte, positionering (top) wordt via JS gelijkgetrokken met de bedrijfsnaam */
@media (max-width: 991px){
  body.postid-4573 .snap-page:nth-child(6) .prev.slick-arrow,
  body.postid-4573 .snap-page:nth-child(6) .next.slick-arrow{width:44px !important;height:44px !important;transform:translateY(-50%);z-index:20;display:flex !important;align-items:center;justify-content:center;}
  body.postid-4573 .snap-page:nth-child(6) .prev.slick-arrow svg,
  body.postid-4573 .snap-page:nth-child(6) .next.slick-arrow svg{width:30px !important;height:32px !important;pointer-events:none;}
  body.postid-4573 .snap-page:nth-child(6) .prev.slick-arrow{left:0px;}
  body.postid-4573 .snap-page:nth-child(6) .next.slick-arrow{right:0px;}
}

/* T.8: pagina 6 - SVG met transparante vulling ontvangt op sommige (mobiele) browsers geen klik-events; forceer dat kliks altijd naar de knop-div zelf gaan */
body.postid-4573 .snap-page:nth-child(6) .prev.slick-arrow svg,
body.postid-4573 .snap-page:nth-child(6) .next.slick-arrow svg{pointer-events:none;}

/* T.8: pagina 6 cases-carrousel - handcursor bij hover, en een hoge z-index (ook op desktop, niet enkel mobiel) zodat de schuivende foto tijdens de overgang nooit over de knop komt te liggen */
body.postid-4573 .snap-page:nth-child(6) .prev.slick-arrow,
body.postid-4573 .snap-page:nth-child(6) .next.slick-arrow{cursor:pointer;z-index:50;}
body.postid-4573 .snap-page:nth-child(6) .slick-list,
body.postid-4573 .snap-page:nth-child(6) .slick-track,
body.postid-4573 .snap-page:nth-child(6) .slick-slide{z-index:1;}

/* T.8: pagina 6 - tussenmarge tussen de kaarten verkleinen (was 50px). De onzichtbare "verspilde" ruimte na de laatste zichtbare kaart is exact gelijk aan deze marge-waarde; kleiner maken geeft ruimte voor de knop zonder overlap, terwijl de kaarten zelf gecentreerd kunnen blijven. */
@media (min-width: 992px){
  body.postid-4573 .snap-page:nth-child(6) .slick-slide{margin-right:20px !important;}
  body.postid-4573 .snap-page:nth-child(6) .slick-list{width:1092px !important;margin:0 auto !important;flex-shrink:0 !important;}
}

/* T.8: pagina 6 cases-carrousel - introtekst op kleinste mobiel (≤400px) gelijktrekken met de sitebrede tekstschaal elders (22/16/14px) */
@media (max-width: 400px){
  body.postid-4573 .snap-page:nth-child(6) .slick-slide p{font-size:14px !important;}
}

/* T.8: pagina 4 heeft nu 3 blokken (video, testimonial, resultaat) - vaste, kleinere video-hoogte (zoals de foto-galerij op pagina 2) en kleinere tussenruimtes zodat alles past zonder afsnijding */
@media (min-width: 992px){
  .single-case .snap-page:nth-child(4) .cc-video-frame-placeholder{aspect-ratio:16/9;width:50%;margin-left:auto;margin-right:auto;}
  .single-case .snap-page:nth-child(4) .cc-video-placeholder > .content-block{margin:20px 55px 20px !important;}
  .single-case .snap-page:nth-child(4) .wp-block-ctrl-casev2-quote .content-block{margin-top:0 !important;margin-bottom:0 !important;}
  .single-case .snap-page:nth-child(4) .wp-block-ctrl-casev2-result .content-block{margin-top:0 !important;margin-bottom:0 !important;}
  .single-case .snap-page:nth-child(4) > div{gap:0 !important;}
}

/* T.8: pagina 4 mobiel (3 blokken: video/testimonial/resultaat) - gelijke tussenruimte garanderen op één vast niveau (buitenste blokken), i.p.v. op .content-block waar marge-samenvoeging per blok verschillend gedrag gaf */
@media (max-width: 900px){
  .single-case .snap-page:nth-child(4) > div > .cc-video-placeholder,
  .single-case .snap-page:nth-child(4) > div > .wp-block-ctrl-casev2-quote,
  .single-case .snap-page:nth-child(4) > div > .wp-block-ctrl-casev2-result{margin-bottom:24px !important;margin-top:0 !important;}
  .single-case .snap-page:nth-child(4) .cc-video-placeholder > .content-block,
  .single-case .snap-page:nth-child(4) .wp-block-ctrl-casev2-quote .content-block,
  .single-case .snap-page:nth-child(4) .wp-block-ctrl-casev2-result .content-block{margin-top:0 !important;margin-bottom:0 !important;}
}

/* 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 4 (video/testimonial/resultaat) - de gedeelde verticale centrering van de nth-child(3)/(4)-wrapper (justify-content:center, oorspronkelijk bedoeld voor 2 blokken) geeft bij 3 gestapelde blokken een variabele, te grote bovenmarge boven de video die meebeweegt met de vensterhoogte i.p.v. een vaste afstand. Enkel pagina 4 naar bovenaan uitgelijnd, pagina 3 blijft ongewijzigd gecentreerd. */
.single-case .snap-page:nth-child(4) > div{justify-content:flex-start !important;}


/* 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.postid-4573 .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+footer) - de footer moet altijd de onderkant van de pagina raken, ook nu de inhoud (na de padding-verkleining hierboven) korter is dan de min-height:100svh van deze snap-page. .snap-page:nth-child(6) is flex-direction:column, maar de wrapper-div erin had geen flex-grow en volgde enkel de inhoud, waardoor er lege ruimte overbleef ONDER de footer i.p.v. de footer naar de bodem te duwen. Klassieke flexbox-sticky-footer-oplossing: wrapper vult de beschikbare hoogte (flex:1), wordt zelf ook een kolom-flexcontainer, en de footer krijgt margin-top:auto zodat hij naar de onderkant duwt zodra er ruimte over is. Bij lange inhoud (die niet past binnen 100svh) verandert er niets - de footer volgt gewoon direct na de inhoud zoals voorheen. */
@media (min-width: 992px){
  body.postid-4573 .snap-page:nth-child(6) > div{flex:1 1 auto !important;display:flex !important;flex-direction:column !important;}
  body.postid-4573 .snap-page:nth-child(6) > div > footer.footer{margin-top:auto !important;}
}


/* 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.postid-4573 .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;
  }
  .single-case .snap-page:nth-child(3) > div > .content-block > .col-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;
  }
  .single-case .snap-page:nth-child(4) > div > .cc-video-placeholder,
  .single-case .snap-page:nth-child(4) > div > .wp-block-ctrl-casev2-quote,
  .single-case .snap-page:nth-child(4) > div > .wp-block-ctrl-casev2-result {
    margin-bottom: 12px !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.postid-4573 .snap-page:first-child .cc-page-text h2 {
  display: none;
}
body.postid-4573 .snap-page:first-child .cc-page-text p {
  font-style: italic;
}


/* Sessie 20: Mathieu-feedback (Teams, 15/9) - 'Technisch onder de loep' (voorheen 'Technische
   diepgang') overlapte zichtbaar met het videokader eronder op mobiel. Mathieu's voorstel:
   gele achtergrond achter dat tekstblok, enkel post 4573. */
body.postid-4573 .cc-diepgang-block .col-text {
  background-color: #ece318;
  padding: 16px 20px;
}


/* MARGE-HARMONISATIE (nieuwe sessie): pagina 4 (Technisch onder de loep + Wat betekent) had helemaal
   geen eigen margeregel (0px), en pagina 5 se "Het resultaat" gebruikte nog 55px i.p.v. de 79px die
   pagina 1/2/3 renderen. Beide geforceerd naar dezelfde, consistente 79px links/rechts. */
body.postid-4573 .snap-page:nth-child(4) > div > .content-block{margin-left:55px !important;margin-right:55px !important;}
body.postid-4573 .snap-page:nth-child(5) .result-block .content-block{margin-left:79px !important;margin-right:79px !important;}


/* FIX (nieuwe sessie): tekstblok "Onze aanpak" (pagina 3, eerste kind van de wrapper) werd door de
   gedeelde flex-krimp-regel (flex:0 1 auto + overflow:hidden op ALLE kinderen) kleiner geperst dan
   zijn eigen inhoud nodig had, waardoor het einde van de tweede alinea zichtbaar werd afgesneden.
   De video ernaast heeft al een expliciete max-height-begrenzing (zie .cc-video-frame-placeholder),
   dus enkel de tekst moet hier voorrang krijgen op zijn volledige, natuurlijke hoogte. */
.single-case .snap-page:nth-child(3) > div > .content-block:first-child,
.single-case .snap-page:nth-child(4) > div > .content-block:first-child{flex:0 0 auto !important;overflow:visible !important;}


/* VANGNET (nieuwe sessie): op zeer lage schermhoogtes (bv. 1366x768, 1280x720) past "Onze aanpak"+video
   (pagina 3) resp. "Technisch onder de loep"+"Wat betekent" (pagina 4) niet meer volledig binnen 100svh,
   nu de tekst nooit meer mag krimpen/afsnijden (zie fix hierboven). In plaats van content stilzwijgend
   te clippen (overflow:hidden), wordt de pagina zelf verticaal scrollbaar - garandeert dat alle content
   altijd bereikbaar is, ook al is dat op de kleinste schermen via scrollen i.p.v. alles-in-1-oogopslag. */
.single-case .snap-page:nth-child(3),
.single-case .snap-page:nth-child(4){overflow-y:auto !important;}