/*!
Theme Name: PADDAP
Theme URI: http://underscores.me/
Author: PADDAP
Author URI: https://paddap.nl
Description: This is the boilerplate theme of PADDAP Digital Agency
Version: 1.0.0
*/

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

p {
	margin-bottom: 0;
}

a {
	text-decoration: none;
	color: var(--color-black);
	user-select: none;
}

a:hover,
a:focus {
	text-decoration: none;
}

/* ==========================
Theme Colors
========================== */
:root {
	/* Font family */
	--bodyFont: "Host Grotesk", sans-serif;
}

body {
	position: relative;
	font-family: var(--bodyFont);
}

section {
	padding-left: var(--space-4);
	padding-right: var(--space-4);
	/*   border: 1px solid var(--color-red); */
}

/* ==========================
Loader
========================== */
/* #loader {
position: fixed;
inset: 0;
background: var(--color-white);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.4s ease;
}

#loader.hidden-loader {
opacity: 0;
pointer-events: none;
}
*/

/* ==========================
Customization / Utility Classes
========================== */

/* Text Transform */
.capitalize {
	text-transform: capitalize;
}
.uppercase {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}



/* Borders */
.border-t-primary {
	border-top: 1px solid var(--color-primary);
}
.border-b-primary {
	border-bottom: 1px solid var(--color-primary);
}
.border-red {
	border: 1px solid var(--color-red);
}

/* Text Alignment */
.align-left {
	text-align: left;
}
.align-center {
	text-align: center;
}
.align-right {
	text-align: right;
}
.aspect-square {
	aspect-ratio: 1/1;
}

/* ==========================
Layout Utilities (Tailwind-like)
========================== */

/* Display */
.block {
	display: block;
}
.inline {
	display: inline;
}
.inline-block {
	display: inline-block;
}
.flex-1 {
	flex: 1 1 0%; 
}
.flex {
	display: flex;
}
.grid {
	display: grid;
}
.inline-flex {
	display: inline-flex;
}
.inline-grid {
	display: inline-grid;
}

/* Flexbox */
.flex-row {
	flex-direction: row;
}
.flex-row-reverse {
	flex-direction: row-reverse;
}
.flex-col {
	flex-direction: column;
}
.flex-col-reverse {
	flex-direction: column-reverse;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-nowrap {
	flex-wrap: nowrap;
}
.justify-start {
	justify-content: flex-start;
}
.justify-center {
	justify-content: center;
}
.justify-end {
	justify-content: flex-end;
}
.justify-between {
	justify-content: space-between;
}
.justify-around {
	justify-content: space-around;
}
.justify-evenly {
	justify-content: space-evenly;
}
.items-start {
	align-items: flex-start;
}
.items-center {
	align-items: center;
}
.items-end {
	align-items: flex-end;
}
.items-stretch {
	align-items: stretch;
}
.items-baseline {
	align-items: baseline;
}

/* Grid */
.grid-cols-1 {
	grid-template-columns: repeat(1, 1fr);
}
.grid-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}
.grid-cols-5 {
	grid-template-columns: repeat(5, 1fr);
}
.grid-cols-6 {
	grid-template-columns: repeat(6, 1fr);
}
.grid-rows-1 {
	grid-template-rows: repeat(1, 1fr);
}
.grid-rows-2 {
	grid-template-rows: repeat(2, 1fr);
}
.grid-rows-3 {
	grid-template-rows: repeat(3, 1fr);
}
.grid-rows-4 {
	grid-template-rows: repeat(4, 1fr);
}

/* Justify and Align for Grid */
.justify-start {
	justify-items: start;
}
.justify-center {
	justify-items: center;
}
.justify-end {
	justify-items: end;
}
.justify-stretch {
	justify-items: stretch;
}

.items-start {
	align-items: start;
}
.items-center {
	align-items: center;
}
.items-end {
	align-items: end;
}
.items-stretch {
	align-items: stretch;
}

/* Width / Height */
.w-auto {
	width: auto;
}
.w-full {
	width: 100%;
}
.w-screen {
	width: 100vw;
}
.min-w-auto {
	min-width: auto;
}
.w-fit {
	width: fit-content;
}
.min-w-full {
	min-width: 100%;
}
.h-auto {
	height: auto;
}
.h-full {
	height: 100%;
}
.h-screen {
	height: 100vh;
}
.h-fit {
	height: fit-content;
}
/* Height utilities using clamp() */
.min-h-1  { min-height: clamp(5px, 1vw, 8px); }
.h-px { height: clamp(1px, 0.1vw, 2px); }
.h-1  { height: clamp(5px, 1vw, 8px); }
.h-2  { height: clamp(10px, 2vw, 20px); }
.h-3  { height: clamp(15px, 3vw, 30px); }
.h-4  { height: clamp(20px, 4vw, 40px); }
.h-5  { height: clamp(25px, 5vw, 50px); }
.h-6  { height: clamp(30px, 6vw, 60px); }
.h-7  { height: clamp(35px, 7vw, 70px); }
.h-8  { height: clamp(40px, 8vw, 80px); }
.h-9  { height: clamp(45px, 9vw, 90px); }
.h-10 { height: clamp(50px, 10vw, 100px); }
.h-12 { height: clamp(60px, 12vw, 120px); }
.h-14 { height: clamp(70px, 14vw, 140px); }
.h-16 { height: clamp(80px, 16vw, 160px); }
.h-18 { height: clamp(90px, 18vw, 180px); }
.h-20 { height: clamp(100px, 20vw, 200px); }
.h-25 { height: clamp(125px, 25vw, 250px); }
.h-30 { height: clamp(150px, 30vw, 300px); }
.h-35 { height: clamp(175px, 35vw, 350px); }
.h-40 { height: clamp(200px, 40vw, 400px); }
.h-50 { height: clamp(250px, 50vw, 500px); }

/* Width utilities using clamp() */
.min-w-1  { min-width: clamp(5px, 1vw, 8px); }
.w-px { width: clamp(1px, 0.1vw, 2px); }
.w-1 { width: clamp(5px, 1vw, 8px); }
.w-2  { width: clamp(10px, 2vw, 20px); }
.w-3  { width: clamp(15px, 3vw, 30px); }
.w-4  { width: clamp(20px, 4vw, 40px); }
.w-5  { width: clamp(25px, 5vw, 50px); }
.w-6  { width: clamp(30px, 6vw, 60px); }
.w-7  { width: clamp(35px, 7vw, 70px); }
.w-8  { width: clamp(40px, 8vw, 80px); }
.w-9  { width: clamp(45px, 9vw, 90px); }
.w-10 { width: clamp(50px, 10vw, 100px); }
.w-12 { width: clamp(60px, 12vw, 120px); }
.w-14 { width: clamp(70px, 14vw, 140px); }
.w-16 { width: clamp(80px, 16vw, 160px); }
.w-18 { width: clamp(90px, 18vw, 180px); }
.w-20 { width: clamp(100px, 20vw, 200px); }
.w-25 { width: clamp(125px, 25vw, 250px); }
.w-30 { width: clamp(150px, 30vw, 300px); }
.w-35 { width: clamp(175px, 35vw, 350px); }
.w-40 { width: clamp(200px, 40vw, 400px); }
.w-50 { width: clamp(250px, 50vw, 500px); }


/* Max / Min Width */
.max-w-full {
	max-width: 100%;
}
.max-h-full {
	max-height: 100%;
}
.min-w-0 {
	min-width: 0;
}
.min-h-0 {
	min-height: 0;
}

/* Overflow */
.overflow-auto {
	overflow: auto;
}
.overflow-hidden {
	overflow: hidden;
}
.overflow-scroll {
	overflow: scroll;
}

/* Positioning */
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.fixed {
	position: fixed;
}
.sticky {
	position: sticky;
}
.top-0 {
	top: 0;
}
.bottom-0 {
	bottom: 0;
}
.left-0 {
	left: 0;
}
.right-0 {
	right: 0;
}

/* Z-index */
.z-1 {
	z-index: 1;
}
.z-10 {
	z-index: 10;
}
.z-20 {
	z-index: 20;
}
.z-30 {
	z-index: 30;
}
.z-40 {
	z-index: 40;
}
.z-50 {
	z-index: 50;
}

/* ============================= */
/* REUSABLE BUTTON SYSTEM */
/* ============================= */

/* Base button */
.btn--blue,
.btn--white,
.header__menu > li > a {
	display: flex;
	flex-direction: row;
	place-items: center;
	justify-content: center;
	gap: 12px;
	height: clamp(35px, 3.15vw, 45px);
	padding: 0 20px;
	font-family: var(--bodyFont);
	font-weight: var(--fw-2);
	font-size: clamp(16px, 1.15vw, 22px);;
	text-transform: uppercase;
	border-radius: var(--rounded-full);
	border: 1px solid transparent;
	background: var(--color-white);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
	width: fit-content;
}

.btn--blue br,
.btn--white br {
	display: none;
}

/* Variant 1: Primary (current navbar button) */
.btn--blue,
.header__menu > li > a {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background-color: var(--color-white) !important;
}

/* Variant 2: White (white text and border) */
.btn--white,
.footer-cta a {
	color: var(--color-white);
	border-color: var(--color-white);
	background-color: transparent;
}

/* buttons hover */
.header__menu > li > a:hover,
.header__menu > .nav-link-hover:hover,
.btn--blue:hover {
	background-color: var(--color-primary) !important;
	color: var(--color-accent) !important;
}

.btn--blue:hover {
	border-color: var(--color-primary);
}

.btn--white:hover {
	background-color: var(--color-white);
	color: var(--color-primary);
}


.btn--wide, .header__menu > li > a {
	gap: 25px;
	padding: 0 30px;
}


/* ============================= */
/* HERO SECTION */
/* ============================= */
.hero {
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100vh;
	/* 	padding-top: var(--space-6);
	padding-left: var(--space-6);
	padding-right: var(--space-6); */
	padding: var(--space-3);
	padding-top: var(--space-5);
	margin-top: var(--space-2);
	justify-content: space-between;
}

.hero__video-container {
	height: 100%;
	display: flex;
	align-items: center;
}

.hero .video-container__video {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	margin-left: auto;
	width: clamp(100px, 90vh, 2400px);
	transform-origin: right center;
}

.hero__subtitle {
	max-width: clamp(50px, 33vw, 1000px);
	font-size: var(--fs-7);
	font-weight: var(--fw-2);
	line-height: 140%;
}

.hero__title {
	font-size: clamp(60px, 10.7vw, 1000px);
	font-weight: var(--fw-3);
	color: var(--color-primary);
	text-wrap: nowrap;
	transform: translatex(clamp(-100px, -0.5vw, -1px));
}

.hero__title > br {
	display: none;
}

/* ============================= */
/* HERO 2 SECTION */
/* ============================= */

.hero-2__headline {
	font-weight: var(--fw-2);
	font-size: var(--fs-2);
	color: var(--color-primary);
	padding-bottom: var(--space-3);
	padding-top: var(--space-10);
	padding-left: var(--space-6);
	margin: 0;
}

/* ============================= */
/* TEXT SECONDARY SECTION */
/* ============================= */

.paddap-module-tekst-secondary {
	padding-right: var(--space-10);
	
}

/* ============================= */
/* CASE PAGE */
/* ============================= */

.case-template-default br {
	display: none;
}

.case-template-default .section-3,
.case-template-default .section-4,
.case-template-default .section-11 {
	margin-top: var(--space-10);
}

.case-hero__title,
.case-hero__subtitle,
.hero-2__subheadline,
.paddap-module-tekst-secondary .paddap-module-tekst-secondary__large {
	font-weight: var(--fw-2);
	font-size: clamp(25px, 2.6vw, 40px);
	line-height: 1.2;
	color: var(--color-black);
	padding-left: var(--space-11);
	padding-right: var(--space-7);
}

.paddap-module-tekst-secondary h2 {
	font-size: var(--fs-8);
    line-height: 1.4;
	color: var(--color-accent);
}

.paddap-module-tekst-secondary .paddap-module-tekst-secondary__body {
/* 	font-size: clamp(10px, 2.6vw, 100px); */
	padding-left: var(--space-11);
	padding-right: var(--space-7);
}

.hero-2__subheadline {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.case-hero__title {
	color: var(--color-accent);
	margin: 0;
}

.case__case-content {
	display: flex;
	flex-direction: row;
	margin-top: var(--space-6);
	margin-bottom: var(--space-4);
}

.case-content__left-column {
	display: flex;
	flex-direction: column;
	border-top: clamp(1px, 0.1vw, 10px) solid var(--color-off-white);
	border-bottom: clamp(1px, 0.1vw, 10px) solid var(--color-off-white);
	margin-right: auto;
}

.case-content__left-column .left-column__diensten,
.case-content__left-column .left-column__klant {
	padding: var(--space-2) 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.case-content__left-column .left-column__diensten h3,
.case-content__left-column .left-column__klant h3 {
	font-weight: var(--fw-1);
	color: var(--color-accent);
	font-size: var(--fs-8);
}

.case-content__left-column .left-column__diensten div,
.case-content__left-column .left-column__klant div {
	color: var(--color-gray);
	font-size: var(--fs-8);
}

.case-content__left-column .left-column__diensten {
	gap: var(--space-2);
	padding-bottom: var(--space-3);
	border-top: clamp(1px, 0.1vw, 10px) solid var(--color-off-white);
}

.case-content__left-column .left-column__diensten ul {
	display: flex;
	flex-direction: column;
	padding-left: var(--space-3);
	gap: clamp(2px, 0.3vw, 20px);
}

.dienst-item {
	overflow: hidden;
	max-height: clamp(10px, 8vw, 1000px);
	transition: max-height 700ms ease;
}

.diensten-loop {
	counter-reset: dienst;
}

.dienst-item {
	counter-increment: dienst;
}

.dienst-item__index::before {
	content: counter(dienst, decimal-leading-zero);
	transform: translatey(clamp(-500px, -2.5vw, -5px));
	display: inline-block;
}

.dienst-item__image-container {
	width: clamp(100px, 20vw, 1000px);
	height: clamp(135px, 25vw, 1000px); 
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #eee;
}

.description-container__left-column {
	max-height: clamp(20px, 25vw, 1000px);
}

.dienst-item__image {
	width: 100%;
	height: 100%;
	object-fit: cover; 
}

.dienst-item__description-container {
	transition: opacity 0.3 ease;
	opacity: 0;
}

.dienst-item__description {
	max-width: clamp(100px, 30vw, 1000px);
}

.dienst-item__toggle {
	height: clamp(15px, 2vw, 500px);;
	width: clamp(15px, 2vw, 500px);;
}

.dienst-item__toggle-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.dienst-item__toggle-icon-1 {
	width: clamp(7px, 1.5vw, 15px);
	height: clamp(1px, 0.1vw, 10px);
}

.dienst-item__toggle-icon-2 {
	height: clamp(7px, 1.5vw, 15px);
	width: clamp(1px, 0.1vw, 10px);
	transition: all 0.2s ease;
}


.case-content__right-column img {
	width: clamp(100px, 55vw, 2000px);
}

.image-text-section--3 {
	padding-top: var(--space-10);
}

/* ============================= */
/* Dubbele afbeelding Section */
/* ============================= */

.case-video > .wp-video {
	width: 100% !important;
	height: auto;
}

/* ============================= */
/* Dubbele afbeelding Section */
/* ============================= */

.double-image {
	display: flex;
	flex-direction: row;
	height: fit-content;
}

.double-image__left,
.double-image__right {
	object-fit: cover !important;
	width: 50%;
	
}

.double-image--50-50 {
	width: 50%;
}

.double-image--30 {
	width: 30%;
}

.double-image--70 {
	width: 70%;
}

.afbeelding {
	margin-top: var(--space-8);
}

/* ============================= */
/* CASES RADIO GROUP */
/* ============================= */

.cases-radio-group form {
	display: flex;
	flex-direction: row;
	gap: var(--space-2);
	justify-content: center;
}

.cases-radio-group input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.cases-radio-group label {
	cursor: pointer;
	text-transform: uppercase;
}

/* radio button styles */
.cases-radio-group .radio { 
	display: inline-block;
	text-transform: capitalize;
	cursor: pointer;
	padding: var(--space-1) clamp(5px, 1.5vw, 50px);;
	border: clamp(1px, 0.02vw, 10px) solid var(--color-primary);
	font-size: var(--fs-8);
	background: var(--color-white);
	color: var(--color-primary);
	border-radius: var(--rounded-full);
	transition: all 0.3s ease;
}

/* active/selected state styles */
.cases-radio-group .radio:has(input:checked),
.cases-radio-group .radio:hover {
	color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-accent);
}

/* ============================= */
/* IMAGE + TEXT SECTION */
/* ============================= */

.partners-2-section .partners-2-section__inner,
.partners-section .partners-section__inner,
.blog-detail-content-section .blog-detail-content-section__inner  {
	width: 100%;
	max-width: clamp(500px, 60vw, 3000px);
	font-size: var(--fs-7);
	font-weight: var(--fw-2);
}

.partners-2-section__partner,
.partners-section__partner {
	border-bottom: 1px solid var(--color-black);
}

.partners-section__partner:hover .partner__partner-title {
	color: var(--color-primary);
}

.partners-section__partner:hover .partner__partner-title svg {
	transform: translatex(clamp(5px, 1vw, 40px));
}

.partner__partner-title svg {
	width: clamp(5px, 1.5vw, 150px);
	transition: all 0.3s ease;
}

.partner__partner-location {
	min-width: clamp(0px, 20vw, 500px);
}

.partner__partner-location svg {
	width: clamp(5px, 1.1vw, 150px);
}

/* ============================= */
/* IMAGE + TEXT SECTION */
/* ============================= */

.image-text-section:has(.image-text-section__image--left) {
	align-items: flex-start;
}

.image-text-section:has(.image-text-section__image--right) {
	align-items: flex-end;
}

.image-text-section--2 { 
	padding-top: var(--space-10); 
}

.image-text-section .image-text-section__image--left,
.image-text-section .image-text-section__image--right {
	width: 100%;
	max-width: clamp(100px, 55vw, 2000px);
}

.image-text-section__tekst h2 {
	color: var(--color-accent);
	font-size: var(--fs-6);
	font-weight: var(--fw-2) !important;
}

.image-text-section__tekst ul {
	margin-bottom: var(--space-3);
	font-weight: var(--fw-4);
}

.image-text-section__tekst p {
	font-size: var(--fs-8);
	line-height: 1.4;
}

/* CONTACT PAGE - .page-id-74 */
.page-id-74 .image-text-section {
	align-items: flex-start;
}
.page-id-74 .image-text-section__tekst {
	gap: 0;
}
.page-id-74 .image-text-section__tekst > h2 {
	margin-bottom: var(--space-3);
}
.page-id-74 .image-text-section__tekst a {
	text-decoration: underline;
}

/* ============================= */
/* ACCORDION SECTION */
/* ============================= */

.accordion-section {
	padding: var(--space-8) var(--space-5) var(--space-10) var(--space-6);
	background: var(--color-off-white);
}

.accordion-section__main-title {
	color: var(--color-primary);
	font-size: var(--fs-5);
	font-weight: var(--fw-2);
}

.accordion-section__accordion-items {
	display: flex;
	flex-direction: row;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-left: var(--space-10);
}

.accordion-section__column {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1;
}

.accordion-items__accordion-item {
	border-bottom: 1px solid var(--color-primary);
	display: flex;
	position: relative;
	flex-direction: column;
	gap: var(--space-2);
}

.accordion-item__title {
	color: var(--color-primary);
	font-size: var(--fs-7);
	font-weight: var(--fw-2);
	padding-right: var(--space-5);
}

.accordion-items__accordion-item.is-open .accordion-item__description {
	opacity: 1;
}

.accordion-item__description {
	font-size: var(--fs-8);
	max-width: 85%;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease;
}

.accordion-item__description-inner {
	padding-bottom: var(--space-2);
}

.accordion-items__accordion-item.is-open .accordion-item__toggle-icon-2 {
	transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-item__toggle {
	height: clamp(15px, 2vw, 500px);
	width: clamp(15px, 2vw, 500px);
}
.accordion-item__toggle-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.accordion-item__toggle-icon-1 {
	width: clamp(7px, 1.5vw, 15px);
	height: clamp(1px, 0.12vw, 10px);
}
.accordion-item__toggle-icon-2 {
	height: clamp(7px, 1.5vw, 15px);
	width: clamp(1px, 0.12vw, 10px);
	transition: all 0.2s ease;
}

/* ==========================
Over Ons Page
========================== */

.page-id-80 .section-9 {
	background: var(--color-off-white);
	padding-top: var(--space-8);
	padding-bottom: var(--space-10);
	margin-top: var(--space-8);
}

.page-id-80 .section-9 p:first-child {
	padding-left: clamp(120px, 17.5vw, 500px);
	padding-right: var(--space-8);
	font-size: clamp(10px, 2.6vw, 100px);
	font-weight: var(--fw-2);
	line-height: 1.2;
}

.page-id-80 .section-9 a {
	text-decoration: underline;
}

.page-id-80 .section-9 br {
	display: none;
}

.page-id-80 .section-9 #sbi_images {
	margin-top: var(--space-4);
}

.page-id-80 .section-9 .sb_instagram_header {
	display: none;
}

.page-id-80 .site-footer {
	margin-top: 0;
}

/* ============================= */
/* JOBS PAGE */
/* ============================= */

.page-id-158 #section-3 {
	margin-top: var(--space-8);
}
/* 
.page-id-158 #section-4 {
padding-left: 
} */

.page-id-158 .section-5 {
	padding-left: var(--space-6);
	padding-right: var(--space-5);
}

.page-id-158 .section-4 {
	padding-left: var(--space-6);
	color: var(--color-primary);
}

.page-id-158 .section-5 img,
.page-id-158 .section-7 img {
	width: 100%;
}

.page-id-158 .section-7 {
	padding-left: var(--space-11);
	padding-right: var(--space-5);
}

/* ============================= */
/* CONTACT PAGE */
/* ============================= */

/* Image and text section */

.page-id-74 .image-text-section {
	position: relative;
}

/* Contact form */
.contact-section__form {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.contact-section__form form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

.contact-section__form p:not(:has([data-name="onderwerp"])):not(:has([data-name="your-message"])) input,
.wpcf7-response-output {
	max-width: clamp(100px, 27vw, 1000px);
}

.contact-section__form textarea,
.contact-section__form input:not([type="submit"]) {
	border: 0;
	border-bottom: 1px solid var(--color-black);
	outline: none;
	border-radius: 0;
}

.contact-section__form p:has([data-name="onderwerp"]),
.contact-section__form p:has([data-name="your-message"]),
.contact-section__form p:has(.wpcf7-submit),
.contact-section__form p:has(.wpcf7-response-output) {
	grid-column: span 2;
}

.contact-section__form p:has(.wpcf7-submit) {
	display: flex;
	flex-direction: row;
}

.wpcf7 label {
	position: relative;
	display: block;
	/*     border-bottom: 1px solid var(--color-black); */
	margin-bottom: var(--space-2);
	transition: border-color 0.3s ease;
}

/* Hide the actual label text */
.wpcf7 label {
	font-size: 0;
}

/* Fake label text that animates */
.wpcf7 label::before {
	content: attr(data-label);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--fs-8);
	color: var(--color-black);
	pointer-events: none;
	transition: all 0.3s ease;
}

/* Floated state */
.wpcf7 label.is-active::before,
.wpcf7 label.has-value::before {
	top: 0;
	transform: translateY(-150%);
	font-size: var(--fs-10);
	color: var(--color-primary);
}

.wpcf7 label.is-active {
	border-bottom-color: var(--color-primary);
}

.wpcf7 label input,
.wpcf7 label textarea {
	display: block;
	width: 100%;
	background: transparent;
	outline: none;
	font-size: var(--fs-8);
	font-family: var(--bodyFont);
	color: var(--color-black);
	padding-bottom: var(--space-2);
}

.wpcf7 label textarea {
	resize: none;
}

.wpcf7 label br {
	display: none;
}

.wpcf7-response-output {
	margin: 0 !important;
}

/* ============================= */
/* CASES KAART SECTION */
/* ============================= */

.cases-grid__wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	row-gap: var(--space-6);	
}

@media screen and (min-width: 768px) {
	.cases-grid__wrapper {
		padding: 0 var(--space-4);
	}	
}

.cases-grid__item {
	width: 100%;
	height: auto;
}

/* ── Row 1: 1 2 1 ── items 1, 2, 3 */
/* item 2 spans 2 */
.cases-grid__item:nth-child(8n+2) {
	grid-column: span 2;
}

/* ── Row 2: 1 1 2 ── items 4, 5, 6 */
/* item 6 spans 2 */
.cases-grid__item:nth-child(8n+6) {
	grid-column: span 2;
}

/* ── Row 3: 2 2 ── items 7, 8 */
.cases-grid__item:nth-child(8n+7),
.cases-grid__item:nth-child(8n+8) {
	grid-column: span 2;
}

/* ── Aspect ratios ── */
.cases-kaart__image-container {
	height: 100%;
	max-height: clamp(40px, 27vw, 2000px);
	min-width: 100%;
	overflow: hidden;
}

/* Wide aspect for span-2 items */
.paddap-module-gerelateerde-cases .cases-grid__item:nth-child(8n+2) .cases-kaart__image-container,
.paddap-module-gerelateerde-cases .cases-grid__item:nth-child(8n+6) .cases-kaart__image-container,
.paddap-module-gerelateerde-cases .cases-grid__item:nth-child(8n+7) .cases-kaart__image-container,
.paddap-module-gerelateerde-cases .cases-grid__item:nth-child(8n+8) .cases-kaart__image-container,
.uitgelichte-cases .cases-grid__item:nth-child(8n+2) .cases-kaart__image-container,
.uitgelichte-cases .cases-grid__item:nth-child(8n+6) .cases-kaart__image-container,
.uitgelichte-cases .cases-grid__item:nth-child(8n+7) .cases-kaart__image-container,
.uitgelichte-cases .cases-grid__item:nth-child(8n+8) .cases-kaart__image-container {
    aspect-ratio: 103 / 60;
}
.page-id-134 .hero-2__headline {
	transform: scale(0.9);
}
/* 
.cases-kaart__image-container {
aspect-ratio: 4/5;
overflow: hidden;
} */

.cases-kaart__image {
	object-fit: cover;
	height: 100%;
	width: 100%;
	transition: all 0.3s ease;
}

.cases-kaart:hover .cases-kaart__image {
	transform: scale(1.1);
}

.cases-kaart__post-taxonomies {
	margin-top: var(--space-2);
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: var(--fs-10);
	gap: var(--space-1);
	color: var(--color-gray);
}

.cases-kaart__post-taxonomies div {
	background: var(--color-gray);
	border-radius: 100%;
	min-height: clamp(3px, 0.5vw, 8px);
	min-width: clamp(3px, 0.5vw, 8px);
	aspect-ratio: 1/1;
}

.cases-kaart__post-taxonomies div:not(:first-child) {
	margin-left: 7px;
}

.cases-kaart__post-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	margin-top: var(--space-1);
	transition: all 0.3s ease;
}

.cases-kaart:hover .cases-kaart__post-title {
	gap: 5px;
}

.cases-kaart__arrow-icon {
	margin-top: 2px;
	transition: all 0.3s ease;
	max-width: 0;
	opacity: 0;
}

.cases-kaart:hover .cases-kaart__arrow-icon {
	max-width: 100%;
	opacity: 1;
}

.cases-kaart_post-title-text {
	font-size: var(--fs-8);
	font-weight: var(--fw-3);
	transition: all 0.3s ease;
}

.cases-kaart__post-subtitle {
	font-size: var(--fs-9);
}

/* ============================= */
/* GEESTEN PAGE */
/* ============================= */

.page-id-99 {
	background: var(--color-off-white);
}

.onze-geesten-section {
	padding: 0 var(--space-6);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 1.5vw, 100px);
}

.onze-geesten-section__geesten-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	overflow: hidden;
	background: var(--color-white);
	padding: var(--space-2);
}

.onze-geesten-section__geesten-card:hover .geesten-card__info:not(.geesten-card__info--last-item) {
	transform: translatey(clamp(-1000px, -15vw, -0px));
}

.onze-geesten-section__geesten-card:hover .geesten-card__info:not(.geesten-card__info--last-item) > .geesten-card__role {
	font-weight: var(--fw-3);
}

.onze-geesten-section__geesten-card:hover .geesten-card__hover-card {
	opacity: 1;
}

.geesten-card__hover-card {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: all 0.4s ease;
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-left: var(--space-2);
}

.hover-card__ghost-frame {
	margin-left: auto;
	max-width: clamp(20px, 13vw, 1000px);
	padding-right: var(--space-3);
	padding-top: var(--space-3);
}

.hover-card__description {
	font-size: clamp(0px, 1.2vw, 500px);
	padding-right: var(--space-4);
}

.geesten-card__image-container {
	width: 100%;
	height: 100%;
	aspect-ratio: 6/7;
	overflow: hidden;
	background: var(--color-off-white);
}

.geesten-card__image-container--last-item img {
	transform: scale(1.4);
}

.geesten-card__image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.geesten-card__content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.geesten-card__info {
	display: flex;
	flex-direction: column;
	padding-left: var(--space-2);
	padding-bottom: var(--space-2);
	transition: all 0.4s ease;
}

.geesten-card__name {
	font-size: var(--fs-7);
	color: var(--color-primary);
	font-weight: var(--fw-2);
}

.geesten-card__role {
	font-size: var(--fs-9);
}

.geesten-card__linkedin {
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: 999px;
	width: clamp(5px, 2vw, 100px);
	height: clamp(5px, 2vw, 100px);
	display: grid;
	place-items: center;
	padding: var(--space-1);
}

.geesten-card__linkedin svg {
	height: 100%;
	width: auto;
}

/* ============================= */
/* Kom bij de club / vacatures / JOBS PAGE */
/* ============================= */

.openstaande-vacatures-section__content {
	width: 100%;
	margin-top: var(--space-5);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	padding-left: var(--space-10);
}

.vacatures-kaart__apply-button {
	background-color: var(--color-off-white) !important;
}

.vacatures-kaart > p:first-of-type {
	font-size: var(--fs-8);
	margin: var(--space-3) 0;
}

/* ============================= */
/* ICON STYLES */
/* ============================= */

.arrow-icon,
.map-pin-icon {
	width: clamp(5px, 1.7vw, 1000px);
	height: clamp(5px, 1.7vw, 1000px);
	aspect-ratio: 1 / 1;
}

/* ============================= */
/* HEADER */
/* ============================= */

.header__branding {
	display: flex;
	align-items: center;
}

.logo {
	position: absolute;
	transition: all 0.5s ease;
}
.custom-logo-link {
	display: grid;
	place-items: center;
}

.logo--ghost {
	width: 50px;
	opacity: 0;
}

.header.is-scrolled .logo--default {
	opacity: 0;
}

.header.is-scrolled .logo--ghost {
	opacity: 1;
}

.header {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header__container {
	position: fixed;
	padding: var(--space-3);
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 999;
	/* 	background: color-mix(in srgb, var(--color-white) 90%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px); */
}

.header__container button,
.header__container a,
.header__branding{
	pointer-events: auto;
}
.header__container {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header__branding img {
	width: 200px;
}

.header__menu {
	list-style: none;
	display: flex;
	gap: 12px;
	align-items: center;
}

/* If menu links should look like buttons */
.header__menu li a {
	text-decoration: none;
}

/* ============================= */
/* MENU DROPDOWN */
/* ============================= */

/* Hidden by default */
.menu-dropdown {
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--color-primary);
	width: 100%;
	height: 100vh;
	z-index: 9999;
	margin: 0;
	opacity: 0;
	transform: translateY(-100%);
	pointer-events: none; /* prevent clicks when hidden */
	transition: opacity 0.4s ease, transform 0.4s ease;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

/* Active / visible state */
.menu-dropdown.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.menu-dropdown__logo img {
	width: 200px;
}

.menu-dropdown__list > .menu-item {
	border-bottom: 1px solid #ffffff4d;
	padding-left: var(--space-8);
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	font-weight: var(--fw-2);
	font-size: clamp(20px, 3vw, 100px);
}

.menu-dropdown__list > .menu-item > a {
	text-transform: lowercase;
}

.menu-dropdown__list > .menu-item:nth-child(2) {
	align-items: start;
}

.menu-dropdown__list > .menu-item > a {
	color: var(--color-white);
	transition: color 0.3s ease;
	user-select: none;
}

.menu-dropdown__list .sub-menu > .menu-item a {
	color: var(--color-white);
	transition: color 0.3s ease;
	user-select: none;
	padding: var(--space-1) 0;
}

.sub-menu-item__bullet {
	min-width: clamp(2px, 0.5vw, 50px);
	min-height: clamp(2px, 0.5vw, 50px);
	margin-right: var(--space-2);
	border-radius: 999px;
	background-color: var(--color-accent);
}

.menu-dropdown__list > .menu-item:nth-child(2) {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	cursor: default;
}

.menu-dropdown__list > .menu-item:nth-child(2) > a {
	color: var(--color-accent);
	pointer-events: none;
}

.menu-dropdown__list > .menu-item > .sub-menu {
    display: grid;
    column-gap: var(--space-7);
    margin: 0;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    padding-right: var(--space-7);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
}

.menu-dropdown__list > .menu-item > .sub-menu > .menu-item {
	font-size: var(--fs-7);
	display: flex;
	flex-direction: row;
	align-items: center;
}

.menu-dropdown__list > .menu-item a:hover,
.menu-dropdown__list > .menu-item:hover > a {
	color: var(--color-accent);
}

.menu-dropdown__list,
.menu-dropdown__list li {
	list-style: none;
}

.menu-dropdown__close-button {
	margin-left: auto;
	width: 150px;
}

.menu-item__arrow-wrapper {
	color: var(--color-accent);
	transform: translateX(clamp(-40px, -1vw, -4px));
	width: 0;
	opacity: 0;
	transition: all 0.3s ease;
}

.menu-dropdown__list > .menu-item:hover .menu-item__arrow-wrapper {
	transform: translatex(0);
	width: clamp(10px, 4vw, 400px);
	opacity: 1;
	margin-right: var(--space-2);
}

.menu-item__arrow-icon > .arrow-icon {
	transform: translateY(clamp(2px, 0.5vw, 400px));
	min-width: clamp(10px, 3.5vw, 500px);
	min-height: clamp(10px, 3.5vw, 500px);
}

.close-button__x-mark-icon {
	height: 30px;
}

/* ============================= */
/* FOTOGRAFIE PAGE */
/* ============================= */

.page-id-197 .afbeeldingen-section {
	margin-top: var(--space-10);
}

.page-id-197 .section-5 {
	margin-top: 0;
}

.afbeeldingen-section {
	display: flex;
	flex-direction: column;
}

.afbeeldingen-row {
	display: flex;
	width: 100%;
}

.afbeeldingen-section,
.afbeeldingen-row {
	row-gap: var(--space-5);
	column-gap: var(--space-3);
}

.afbeeldingen {
	object-fit: cover;
	display: block;
}

/* Row 1: 27% 27% 46% */
.afbeeldingen-row-1 > .afbeeldingen-1 { width: calc(28% - var(--space-4)); }
.afbeeldingen-row-1 > .afbeeldingen-2 { width: calc(28% - var(--space-4)); }
.afbeeldingen-row-1 > .afbeeldingen-3 { width: calc(49% - var(--space-4)); }
/* Row 2: 46% 27% 27% */
.afbeeldingen-row-2 > .afbeeldingen-4 { width: calc(49% - var(--space-4)); }
.afbeeldingen-row-2 > .afbeeldingen-5 { width: calc(28% - var(--space-4)); }
.afbeeldingen-row-2 > .afbeeldingen-6 { width: calc(28% - var(--space-4)); }
/* Row 3: 27% 27% 46% */
.afbeeldingen-row-3 > .afbeeldingen-7 { width: calc(28% - var(--space-4)); }
.afbeeldingen-row-3 > .afbeeldingen-8 { width: calc(28% - var(--space-4)); }
.afbeeldingen-row-3 > .afbeeldingen-9 { width: calc(49% - var(--space-4)); }
/* Row 4: 50% 50% */
.afbeeldingen-row-4 > .afbeeldingen-10 { width: calc(52% - var(--space-4)); }
.afbeeldingen-row-4 > .afbeeldingen-11 { width: calc(52% - var(--space-4)); }

/* LOGO SLIDER */

.logo-slider-section {
	padding-top: var(--space-6);
	padding-bottom: var(--space-9);
}
.logo-slider-section > h2 {
	margin-bottom: var(--space-2);
}
.logo-slider__item {
	height: clamp(0px, 6vw, 100px);
	text-transform: uppercase;
	color: var(--color-gray);
	font-size: var(--fs-7);
	font-weight: var(--fw-2);
}
.logo-slider__dot {
	font-size: clamp(8px, 1.5vw, 24px);
	color: var(--color-gray);
	user-select: none;
	flex-shrink: 0;
}
.logo-slider__track {
	animation: scroll-left 60s linear infinite;
	width: max-content;
	border-block: clamp(0px, 0.1vw, 10px) solid var(--color-gray);
}
.logo-slider__track--bottom {
	animation: scroll-right 60s linear infinite;
	border-top: none;
}
@keyframes scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes scroll-right {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

/* ============================= */
/* CASES KAART */
/* ============================= */

.cases-kaart__image-container {
	aspect-ratio: 4/5;
	overflow: hidden;
}

.cases-kaart__image {
	object-fit: cover;
	height: 100%;
	width: 100%;
	transition: all 0.3s ease;
}

.cases-kaart:hover .cases-kaart__image {
	transform: scale(1.1);
}

.cases-kaart__post-taxonomies {
	margin-top: var(--space-3);
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: var(--fs-10);
	gap: var(--space-1);
	color: var(--color-gray);
}

.cases-kaart__post-taxonomies div {
	background: var(--color-gray);
	border-radius: 100%;
	min-height: clamp(3px, 0.5vw, 8px);
	min-width: clamp(3px, 0.5vw, 8px);
	aspect-ratio: 1/1;
}

.cases-kaart__post-taxonomies div:not(:first-child) {
	margin-left: 7px;
}

.cases-kaart__post-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	margin-top: var(--space-1);
	transition: all 0.3s ease;
}

.cases-kaart:hover .cases-kaart__post-title {
	gap: 5px;
}

.cases-kaart__arrow-icon {
	margin-top: 2px;
	transition: all 0.3s ease;
	max-width: 0;
	opacity: 0;
}

.cases-kaart:hover .cases-kaart__arrow-icon {
	max-width: 100%;
	opacity: 1;
}

.cases-kaart_post-title-text {
	font-size: var(--fs-8);
	font-weight: var(--fw-3);
	transition: all 0.3s ease;
}

.case-modules > section {
	padding-block: var(--space-5) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ============================= */
/* FOOTER */
/* ============================= */

.site-footer {
	background-color: var(--color-primary);
	color: var(--color-white);
	padding-top: 95px;
	padding-bottom: 100px;
}

/* Footer CTA Layout */
.footer-cta {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/* Footer Headline */
.footer-cta__header {
	color: var(--color-accent);
	font-weight: var(--fw-2);
	font-size: var(--fs-2);
	line-height: 90%;
}

/* Footer Subtext */
.footer-cta__subheader {
	max-width: clamp(300px, 42vw, 700px);
	font-size: var(--fs-8);
	line-height: 1.4;
}

/* Footer Links */
.site-footer a {
	text-decoration: none;
}

.footer-top__decorations {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	gap: var(--space-2);
}

.footer-top__decorations div {
	height: clamp(10px, 3.5vw, 150px);
	width: clamp(10px, 3.5vw, 150px);
	background-color: var(--color-white);
	border-radius: 999px;
	animation: blink 5s infinite;
	transform-origin: center;
}

@keyframes blink {
	/* 2 seconds idle */
	0% { transform: scaleY(1); }
	70% { transform: scaleY(1); }

	/* Blink 1 */
	72% { transform: scaleY(0); }
	80% { transform: scaleY(1); }

	/* Blink 2 */
	82% { transform: scaleY(0); }
	90% { transform: scaleY(1); }

	/* End */
	100% { transform: scaleY(1); }
}

/* Footer Divider */
.site-footer__divider {
	background-color: var(--bg-1);
	margin-top: var(--space-6);
	margin-bottom: var(--space-5);
	border: none;
	height: clamp(1px, 0.02vw, 10px);
}

.footer-logo {
	margin-right: var(--space-8);
}

.footer-logo img {
	height: clamp(50px, 5.5vw, 500px);
}

/* Footer widgets / links */
.footer-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.footer-col ul {
	list-style: none;
}

.footer-col a {
	color: var(--color-white);
	cursor: pointer;
	position: relative;
}

.footer-col li {
	margin-top: clamp(4px, 0.6vw, 40px);	
	font-size: var(--fs-8);
}

/* Underline */
.footer-col a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: clamp(1px, 0.02vw, 10px);
	background-color: currentColor;

	transform: scaleX(0);
	transform-origin: left;   /* grows from left */
	transition: transform 0.3s ease;
}

/* Hover */
.footer-col li:hover a::after {
	transform: scaleX(1);
	transform-origin: right;
}

/* Unhover animation direction */

.footer-col li:hover a::after {
	transform-origin: left; /* shrinks toward right */
}

/* Updates section */

.updates-section {
	padding-inline: var(--space-5);
	margin-top: var(--space-10);
}

.updates-section h2 {
	color: var(--color-accent);
	font-size: var(--fs-6);
	font-weight: var(--fw-2);
	margin-left: clamp(0px, 31.3vw, 1500px);
}

.updates-section .updates-section__items-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-top: var(--space-4);
}

.updates-section .updates-section__item {
	display: flex;
	flex-direction: row;
	gap: var(--space-8);
	position: relative;
	padding-left: clamp(0px, 31.3vw, 1500px);
	margin-bottom: var(--space-5);
}

.updates-section__item-content {
	border-bottom: clamp(1px, 0.1vw, 10px) solid black;
	width: 100%;
	padding-bottom: var(--space-4);
}

.updates-section .updates-section__item h3 {
	font-weight: var(--fw-2);
	font-size: clamp(10px, 2.6vw, 100px);
	line-height: 0.8;
}

.updates-section .updates-section__item p {
	font-size: var(--fs-8);
	line-height: 1.4;
	margin-top: var(--space-3);
	max-width: clamp(0px, 55vw, 1500px);
}

.updates-section .updates-section__item img {
	width: 100%;
	max-width: clamp(0px, 23vw, 1000px);
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.updates-section__item-content a {
	text-decoration: none;
}

/* 3 Grid Section */

.grid-3-section {
    display: flex;
    gap: var(--space-3);
    align-items: stretch;
	padding-inline: var(--space-5);
}

.grid-3-section__item {
    flex: 1;
    display: flex;
}

.grid-3-section__item img,
.grid-3-section__item video,
.grid-3-section__item iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 3 Grid ratio variants */

.grid-3-section__item--33 { flex: 33.333; }
.grid-3-section__item--25 { flex: 25; }
.grid-3-section__item--50 { flex: 50; }

.grid-3-section .container-25-25 {
	width: 50%;
	overflow: hidden;
	gap: var(--space-3);
	display: flex;
	flex-direction: column;
}

.grid-3-section .container-25-25 .grid-3-section__item--25 {
	height: 50%;
}

/* 6 Grid */
.grid-6-section {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	align-items: stretch;
	padding-inline: var(--space-5);
}

.grid-6-section__item {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.grid-6-section__item img,
.grid-6-section__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#video-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 9999;
    transition: opacity 0.4s ease;
}

#video-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.grid-6-section__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.grid-6-section__thumb.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.grid-6-section__media {
    position: relative;
    cursor: pointer;
}

.grid-6-section__caption {
    color: var(--color-primary);
    margin-top: var(--space-2);
	font-size: var(--fs-8);
    line-height: 1.4;
	font-weight: var(--fw-4);
}

/* ============================= */
/* MOBILE RESPONSIVENESS */
/* ============================= */

@media (max-width: 767px) {
	
	/* 	6-grid section */
	
	.grid-6-section {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	
	/* 3-Grid Section */
	
	.grid-3-section {
		display: flex;
		flex-direction: column;
	}
	
	.grid-3-section .container-25-25 {
		width: 100%;
	}

	/* 	Navbar */
	.menu-dropdown__logo img,
	.header__branding img {
		width: 170px;
	}

	.logo--ghost {
		width: 40px;
		opacity: 0;
	}

	.header__menu > .menu-item {
		display: none;
	}

	.menu-dropdown__list {
		padding-right: 0;
		padding-left: 0;
		margin-top: var(--space-3);
	}

	.menu-item__arrow-wrapper {
		display: none;	
	}

	.menu-dropdown__list > .menu-item {
		font-size: clamp(0px, 7vw, 1000px);
		padding-left: var(--space-4);
		padding-block: var(--space-2);
	}

	.menu-dropdown__list > .menu-item:nth-child(2) {
		display: flex;
		flex-direction: column;
		cursor: default;
	}

	.menu-dropdown__list > .menu-item .sub-menu {
		display: flex;
		flex-direction: column;
	}

	.menu-dropdown__list > .menu-item > .sub-menu > .menu-item {
		font-size: var(--fs-3);
	}

	.sub-menu-item__bullet {
		min-width: clamp(2px, 1.5vw, 500px);
		min-height: clamp(2px, 1.5vw, 500px);
		margin-right: var(--space-3);
	}

	.close-button__x-mark-icon {
		height: clamp(5px, 6vw, 500px);
		width: clamp(5px, 6vw, 500px);
	}

	.menu-dropdown__close-button {
		width: clamp(10px, 20vw, 500px);
	}
	
	/* arrow icon */
	
	.arrow-icon {
		width: clamp(5px, 5vw, 1000px);
		height: clamp(5px, 5vw, 1000px);
		aspect-ratio: 1 / 1;
	}

	/* 	Buttons */
	.btn--blue, .btn--white, .header__menu > li > a {
		height: clamp(1px, 8vw, 1000px);
		font-size: clamp(0px, 4vw, 500px);
		gap: clamp(5px, 3vw, 50px);
	}
	.btn--blue .arrow-icon, .btn--white .arrow-icon {
		width: clamp(5px, 5vw, 1000px);
		height: clamp(5px, 5vw, 1000px);
	}

	/* 	Home Hero */
	.hero__video-container {
		height: 50vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.video-container__video {
		height: 100%;
		margin: 0 auto;
		display: block;
		pointer-events: none;
	}

	.hero {
		justify-content: flex-start;
		height: fit-content;
		padding-top: clamp(0px, 24vw, 500px);
	}

	.hero__hero-text {
		margin-top: var(--space-6);
		display: flex;
		flex-direction: column-reverse;
		gap: var(--space-5);
	}

	.hero__hero-text .hero__title {
		text-wrap: wrap;
		font-size: clamp(1px, 9vw, 1000px);
		line-height: 1;

	}

	.hero__hero-text .hero__subtitle {
		font-size: var(--fs-4);
		line-height: 1.4;
		max-width: 100%;
	}

	/* Text Module */
	.paddap-module-tekst {
		font-size: clamp(25px, 6vw, 1000px);
		line-height: 1.2;
		padding: var(--space-6) var(--space-4) var(--space-6) var(--space-7);
	}

	/* 	Uitgelichte Cases */
	.uitgelichte-cases {
		margin-top: var(--space-7);	
	}
	.uitgelichte-cases__header-container {
		padding: 0;	
	}
	.uitgelichte-cases__header-container .header-container__header {
		font-size: clamp(0px, 6vw, 1000px);
	}
	.cases-grid__wrapper {
		display: flex;
		flex-direction: column;
		/* 		border: 1px solid var(--color-red); */
	}
	.cases-kaart__image-container {
		max-height: clamp(40px, 100vw, 2000px);
	}
	.cases-kaart__post-taxonomies > div {
		min-height: clamp(3px, 8vw, 8px);
		min-width: clamp(3px, 8vw, 8px);
	}
	.cases-kaart__post-taxonomies {
		gap: var(--space-2);
		margin-top: var(--space-3);
	}
	.cases-kaart__post-title {
		margin-top: var(--space-2);
	}
	.cases-kaart_post-title-text {
		font-size: clamp(0px, 5vw, 1000px) !important;	
	}
	.cases-kaart__post-subtitle {
		font-size: var(--fs-4);
	}

	/* paddap-module-gerelateerde-cases */
	.uitgelichte-cases > div:first-of-type,
	.paddap-module-gerelateerde-cases > div:first-of-type {
		padding: 0;
		flex-direction: column;
		align-items: start;
		gap: var(--space-3);
		margin-bottom: var(--space-5);
	}
	.paddap-module-gerelateerde-cases h2 {
		font-size: clamp(0px, 6vw, 1000px);
		padding-left: 0;
	}

	/* Diensten Section */
	.diensten-section {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
	.diensten-section h2 {
		font-size: clamp(0px, 6vw, 1000px);
		padding-left: 0;
	}
	.dienst-item {
		max-height: clamp(10px, 14vw, 1000px) !important;
		gap: clamp(0px, 5vw, 1000px);
		padding-left: 0;
		overflow: hidden;
	}
	.dienst-item__index {
		font-size: clamp(0px, 20vw, 1000px);
		font-weight: var(--fw-2);
	}
	.dienst-item__title {
		font-size: clamp(0px, 4vw, 1000px);
	}
	.dienst-item__toggle {
		height: clamp(15px, 5vw, 500px);
		width: clamp(15px, 5vw, 500px);
	}
	.dienst-item__toggle-icon-1 {
		width: clamp(7px, 3vw, 15px) !important;
		height: clamp(1px, 0.5vw, 10px) !important;
	}
	.dienst-item__toggle-icon-2 {
		height: clamp(7px, 3vw, 15px) !important;
		width: clamp(1px, 0.5vw, 10px) !important;
	}
	.dienst-item__description-container {
		flex-direction: column;
		padding-right: 0;
	}
	.dienst-item__description {
		font-size: clamp(0px, 4vw, 1000px);
		max-width: 100%;
	}
	.description-container__left-column {
		max-height: clamp(20px, 60vw, 1000px);
	}
	.dienst-item__button,
	.dienst-item__image-container {
		margin-top: var(--space-4);
	}
	.dienst-item__button > span {
		max-width: clamp(0px, 40vw, 500px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.paddap-module-tekst-secondary .paddap-module-tekst-secondary__large {
		padding-inline: 0;
	}

	/* Logo slider section */
	.logo-slider-section {
		padding-top: var(--space-7);
	}
	.logo-slider-section h2 {
		font-size: clamp(0px, 6vw, 1000px);
		padding-left: var(--space-4);
		margin-bottom: var(--space-4);
	}
	.logo-slider__item img {
		max-width: clamp(100px, 30vw, 300px) !important;
	}
	.logo-slider__item {
		height: clamp(0px, 10vw, 100px);
		font-size: clamp(0px, 5vw, 1000px);
	}
	.logo-slider__dot {
		font-size: clamp(8px, 2vw, 24px);
	}

	.logo-slider__track {
		animation: scroll-left 90s linear infinite;
	}
	.logo-slider__track--bottom {
		animation: scroll-right 90s linear infinite;
	}

	/* tekst secondary */
	.tekst-secondary,
	.section-7:has(#sb_instagram) > p:first-of-type {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
		font-size: clamp(10px, 5vw, 100px);
	}

	/* image + text section */
	.image-text-section {
		flex-direction: column;
		padding-left: var(--space-4);
		padding-right: var(--space-4);
		gap: var(--space-6);
	}
	.image-text-section h2 {
		font-size: clamp(0px, 6vw, 1000px) !important;
	}
	.image-text-section p {
		font-size: clamp(0px, 4vw, 1000px) !important;
	}
	.site-footer {
		padding-top: var(--space-6);
		padding-bottom: var(--space-6);
	}
	.footer-bottom__inner {
		flex-direction: column;
		gap: var(--space-4);
	}
	.footer-bottom,
	.footer-top {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
	.footer-top__decorations {
		gap: clamp(0px, 2.5vw, 500px);
	}
	.footer-top__decorations div {
		height: clamp(10px, 8vw, 150px);
		width: clamp(10px, 8vw, 150px);
	}
	.footer-bottom__inner li {
		margin-top: clamp(4px, 0.8vw, 40px);
		font-size: var(--fs-4);
	}

	/* hero 2 */
	.hero-2__headline {
		font-size: var(--fs-1);
		padding-left: 0;
		word-break: break-word;
		white-space: normal;
	}
	.hero-2__subheadline {
		font-size: var(--fs-3);
		padding-left: var(--space-4);
	}

	/* cases pgae */
	.cases-radio-group {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.cases-radio-group form {
		display: flex;
		gap: var(--space-3);
		justify-content: flex-start;
		padding-block: var(--space-2);
		min-width: max-content;
	}
	.cases-radio-group .radio {
		font-size: var(--fs-4);
		white-space: nowrap;
		padding: var(--space-2) var(--space-4);
	}

	/* partners section */
	.partners-section h2 {
		font-size: clamp(0px, 6vw, 1000px);
	}
	.partners-2-section__partner,
	.partners-section span {
		font-size: var(--fs-4);
	}
	.partner__partner-location {
		min-width: clamp(0px, 45vw, 500px);
	}

	.partner__partner-title svg {
		width: clamp(5px, 3vw, 300px);
		height: 100%;
	}
	.partner__partner-location svg {
		width: clamp(5px, 3vw, 300px);
		height: 100%;
	}

	/* instagram section */
	.section-7:has(#sb_instagram) {
		margin-top: var(--space-4);
	}

	/* Onze Geesten Section */
	.onze-geesten-section {
		display: flex;
		flex-direction: column;
	}
	.onze-geesten-section {
		padding-inline: var(--space-4);
	}
	.onze-geesten-section__geesten-card {
		padding: var(--space-3);
	}

	.onze-geesten-section__geesten-card:hover .geesten-card__info:not(.geesten-card__info--last-item) {
		transform: translatey(clamp(-1000px, -40vw, -0px));
	}
	
	.geesten-card__name {
		font-size: var(--fs-2);	
	}
	.geesten-card__role {
		font-size: var(--fs-4);
	}
	.geesten-card__linkedin {
		width: clamp(5px, 7vw, 100px);
		height: clamp(5px, 7vw, 100px);
		padding: var(--space-2);
		margin-top: var(--space-2);
	}
	.geesten-card__linkedin .arrow-icon {
		transform: scale(1.4);
	}

	/* contact page */
	.page-id-74 .hero-2__headline {
		font-size: clamp(0px, 11vw, 1000px);
	}
	.page-id-74 .image-text-section > div {
		padding-left: var(--space-4);
	}
	.image-text-section .image-text-section__image--left,
	.image-text-section .image-text-section__image--right {
		width: 100%;
		max-width: 100%;
	}

	.contact-section__form {
		flex-direction: column;
		padding-left: var(--space-4);
	}
	.contact-section__form h2 {
		font-size: clamp(0px, 6vw, 1000px);
		margin-bottom: var(--space-4);
	}
	.contact-section__form form {
		margin-top: var(--space-4);
		display: flex; 
		gap: var(--space-4);
		flex-direction: column;
	}
	.contact-section__form input,
	.contact-section__form textarea {
		max-width: 100% !important;
	}
	.contact-section__form label::before,
	.contact-section__form input,
	.contact-section__form textarea {
		font-size: var(--fs-4) !important;
	}
	.contact-section__form label.is-active::before,
	.contact-section__form label.has-value::before {
		top: 0;
		transform: translateY(-100%);
		font-size: var(--fs-5) !important;
		color: var(--color-primary);
	}

	/* accordion section */
	.accordion-section {
		padding-inline: var(--space-4);
	}
	.accordion-section__main-title {
		font-size: clamp(0px, 6vw, 1000px);
	}
	.accordion-section__accordion-items {
		padding-left: 0;
		flex-direction: column;
	}
	.accordion-items__accordion-item {
		gap: var(--space-3);
	}
	.accordion-item__title {
		font-size: var(--fs-4);
	}
	.accordion-section__column {
		gap: var(--space-3);
	}
	.accordion-item__toggle {
		height: clamp(15px, 5vw, 500px);
		width: clamp(15px, 5vw, 500px);
	}
	.accordion-item__toggle-icon-1 {
		width: clamp(7px, 2vw, 15px);
		height: clamp(1px, 0.2vw, 10px);
	}
	.accordion-item__toggle-icon-2 {
		height: clamp(7px, 2vw, 15px);
		width: clamp(1px, 0.2vw, 10px);
		transition: all 0.2s ease;
	}
	.accordion-item__description {
		font-size: var(--fs-4);
	}
	.accordion-item__description-inner {
		padding-bottom: var(--space-3);
	}

	/* Fotografie Page */
	.afbeeldingen-row {
		flex-direction: column;
	}
	.afbeeldingen-row img {
		width: 100% !important;
	}

	/* onze geesten */
	.hover-card__ghost-frame {
		max-width: clamp(20px, 40vw, 1000px);
	}
	.hover-card__description {
		font-size: clamp(0px, 3.5vw, 500px);
	}

	/* 	Jobs Page */

	.openstaande-vacatures-section__content {
		padding-left: 0;
		display: flex;
		flex-direction: column;
	}

	.page-id-158 #section-3 {
		padding-inline: var(--space-4);
	}

	.hero-2__subheadline {
		padding-right: var(--space-4);
	}

	.openstaande-vacatures-section .vacatures-kaart__title {
		font-size: clamp(0px, 4.5vw, 1000px) !important;
	}

	.openstaande-vacatures-section .vacatures-kaart > p {
		font-size: clamp(0px, 4vw, 1000px) !important;
	}

	.openstaande-vacatures-section__title  {
		font-size: clamp(0px, 6vw, 1000px) !important;
	}

	.page-id-158 .paddap-module-tekst,
	.page-id-158 .afbeeldingen-section {
		padding-inline: var(--space-4);
	}

	/* 	Our team page */

	.geesten-card__name {
		font-size: var(--fs-)
	}

	.case__case-content {
		flex-direction: column-reverse;
	}
	.case-hero__title {
		font-size: clamp(10px, 7vw, 100px);
		padding-left: var(--space-4);
	}

	.case-hero__subtitle {
		font-size: clamp(10px, 6vw, 100px);
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	.case-content__left-column {
		margin-right: 0;
		margin-top: var(--space-5);
	}

	.case-content__right-column img {
		width: 100%;	
	}

	.case__case-content h3,
	.case__case-content div {
		font-size: var(--fs-4) !important;
	}

	.case-template-default .paddap-module-tekst-secondary,
	.case-template-default .section-2,
	.case-video {
		padding-inline: var(--space-4);
	}

	.case-template-default .paddap-module-tekst-secondary .paddap-module-tekst-secondary__large {
		font-size: clamp(10px, 6vw, 100px);
	}

	.afbeelding.pl-6.pr-5 {
		padding-inline: var(--space-4);
	}

	/* 	UPDATES SECTION */

	.updates-section h2 {
		margin: 0;
		font-size: clamp(0px, 6vw, 1000px);
	}

	.updates-section .updates-section__items-list {
		gap: var(--space-6);
	}

	.updates-section__item-content {
		padding-bottom: var(--space-6);
	}

	.updates-section .updates-section__item h3 {
		font-size: clamp(10px, 5vw, 100px);
	}

	.updates-section .updates-section__item p {
		font-size: clamp(0px, 4vw, 1000px);
		margin-top: var(--space-4);
		max-width: 100%;
	}

	.updates-section .updates-section__item {
		padding-left: 0 !important;
		flex-direction: column;
		gap: var(--space-4);
	}

	.updates-section .updates-section__item img {
		position: static;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	/* 	Instagram */

	.page-id-80 .section-9 p:first-child {
		padding: 0;
		font-size: clamp(10px, 5vw, 100px);
	}
	
	.paddap-module-tekst-secondary .paddap-module-tekst-secondary__body {
		padding-inline: 0;
	}
	
	/*  Double image */
	
	.double-image {
		height: fit-content;
		flex-direction: column;
		gap: var(--space-5);
	}
	
	.double-image--50-50 {
		width: 100%;
	}

}

.dienst-item.expanded {
	max-height: 1000px !important;
}

.home .site-footer {
	margin-top: 0;
}


.page-id-80 .paddap-module-tekst-secondary {
	padding-bottom: 0;
}

/* Blog detail */
.blog-detail-content-section__image {
    margin-bottom: var(--space-7);
}

.blog-detail-content-section__image img {
	aspect-ratio: 16 / 10;
    width: 100%;
}

.blog-detail-content-section__inner h1, .blog-detail-content-section__inner h2 {
	font-weight: var(--fw-2);
    font-size: clamp(10px, 2.6vw, 100px);
    line-height: 0.8;
	margin-bottom: var(--space-4);
}

.blog-detail-content-section__inner p {
	font-size: var(--fs-8);
    line-height: 1.4;	
	margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
	.blog-detail-content-section__inner h1, .blog-detail-content-section__inner h2 {
		font-size: clamp(10px, 5vw, 100px);
	}
	
	.blog-detail-content-section__inner p {
		font-size: clamp(0px, 4vw, 1000px);
	}
	
}
.page-id-1748 section#section-5 {
    padding-top: var(--space-10);
}
.grecaptcha-badge {
    display: none !important;
}