/*
Theme Name:   Divi Child
Theme URI:    http://example.com/divi-child
Description:  A child theme for Divi
Author:       Sarkis Moeradjan
Author URI:   http://twilinq.nl.com
Template:     Divi
Version:      1.0.0
*/


/* Het eerste item in de sub-menu krijgt een lijn bovenaan */
.menu-item-has-children:hover > .sub-menu li:first-child::before {
	content: '';
	position: absolute;
	top: 0; /* Plaats de lijn aan de bovenkant van het eerste item */
	left: 0;
	width: 100%; /* Laat de lijn over de gehele breedte van het sub-menu-item verschijnen */
	height: 2px; /* Dikte van de lijn */
	background: var(--menu-item-color, #000); /* Kleur van de lijn */
	transform: scaleX(0); /* Begin de lijn met breedte 0 */
	transform-origin: 100% 100%; /* Begin de animatie van rechts */
	transition: transform 0.3s ease; /* Vloeiende overgang voor de lijn */
}

/* Lijn verschijnt boven het eerste item in het sub-menu */
.menu-item-has-children:hover > .sub-menu li:first-child::before {
	transform: scaleX(1); /* Maak de lijn volledig zichtbaar */
	transform-origin: 0% 0%; /* Eindig de animatie aan de linkerkant */
}


.et_pb_row {
	z-index: 1;
}
/* ------------------------------------------------ Menu ------------------------------------------------ */

body.no-scroll {
	overflow: hidden; 
	height: 100vh;
}

.header-menu-topnav-container {
	z-index: 99999;
}

.header-menu-container {
	z-index: 99999;
	/* 	margin-top: -15px; */
}

.header-menu-container {
	background: rgba(255, 255, 255, .72);
	transition: background-color .3s ease;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

.sticky .header-menu {
	background-color: transparent;
}
.header-menu {
	z-index: 99999 !important;
}

.header-menu .header-menu-column1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-menu .et-menu-nav .et-menu {
	width: 100%;
	margin: 0 64px;
}


.header-menu .et-menu-nav li {
	padding-left: 20px !important;
	padding-right: 20px !important;
	font-weight: 500;
}

.header-menu .et-menu-nav li a:hover {
	color: #000 !important;
}

.header-menu .et-menu a, .header-menu.et-menu a:hover {
	transition: none !important;
	opacity: 1 !important;
}

.header-menu .et-menu li:not(.menu-item-has-children) a:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%; /* De onderstreping moet de breedte van de link hebben */
	height: 1.5px; /* Dikte van de onderstreping */
	background: var(--menu-item-color, #000); /* Gebruik de variabele of een standaard kleur */
	transform: scaleX(0); /* Begin de onderstreping met een breedte van 0 */
	transform-origin: 100% 100%; /* Start de animatie van rechts */
	transition: transform 0.35s ease; /* Zorg voor een vloeiende overgang */
}


.header-menu .et-menu li:not(.menu-item-has-children) a:hover:after {
	transform: scaleX(1); /* Maak de onderstreping volledig zichtbaar bij hover */
	transform-origin: 0% 0%; /* Eindig de animatie aan de linkerkant */
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children > a {
	padding-right: 0 !important;
	display: flex;
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu {
	width: 100%;
	position: fixed;
	margin-top: -40px;
	padding-top: 40px;
	background-color: transparent !important;
	border: none !important;
	box-shadow: 0 7px 7px 0px rgba(0, 0, 0, 0.2);
}
.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu li {
	background-color: #fff !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
	display: flex;
	justify-content: center;
}

.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu > li:first-child { 
	padding-top: 10px;
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu > li:last-child { 
	padding-bottom: 10px;
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu li:hover a {
	color: #000 !important;
	background-color: transparent !important;
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu li a {
	text-align: center;
	font-weight: 600;
	width: fit-content;
}



.menu-button-container {
	display: flex;
	justify-content: flex-end;
}

.menu-button {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: flex-start;
	width: 30px;
	height: 30px;
	cursor: pointer;
	overflow: visible;
}

.menu-button span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: black;
	border-radius: 3px;
	transition: transform 0.3s ease, opacity 0.3s ease;
	position: relative;
}

.menu-button span:nth-child(1) {
	width: 100%; 
}
.menu-button span:nth-child(2) {
	width: 80%;
}
.menu-button span:nth-child(3) {
	width: 60%;
}

.menu-button.open span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
	width: 100%;
}
.menu-button.open span:nth-child(2) {
	opacity: 0;
}
.menu-button.open span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
	width: 100%;
}

.fullscreen-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	z-index: 9999;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.fullscreen-menu.active {
	opacity: 1;
	visibility: visible;
}

.fullscreen-menu .et_mobile_nav_menu ul {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-20px);
	transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.has_et_pb_sticky .fullscreen-menu.active .et_mobile_nav_menu ul {
	max-height: calc(100vh - 75px); 
}

.fullscreen-menu.active .et_mobile_nav_menu ul {
	max-height: calc(100vh - 95px); 
	opacity: 1;
	transform: translateY(0);
	display: block !important;
	opacity: 1;
	visibility: visible;
	height: auto;
	overflow: scroll;
	display: flex !important;
	flex-direction: column;
	padding: 5rem .8rem !important
}

.fullscreen-menu.active .et_mobile_nav_menu .sub-menu {
	padding: 0.5rem !important;
}

.et_mobile_menu li a {
	font-size: 1.5rem !important;
	font-weight: 600 !important;
}

.has_et_pb_sticky .fullscreen-menu.active .et_mobile_menu {
	top: 75px !important;
}

.fullscreen-menu.active .et_mobile_menu {
	position: fixed !important;
	top: 95px !important;
	border: none;
	padding-top: 0px;
	box-shadow: none;
}

.fullscreen-menu .et_mobile_nav_menu ul {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-20px);
	transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease; 
	padding: 0px;
}

.et_mobile_nav_menu .mobile_menu_bar {
	display: none;
}

.et_mobile_nav_menu ul li {
	margin: 10px 0; 
	list-style: none;
}

.et_mobile_nav_menu ul li a {
	text-decoration: none;
	padding: 10px;
	display: block;
	border: none !important;
}

.et_mobile_menu .menu-item-has-children > a {
	background-color: #fff !important;
}

.menu-item-has-children .sub-menu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	background-color: #fff;
	z-index: 1000;
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-item-has-children.open > .sub-menu {
	display: block;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

.sub-menu.visible {
	position: relative;
}

.menu-item.menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.menu-item.menu-item-has-children > a {
	flex: 1 1 50%; 
	text-align: center;
}


.menu-item.menu-item-has-children > a:first-child {
	text-align: left; 
}

.menu-item.menu-item-has-children > a.mobile-toggle {
	text-align: right; 
}

.menu-item.menu-item-has-children > ul.sub-menu {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	list-style: none;
	box-shadow: none;
}


.menu-item.menu-item-has-children > ul.sub-menu > li {
	width: 100%;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	opacity: 1;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: #000;
}

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}

.notificationBarHeader a {
	color: #A8A5A1;
	font-size: .8rem;
}
.notificationBarHeader a:first-child {
	margin-right: 2rem;
}


@media only screen and (min-width: 981px) {
	.header-menu-container.sticky {
		position: fixed; /* Maak sticky wanneer de top wordt bereikt */
		top: 0;
		z-index: 99999 !important;
		border-radius: 0;
		width: 100%;
		max-width: 100%;
		transition: all 0.3s ease; /* Vloeiende overgang */
	}
	.menu-button-container {
		display: none;
	}
	.et-menu .menu-item-has-children>a:first-child:after {
		position: relative;
	}
}


@media only screen and (max-width: 980px) {
	.menu-desktop-only, .menu-button-desktop-only {
		display: none !important;
	}
}


/* ------------------------------------------------ Menu END ------------------------------------------------ */

/* ------------------------------------------------ Buttons ------------------------------------------------ */

/* Basisstijl voor de knop */
.rounded-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: max-content;
	padding: 15px 32px;
	background-color: transparent;
	border-radius: 50px;
	color: #a7a7a7;
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.44px;
	border: 1px solid rgba(228, 224, 219, 0.6);
	background: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	position: relative;
	overflow: hidden;
	transition: color 0.4s ease, border-color 0.4s ease;
	text-transform: uppercase;
	z-index: 1;
}


/* Pseudo-element voor de hover achtergrond */
.rounded-btn::before {
	content: '';
	position: absolute;
	bottom: -100%; /* Start buiten de knop */
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8); /* Hover achtergrondkleur */
	z-index: 0;
	transition: transform 0.5s ease; /* Vloeiende overgang */
	transform: translateY(100%); /* Startpositie */
}

/* Tekst en inhoud boven de achtergrond */
.rounded-btn span {
	position: relative;
	z-index: 1;
}

/* Hover-effect: Achtergrond beweegt naar boven */
.rounded-btn:hover::before {
	transform: translateY(0); /* Vul de knop */
}

/* Hover-effect: Verander tekstkleur */
.rounded-btn:hover {
	color: #fff; /* Tekstkleur bij hover */
}

/* Reset de achtergrond bij het verlaten van hover */
.rounded-btn:hover::before {
	transform: translateY(-100%); /* Verwijder van boven naar beneden */
}

/* Specifieke kleuren buttons */

/* Zwarte knop */
.rounded-btn.black-btn {
	background-color: #000;
	border-color: rgba(228,224,219,.6);
	color: #fff;
}

.rounded-btn.black-btn::before {
	background-color: #fff;
}

.rounded-btn.black-btn:hover {
	color: #000;
}

/* Witte knop */
.rounded-btn.white-btn {
	background-color: #fff;
	border-color: rgba(228,224,219,.6);
	color: #000;
}

.rounded-btn.white-btn::before {
	background-color: #000;
}

.rounded-btn.white-btn:hover {
	color: #fff;
}

/* Blue knop */
.rounded-btn.blue-btn {
	background-color: #007BFF;
	/* 	border-color: #028CFF; */
	color: #fff;
	font-weight: 800;
	font-size: .8rem;
}

.rounded-btn.blue-btn::before {
	background-color: #FF5722;
}

.rounded-btn.blue-btn:hover {
	color: #fff;
	/* 	border-color: #F35529; */

}


/* Twilinq knop */
/* Basis knop (zoals eerder) */
.twilinq-btn.magnetic-button {
	display: inline-block;
	padding: 12px 28px;
	background-color: #2F3BE4;
	color: #fff;
	font-weight: 600;
	border-radius: 50px;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(47, 59, 228, 0.35);
	backface-visibility: hidden;
	transform: translate3d(0,0,0);
	will-change: transform;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden; /* nodig voor shine */
}

.twilinq-btn.magnetic-button:hover {
	background-color: #FF6B35;
	box-shadow: 0 12px 30px rgba(255, 107, 53, 0.45);
}

/* Shine effect (glans die schuift bij hover) */
.twilinq-btn.magnetic-button::before {
	content: "";
	position: absolute;
	top: 0; left: -75%;
	width: 50%; height: 100%;
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.6) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-20deg);
}

/* Glow wanneer de muis binnen de radius komt */
.twilinq-btn.magnetic-button.is-attract {
	box-shadow: 0 12px 36px rgba(255,107,53,0.55);
}

/* Shine animatie bij hover */
.twilinq-btn.magnetic-button:hover::before {
	animation: shine 0.75s forwards;
}

@keyframes shine {
	0%   { left: -75%; }
	100% { left: 125%; }
}

/* Subtiele diagonale “shine”-streep die in-fadet bij attract */
.twilinq-btn.magnetic-button::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -60%;
	width: 200%;
	height: 200%;
	background: linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 60%);
	transform: translateX(-40%) rotate(8deg);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	filter: blur(1px);
}

.twilinq-btn.magnetic-button.is-attract::after {
	opacity: 1; /* fade-in glow/shine */
}

/* Twilinq-outline kno */

/* Outline knop */
.twilinq-btn.magnetic-button.outline {
	display: inline-block;
	padding: 10px 28px;
	background-color: transparent;
	color: #2F3BE4;
	font-weight: 600;
	border: 2px solid #2F3BE4;
	border-radius: 50px;
	text-decoration: none;
	box-shadow: none;
	backface-visibility: hidden;
	transform: translate3d(0,0,0);
	will-change: transform;
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
	margin-right: 1.3rem;
}

/* Hover: vult zich met kleur */
.twilinq-btn.magnetic-button.outline:hover {
	background-color: #2F3BE4;
	color: #fff;
	box-shadow: 0 8px 24px rgba(47, 59, 228, 0.35);
}

/* Shine effect */
.twilinq-btn.magnetic-button.outline::before {
	content: "";
	position: absolute;
	top: 0; left: -75%;
	width: 50%; height: 100%;
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.6) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-20deg);
}

/* Shine animatie bij hover */
.twilinq-btn.magnetic-button.outline:hover::before {
	animation: shine 0.75s forwards;
}


/* ------------------------------------------------ Buttons END ------------------------------------------------ */


/* ------------------------------------------------ Home page ------------------------------------------------ */
.home-main-image img {
	object-fit: cover;
}
/* ------------------------------------------------ Home page END ------------------------------------------------ */

/* Woocommerce produt page */

table.variations {
	display: block
}

table.variations th label {
	font-size: 14px !important;
}

table.variations tr {
	display: flex;
	flex-direction: column;
}

/* ------------------------------------------------ Home page Strong Points ------------------------------------------------ */

:root{
	--si-bg:#FFFFFF; --si-text:#000000; --si-muted:#6E6E6E; --si-border:#EAEAEA;
	--si-blue:#007BFF; --si-orange:#FF6B35;
}

/* Container */
.studio-icon-strong-points{ background:var(--si-bg); color:var(--si-text); padding:clamp(40px,6vw,80px) 0; }
.studio-icon-strong-points .si-container{ max-width:1200px; margin:0 auto; padding:0 20px; }


/* FLEX GRID */
.studio-icon-strong-points .si-grid{
	display:flex; flex-wrap:wrap; gap:28px;
	margin:0; padding:0; align-items:stretch;
}

/* Columns: mobile 1, tablet 2, desktop 4 */
.studio-icon-strong-points .si-item{
	list-style:none; flex:1 1 100%;
	border:1px solid var(--si-border); border-radius:14px; background:#fff;
	padding:22px; transition:box-shadow .25s ease, transform .25s ease;
	display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
}
@media (min-width:700px){
	.studio-icon-strong-points .si-item{ flex:1 1 calc(50% - 14px); }
}
@media (min-width:1024px){
	.studio-icon-strong-points .si-item{ flex:1 1 calc(25% - 21px); }
}

.studio-icon-strong-points .si-item:hover{
	box-shadow:0 10px 28px rgba(0,0,0,.07);
	transform:translateY(-2px);
}

/* Content */
.studio-icon-strong-points .si-icon{
	width:48px; height:48px; display:block; margin-bottom:14px;
	transition: transform .3s ease, filter .3s ease, stroke .3s ease, fill .3s ease;
	will-change: transform;
}
.studio-icon-strong-points .si-item-title{
	font:600 18px/1.3 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	margin:0 0 8px; letter-spacing:-.01em; position:relative;
}
.studio-icon-strong-points .si-item-title::after{
	content:""; display:block; width:28px; height:3px; background:var(--si-blue);
	border-radius:2px; margin-top:10px; opacity:.9;
}
.studio-icon-strong-points .si-item-text{
	font:400 15px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	color:var(--si-muted); margin:0;
}

/* Optioneel: center variant */
.studio-icon-strong-points .si-item.si-center{ justify-content:center; align-items:center; text-align:center; }
.studio-icon-strong-points .si-item.si-center .si-item-title::after{ margin-left:auto; margin-right:auto; }

/* Dark variant (optioneel) */
.studio-icon-strong-points.is-dark{ background:#000; color:#fff; }
.studio-icon-strong-points.is-dark .si-item{ background:#0E0E0E; border-color:#1A1A1A; }
.studio-icon-strong-points.is-dark .si-item-text{ color:#C9C9C9; }

/* ========================= */
/* Nieuw: icoon hover/focus  */
/* ========================= */

/* Icoon iets inzoomen bij hover/focus-within */
.studio-icon-strong-points .si-item:hover .si-icon,
.studio-icon-strong-points .si-item:focus-within .si-icon{
	transform: scale(1.08);
}

/* Accentkleuren iets donkerder bij hover/focus (werkt met inline SVG die #kleur gebruikt) */
.studio-icon-strong-points .si-item:hover .si-icon [stroke="#007BFF"],
.studio-icon-strong-points .si-item:focus-within .si-icon [stroke="#007BFF"]{
	stroke:#0056B3;
}
.studio-icon-strong-points .si-item:hover .si-icon [stroke="#FF4B2B"],
.studio-icon-strong-points .si-item:focus-within .si-icon [stroke="#FF4B2B"]{
	stroke:#d93b20;
}
.studio-icon-strong-points .si-item:hover .si-icon [stroke="#28A745"],
.studio-icon-strong-points .si-item:focus-within .si-icon [stroke="#28A745"]{
	stroke:#1d7a33;
}

/* Toegankelijkheid: duidelijke focusring voor keyboardgebruikers */
.studio-icon-strong-points .si-item:focus-within{
	outline: 2px solid rgba(0,123,255,.35);
	outline-offset: 3px;
	border-radius: 16px;
}

/* Reduced motion respecteren */
@media (prefers-reduced-motion: reduce){
	.studio-icon-strong-points .si-item,
	.studio-icon-strong-points .si-icon{
		transition: none !important;
	}
	.studio-icon-strong-points .si-item:hover{ transform:none; }
}


/* ------------------------------------------------ Home page Strong Points END ------------------------------------------------ */

/* ------------------------------------------------ Home page Services ------------------------------------------------ /*

/* =========================================================
Studio Icon – Services (Split Section, 2x4 desktop grid)
========================================================= */
.studio-icon-services.siwf{
	/* design tokens / fallbacks */
	--si-accent:  var(--siwf-accent, #FF6B35);
	--si-primary: var(--siwf-primary, #007BFF);
	--si-dark:    var(--siwf-dark, #111827);
	--si-radius:  var(--siwf-radius, 1.25rem);
	--si-shadow:  var(--siwf-shadow, 0 10px 30px rgba(0,0,0,.10));
	--si-bg:      var(--siwf-bg, #ffffff);
}
/* Sectie: moderne soft background + subtiel grid */
.studio-icon-services{
	position: relative;
	padding: clamp(44px, 6vw, 96px) 0;
	color: #0f172a;
	overflow: hidden;
	isolation: isolate;

	/* zachte verticale gradient als basis */
	background:
		linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
}

/* Layer 1: subtiel dot-grid (heel licht) */
.studio-icon-services::before{
	content:"";
	position:absolute; inset:0;
	z-index:0; pointer-events:none;

	/* klein raster met zachte tint */
	background-image:
		radial-gradient(#e3ebff 1px, transparent 1.6px);
	background-size: 22px 22px;
	background-position: 0 0;
	opacity:.35;
}

/* Layer 2: color blobs (primary + accent) + lichte vignette */
.studio-icon-services::after{
	content:"";
	position:absolute; inset:-10% -5%;
	z-index:0; pointer-events:none;

	background:
		/* koele blob linksboven (primary) */
		radial-gradient(900px 700px at -10% 10%, rgba(0,123,255,.12) 0%, rgba(0,123,255,0) 60%),
		/* warme blob rechtsonder (accent) */
		radial-gradient(800px 600px at 110% 85%, rgba(255,107,53,.14) 0%, rgba(255,107,53,0) 60%),
		/* zachte vignette voor diepte */
		radial-gradient(1200px 900px at 50% 120%, rgba(15,23,42,.06) 0%, rgba(15,23,42,0) 60%);
	mix-blend-mode: normal; /* houdt kleuren fris */
}

/* Reduced motion: behoud look, geen animaties nodig */
@media (prefers-reduced-motion: reduce){
	.studio-icon-services::before,
	.studio-icon-services::after{ transition: none !important; }
}


/* Inhoud wrapper boven decor */
.studio-icon-services .si-wrap{
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* ===== Grid: EXACT 2 rijen x 4 kolommen op desktop ===== */
.studio-icon-services .si-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));  /* 4 naast elkaar */
	gap: clamp(14px, 2vw, 24px);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: stretch; /* zorgt dat grid-items (cards) de rijhoogte vullen */
}

/* Breakpoints: 3 / 2 / 1 kolom */
@media (max-width: 1100px){
	.studio-icon-services .si-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 820px){
	.studio-icon-services .si-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
	.studio-icon-services .si-grid{ grid-template-columns: 1fr; }
}

/* Card – clean, licht, subtiele bovenrand (“ribbon”) */
/* → Flex layout + height:100% zodat alle kaarten per rij even hoog worden */
.studio-icon-services .si-card{
	position: relative;
	cursor: pointer;
	outline: none;
	overflow: hidden;
	background: var(--si-bg);
	border: 1px solid rgba(15,23,42,.08);
	border-radius: 1.25rem;
	padding: 1.15rem 1.1rem 1rem;
	box-shadow: var(--si-shadow);

	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
	will-change: transform, box-shadow;

	/* ★ gelijk-hoog per rij */
	height: 100%;
	display: flex;
	flex-direction: column;
}
.studio-icon-services .si-card::before{
	content:"";
	position:absolute; left:0; right:0; top:0; height:4px;
	background: linear-gradient(90deg, var(--si-primary), var(--si-accent));
	opacity:.6;
}
.studio-icon-services .si-card::after{
	content:"";
	position:absolute; inset:-120% -60% auto -60%; height:220%;
	background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 40%, rgba(255,255,255,0) 70%);
	transform: rotate(12deg) translate3d(-45%,0,0);
	opacity:0; pointer-events:none;
	transition: transform .6s ease, opacity .6s ease;
}

@media (hover:hover){
	.studio-icon-services .si-card:hover{
		transform: translateY(-4px);
		background: #ffffff;
		border-color: rgba(15,23,42,.14);
		box-shadow: 0 20px 44px rgba(15, 23, 42, .12);
	}
	.studio-icon-services .si-card:hover::after{
		transform: rotate(12deg) translate3d(12%,0,0);
		opacity:.85;
	}
}
.studio-icon-services .si-card:focus-visible{
	box-shadow: 0 0 0 3px rgba(0,123,255,.25), 0 10px 30px rgba(15, 23, 42, .08);
	border-color: rgba(0,123,255,.35);
}

/* Inhoud lay-out */
.si-card-content{
	display:grid;
	grid-template-columns: auto 1fr;
	gap:.75rem;
	align-items:start;

	/* ★ vult de resthoogte, zodat CTA’s kunnen plakken onderin */
	flex: 1;
}

/* Icon – lichte tile met subtiele brandring */
.si-icon{
	width:28px; height:28px;
	display:inline-grid; place-items:center;
	border-radius:10px; background:#fff;
	position:relative;
}
.si-icon::after{
	content:""; position:absolute; inset:2px; border-radius:8px;
	background: linear-gradient(135deg, var(--si-primary), var(--si-accent));
	opacity:.18;
}
.si-icon svg{ width:18px; height:18px; stroke:#0f172a; stroke-width:2px; }

/* Tekst */
.si-card-title{
	margin:0;
	font-size:clamp(1.02rem,1.4vw,1.15rem);
	font-weight:800; letter-spacing:-.01em;
	color:#0f172a;
}
.si-card-pitch{
	grid-column:1 / -1;
	margin:.35rem 0 0;
	color:#334155;
	font-size:.98rem; line-height:1.45;
}

/* Ghost CTA – licht */
/* ★ plak onderin de kaart wanneer aanwezig */
.si-cta-ghost{
	display:inline-flex; align-items:center; gap:.4rem;
	margin-top:auto;
	padding:.5rem .8rem;
	font-weight:750; text-decoration:none;
	color:#0f172a; border:1.5px solid rgba(15,23,42,.14);
	border-radius:999px;
	transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
@media (hover:hover){
	.si-cta-ghost:hover{
		border-color: rgba(15,23,42,.28);
		background: rgba(15,23,42,.06);
		transform: translateY(-1px);
	}
}

/* Footer CTA */
.studio-icon-services .si-foot{
	text-align:center;
	margin-top: clamp(24px, 5vw, 48px);
}

/* Footer CTA knop – Studio Icon oranje met glow */
.studio-icon-services .rounded-btn::before {
	background: none;
}

.studio-icon-services .rounded-btn.orange-btn{
	background: linear-gradient(90deg, #FF6B35, #FF6B35); /* Studio Icon oranje */
	color:#fff;
	text-decoration:none;
	font-weight:800;
	padding:.95rem 1.4rem;
	border-radius:999px;
	display:inline-flex;
	align-items:center;
	gap:.55rem;

	box-shadow: 0 0 18px rgba(255,107,53,.55); /* oranje glow */
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

@media (hover:hover){
	.studio-icon-services .rounded-btn.orange-btn:hover{
		transform: translateY(-2px);
		/* iets lichtere oranje gradient bij hover */
		background: linear-gradient(90deg, #FF814F, #FF6B35); 
		box-shadow: 0 0 28px rgba(255,107,53,.75); /* sterkere glow bij hover */
	}
}



.studio-icon-services .si-foot-note{
	margin:.6rem 0 0; color:#475569; font-size:.98rem;
}

/* Reveal (stagger) – werkt met je bestaande JS */
.studio-icon-services .si-card{
	opacity:0; transform:translateY(14px);
}
.studio-icon-services .si-card.is-inview{
	opacity:1; transform:translateY(0);
	transition: opacity .5s ease, transform .5s ease;
}
.studio-icon-services .si-card.is-inview:nth-child(1){ transition-delay:.02s; }
.studio-icon-services .si-card.is-inview:nth-child(2){ transition-delay:.06s; }
.studio-icon-services .si-card.is-inview:nth-child(3){ transition-delay:.10s; }
.studio-icon-services .si-card.is-inview:nth-child(4){ transition-delay:.14s; }
.studio-icon-services .si-card.is-inview:nth-child(5){ transition-delay:.18s; }
.studio-icon-services .si-card.is-inview:nth-child(6){ transition-delay:.22s; }
.studio-icon-services .si-card.is-inview:nth-child(7){ transition-delay:.26s; }
.studio-icon-services .si-card.is-inview:nth-child(8){ transition-delay:.30s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
	.studio-icon-services .si-card{ opacity:1 !important; transform:none !important; }
	.studio-icon-services .si-card.is-inview{ transition:none !important; }
}


/* ------------------------------------------------ Home page Services END ------------------------------------------------ */

/* ------------------------------------------------ Home page Werkwijze  ------------------------------------------------ */
/* Studio Icon kleuren & layout-variabelen */
#si-workflow.siwf {
	--siwf-primary: #007BFF;                 /* Studio Icon primaire kleur (blauw) */
	--siwf-accent: #FF6B35;                  /* Studio Icon secundaire accentkleur (oranje) */
	--siwf-dark: #111827;                    /* donkerblauw-zwart voor tekst en contrast */
	--siwf-muted: rgba(0, 0, 0, 0.55);       /* gedempte tinten voor subtiele tekst */
	--siwf-radius: 1.25rem;                  /* standaard border-radius */
	--siwf-shadow: 0 10px 30px rgba(0,0,0,0.15); /* zachte schaduw */
	--siwf-bg: #ffffff;                      /* witte achtergrond voor vlakken */
}

#si-workflow { color:#111; }

#si-workflow .siwf-title{
	font-size:clamp(1.4rem,2.5vw,2rem);
	line-height:1.2;
	margin:0 0 1rem;
	font-weight:800;
	letter-spacing:-0.02em;
	color:var(--siwf-accent);
}

/* Grid */
#si-workflow .siwf-steps{
	display:grid;
	grid-template-columns:repeat(6, minmax(0,1fr));
	gap:0.75rem;
	margin:0;
	padding:0;
	list-style:none;
	align-items:stretch; /* zorgt dat cards in dezelfde rij gelijk worden */
}
@media (max-width:1200px){
	#si-workflow .siwf-steps{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:700px){
	#si-workflow .siwf-steps{ grid-template-columns:1fr; }
}

/* Steps (li) laten meerekken */
#si-workflow .siwf-step{
	height:100%;
}

/* Cards */
#si-workflow .siwf-card{
	width:100%;
	height:100%;                 /* neemt automatisch de max hoogte van de rij aan */
	text-align:left;
	background:var(--siwf-bg);
	border:1px solid rgba(0,0,0,0.06);
	border-radius:var(--siwf-radius);
	padding:1rem 1rem 1.1rem;
	cursor:pointer;
	position:relative;
	box-shadow:var(--siwf-shadow);
	transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
#si-workflow .siwf-card:focus{
	outline:none;
	box-shadow:0 0 0 3px rgba(255,0,102,.35), var(--siwf-shadow);
}
#si-workflow .siwf-step.is-active .siwf-card{
	transform:translateY(-2px);
	border-color:var(--siwf-accent);
}

/* Hover alleen op devices die hover ondersteunen (geen mobiel) */
@media (hover: hover) {
	#si-workflow .siwf-card:hover{
		transform:translateY(-3px);
		box-shadow:0 16px 40px rgba(0,0,0,0.18);
	}
}

#si-workflow .siwf-step-num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:2rem;
	height:2rem;
	border-radius:999px;
	background:var(--siwf-dark);
	color:#fff;
	font-weight:800;
	font-size:.95rem;
	margin-right:.5rem;
	box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);
}
#si-workflow .siwf-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:1.75rem;
	height:1.75rem;
	margin-right:.5rem;
	color:var(--siwf-accent);
}
#si-workflow .siwf-heading{
	display:block;
	font-weight:800;
	letter-spacing:-0.01em;
	margin:.35rem 0 .25rem;
	font-size:1rem;
	color:var(--siwf-dark);
}
#si-workflow .siwf-text{
	display:block;
	color:#374151;
	font-size:.95rem;
	line-height:1.4;
}

/* Globale progress (desktop/tablet) */
#si-workflow .siwf-progress{
	position:relative;
	height:6px;
	background:linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.08));
	border-radius:999px;
	margin:1.25rem 0 0;
	overflow:hidden;
}
#si-workflow .siwf-progress-bar{
	position:absolute;
	inset:0 auto 0 0;
	width:0%;
	background:linear-gradient(90deg, var(--siwf-accent), var(--siwf-primary));
	border-radius:999px;
	transition:width .25s ease;
}

/* Inline progress naast het nummer (alleen mobiel) */
#si-workflow .siwf-inline-progress{ display:none; }
#si-workflow .siwf-inline-progress i{
	display:block;
	height:6px;
	width:0;
	background:linear-gradient(90deg, var(--siwf-accent), var(--siwf-primary));
	border-radius:999px;
	transition:width .25s ease;
}

@media (max-width:700px){
	/* Verberg globale balk op mobiel */
	#si-workflow .siwf-progress{ display:none; }

	/* Toon kleine voortgangsbalk naast het nummer */
	#si-workflow .siwf-card{
		display:grid;
		grid-template-columns:auto 1fr;
		grid-auto-rows:auto;
		align-items:center;
		column-gap:.5rem;
		height:auto; /* op mobiel cards gewoon auto hoogte */
	}
	#si-workflow .siwf-step-num{ grid-column:1; }
	#si-workflow .siwf-inline-progress{
		grid-column:2;
		display:block;
		align-self:center;
	}

	/* Icon en tekst onder de header in 2e rij */
	#si-workflow .siwf-icon{ grid-column:1; grid-row:2; }
	#si-workflow .siwf-heading{ grid-column:2; grid-row:2; }
	#si-workflow .siwf-text{
		grid-column:1 / span 2;
		grid-row:3;
		margin-top:.25rem;
	}
}

/* ------------------------------------------------ Home page Werkwijze END ------------------------------------------------ */

/* ------------------------------------------------ Home page Cases ------------------------------------------------ */

/* ================================
JPMSTORE
================================ */

/* Studio Icon variabelen voor deze sectie */
.si-case.siwf{
	--siwf-primary:#007BFF;
	--siwf-accent:#FF6B35;
	--siwf-dark:#111827;
	--siwf-muted:rgba(0,0,0,.55);
	--siwf-radius:1.25rem;
	--siwf-shadow:0 10px 30px rgba(0,0,0,.15);
	--siwf-bg:#fff;
}

#si-case-jpmstore{
	padding:clamp(20px,4vw,48px) 0;
}

.si-case__wrap{
	display:grid;
	grid-template-columns: 2fr 3fr; /* ~2/5 + 3/5 */
	align-items:center;
	gap:clamp(16px,3vw,32px);
}
@media (max-width:980px){
	.si-case__wrap{ grid-template-columns:1fr; }
}

/* Content card */
.si-card{
	position:relative;
	background:var(--siwf-bg);
	border:1px solid rgba(0,0,0,.06);
	border-radius:var(--siwf-radius);
	padding:clamp(20px,4vw,56px);
	box-shadow:var(--siwf-shadow);
	overflow:visible; /* decor mag buiten de kaart vallen */
}

/* Tekst in card */
.si-card__title{
	margin:0 0 .4rem;
	font-size:clamp(1.25rem,2.4vw,1.8rem);
	line-height:1.15;
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--siwf-dark);
}
.si-card__desc{
	margin:.25rem 0 1rem;
	color:#374151;
	font-size:clamp(.98rem,1.2vw,1.05rem);
	line-height:1.5;
}

/* CTA */
.si-btn{
	display:inline-flex; align-items:center; gap:.5rem;
	background:linear-gradient(90deg,var(--siwf-accent),var(--siwf-primary));
	color:#fff; text-decoration:none; font-weight:700;
	padding:.8rem 1rem; border-radius:.7rem;
	box-shadow:0 8px 20px rgba(0,0,0,.15);
	transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
@media (hover:hover){
	.si-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.18); }
}

/* Zorg dat content boven decor ligt */
#si-case-jpmstore .si-card > *:not(.si-card__decor){
	position:relative; z-index:2;
}

/* Decor linksonder */
#si-case-jpmstore .si-card__decor{
	position: absolute;
	left: -66px;               /* meer naar buiten */
	bottom: -64px;             /* meer naar beneden */
	width: min(28%, 140px);    /* kleiner */
	z-index: 1;                /* onder tekst, boven card-achtergrond */
	pointer-events: none;
	transform-origin: 20% 80%;
	transform: translate3d(0,0,0); /* crisp */
	will-change: transform;
	mix-blend-mode: multiply;
	filter: none;
}

@media (max-width:700px){
	#si-case-jpmstore .si-card__decor{
		left: 8px;
		bottom: -120px;
		width: min(34%, 120px);
	}
}

/* Devices area */
.si-case__col--devices{ position:relative; min-height:360px; }
@media (max-width:980px){
	.si-case__col--devices{ min-height:420px; }
}

.si-devices{ position:relative; width:100%; height:100%; }

.si-device{
	position:absolute;
	max-width:60%;
	height:auto;
	filter:drop-shadow(0 10px 24px rgba(0,0,0,.25));
	transform:translate3d(0,0,0) rotate(0deg);
	will-change:transform;
}

/* Plaatsing/laagvolgorde */
.si-device--tablet{ left:8%;  top:18%; z-index:2; }
.si-device--phone { left:54%; top:0%;  z-index:4; max-width:40%; }
.si-device--laptop{ left:22%; top:42%; z-index:1; max-width:70%; }
.si-device--phone2{ left:72%; top:36%; z-index:3; max-width:34%; opacity:.95; }

/* Mobiele correcties voor devices */
@media (max-width:700px){
	.si-case__col--devices {
		min-height: 480px; /* extra ruimte */
	}

	.si-device--tablet { top: 28%; }
	.si-device--phone  { top: 12%; }
	.si-device--laptop { top: 52%; }
	.si-device--phone2 { top: 44%; }
}

/* Respecteer reduced motion */
@media (prefers-reduced-motion:reduce){
	.si-device{ transition:none !important; transform:none !important; }
	#si-case-jpmstore .si-card__decor{ transform:none !important; }
}



/* ================================
VTS-EHBO
================================ */

/* Variabelen */
#si-case-vts-ehbo.si-case.siwf{
	--siwf-primary:#007BFF;
	--siwf-accent:#FF6B35;
	--siwf-dark:#111827;
	--siwf-muted:rgba(0,0,0,.55);
	--siwf-radius:1.25rem;
	--siwf-shadow:0 10px 30px rgba(0,0,0,.15);
	--siwf-bg:#fff;
}

#si-case-vts-ehbo{ padding:clamp(20px,4vw,48px) 0; }

/* Layout: devices links, content rechts (desktop/tablet) */
#si-case-vts-ehbo .si-case__wrap{
	display:grid;
	grid-template-columns: 3fr 2fr;
	align-items:center;
	gap:clamp(16px,3vw,32px);
}
#si-case-vts-ehbo .si-case__wrap--reverse{ direction:ltr; }

/* Tablet fallback naar één kolom (grid blijft actief) */
@media (max-width:980px){
	#si-case-vts-ehbo .si-case__wrap{ grid-template-columns:1fr; }
}

/* Content card */
#si-case-vts-ehbo .si-card{
	position:relative;
	background:var(--siwf-bg);
	border:1px solid rgba(0,0,0,.06);
	border-radius:var(--siwf-radius);
	padding:clamp(20px,4vw,56px);
	box-shadow:var(--siwf-shadow);
	overflow:visible;
}

#si-case-vts-ehbo .si-card__title{
	margin:0 0 .4rem;
	font-size:clamp(1.25rem,2.4vw,1.8rem);
	line-height:1.15;
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--siwf-dark);
}

#si-case-vts-ehbo .si-card__desc{
	margin:.25rem 0 1rem;
	color:#374151;
	font-size:clamp(.98rem,1.2vw,1.05rem);
	line-height:1.5;
}

/* CTA */
#si-case-vts-ehbo .si-btn{
	display:inline-flex; align-items:center; gap:.5rem;
	background:linear-gradient(90deg,var(--siwf-accent),var(--siwf-primary));
	color:#fff; text-decoration:none; font-weight:700;
	padding:.8rem 1rem; border-radius:.7rem;
	box-shadow:0 8px 20px rgba(0,0,0,.15);
	transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
@media (hover:hover){
	#si-case-vts-ehbo .si-btn:hover{
		transform:translateY(-2px);
		box-shadow:0 12px 26px rgba(0,0,0,.18);
	}
}

/* Card content boven decor */
#si-case-vts-ehbo .si-card > *:not(.si-card__decor){
	position:relative;
	z-index:2;
}

/* Decor (Rode Kruis logo) – start .8 → 1 via JS/scroll */
#si-case-vts-ehbo .si-card__decor{
	position:absolute;
	right:22px;
	top:-10px;
	width:min(48%, 160px);
	opacity:.8;
	transition:opacity 1s ease;
	z-index:0; /* onder tekst/cta in de card */
	pointer-events:none;
	transform:translate3d(0,0,0);
	will-change:transform,opacity;
}
#si-case-vts-ehbo .si-card__decor.is-visible{ opacity:1; }

@media (max-width:700px){
	#si-case-vts-ehbo .si-card__decor{
		right:24px;
		top:-64px;
		width:min(50%, 120px); /* compacter op mobiel */
	}
}

/* Devices area */
#si-case-vts-ehbo .si-case__col--devices{
	position:relative;
	min-height:380px;
}
@media (max-width:980px){
	#si-case-vts-ehbo .si-case__col--devices{ min-height:420px; }
}

#si-case-vts-ehbo .si-devices{
	position:relative;
	width:100%;
	height:100%;
}

#si-case-vts-ehbo .si-device{
	position:absolute;
	height:auto;
	max-width:62%;
	filter:drop-shadow(0 10px 24px rgba(0,0,0,.25));
	transform:translate3d(0,0,0) rotate(0deg);
	will-change:transform;
}

/* Plaatsing & lagen (desktop/tablet) */
#si-case-vts-ehbo .si-device--tablet{ left:12%; top:14%; z-index:2; max-width:58%; }
#si-case-vts-ehbo .si-device--laptop{ left:22%; top:42%; z-index:1; max-width:72%; }
#si-case-vts-ehbo .si-device--phone { left:58%; top:2%;  z-index:4; max-width:42%; }
#si-case-vts-ehbo .si-device--phone2{ left:72%; top:36%; z-index:3; max-width:34%; opacity:.95; }

/* --- MOBIEL: tekst boven devices + devices zichtbaar houden --- */
@media (max-width:700px){
	/* Schakel over van grid naar flex en stapel */
	#si-case-vts-ehbo .si-case__wrap{
		display:flex;            /* override grid */
		flex-direction:column;   /* tekst boven, devices eronder */
		align-items:stretch;
		gap:12px;
	}

	/* Volgorde kolommen */
	#si-case-vts-ehbo .si-case__col--text{
		order:1;
		width:100%;
	}
	#si-case-vts-ehbo .si-case__col--devices{
		order:2;
		width:100%;
		min-height:420px;        /* canvas-hoogte voor absolute devices */
		position:relative;
	}

	/* Zorg dat het devices-canvas ook echt hoogte heeft */
	#si-case-vts-ehbo .si-devices{
		position:relative;
		width:100%;
		height:420px;            /* matcht min-height */
	}

	/* Compactere positionering binnen het canvas, dichterbij tekst */
	#si-case-vts-ehbo .si-device--tablet{ left:14%; top:12%; max-width:52%; }
	#si-case-vts-ehbo .si-device--laptop{ left:22%; top:44%; max-width:66%; }
	#si-case-vts-ehbo .si-device--phone { left:58%; top:4%;  max-width:38%; }
	#si-case-vts-ehbo .si-device--phone2{ left:70%; top:34%; max-width:30%; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
	#si-case-vts-ehbo .si-device{ transform:none !important; }
	#si-case-vts-ehbo .si-card__decor{ transform:none !important; opacity:1 !important; }
}



/* ------------------------------------------------ Home page Cases END ------------------------------------------------ */

/* ------------------------------------------------ Home page FINAL ------------------------------------------------ */

/* Hero-footer gebruikt je siwf variabelen als basis */
.si-home-final.siwf{
	--c-accent: var(--siwf-accent, #FF6B35);
	--c-primary: var(--siwf-primary, #007BFF);
	--c-magenta: #ff4da6;
	--c-base: #0b1220;
}

.si-home-final{
	position: relative;
	overflow: hidden;
	padding: clamp(72px, 12vw, 160px) 2rem;
	color:#fff;
	text-align:center;
	isolation:isolate;
	background: var(--c-base);
}

.si-home-final__inner{
	position: relative;
	z-index: 2;
	max-width: 1100px;
	margin: 0 auto;
}

.si-home-final__title{
	font-size: clamp(2rem, 4.2vw, 3.6rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 1.25rem;
}
.si-home-final__title span{
	display:block;
	color: #fff;
}

/* CTA’s */
.si-home-final__ctas{
	display:flex;
	gap:.8rem;
	justify-content:center;
	flex-wrap:wrap;
	margin-top: 1.2rem;
}

.si-btn.si-btn--big{
	background: linear-gradient(90deg, var(--c-accent), var(--c-primary));
	color:#fff;
	padding: 1rem 1.6rem;
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 800;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	box-shadow: 0 12px 28px rgba(0,0,0,.25);
	transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.si-btn.si-btn--big:focus-visible{
	outline: 3px solid color-mix(in oklab, var(--c-accent), white 35%);
	outline-offset: 3px;
}
@media (hover:hover){
	.si-btn.si-btn--big:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.30); }
}

.si-btn.si-btn--ghost{
	background: transparent;
	color:#fff;
	padding: 1rem 1.4rem;
	border-radius: 999px;
	border: 1.5px solid color-mix(in oklab, #fff, transparent 30%);
	font-weight: 750;
	text-decoration: none;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
@media (hover:hover){
	.si-btn.si-btn--ghost:hover{
		background: rgba(255,255,255,.1);
		border-color:#fff;
	}
}

/* Achtergrondlagen */
.si-home-final__bg{ position:absolute; inset:0; z-index:1; }

/* Animated gradient */
.si-home-final__gradient{
	position:absolute; inset:-20%;
	background: linear-gradient(-45deg,
		color-mix(in oklab, var(--c-accent), #fff 4%),
		color-mix(in oklab, var(--c-primary), #fff 6%),
		var(--c-magenta),
		var(--c-primary)
	);
	filter: saturate(110%) brightness(85%);
	background-size: 400% 400%;
	animation: siGradientMove 14s ease-in-out infinite;
	mask-image: radial-gradient(120% 120% at 50% 50%, #000 55%, transparent 80%);
}
@keyframes siGradientMove{
	0% { background-position: 0% 50%; transform: scale(1.05) rotate(0.001deg); }
	50%{ background-position: 100% 50%; transform: scale(1.08) rotate(0.001deg); }
	100%{ background-position: 0% 50%; transform: scale(1.05) rotate(0.001deg); }
}

/* Subtiele grid overlay */
.si-home-final__grid{
	position:absolute; inset:0;
	opacity:.28;
	mix-blend-mode: screen;
}
.si-home-final__grid .grid-lines line{
	animation: siDash 12s linear infinite;
}
@keyframes siDash{
	to { stroke-dashoffset: -200; }
}

/* Responsieve spacing */
@media (max-width:700px){
	.si-home-final{ padding: 64px 1.5rem; }
	.si-home-final__ctas{ gap:.6rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
	.si-home-final__gradient,
	.si-home-final__grid .grid-lines line{
		animation: none !important;
	}
}


/* ------------------------------------------------ Home page FINAL END ------------------------------------------------ */


/* ------------------------------------------------ Home page FOOTER ------------------------------------------------ */

/* =========================
/* =========================
Footer – Styles (improved)
========================= */
:root{
	--si-bg-dark: #0b1020;
	--si-bg-darker: #060913;
	--si-text: #e5e7eb;
	--si-text-dim: #9aa3b2;
	--si-accent: #FF6B35; /* Studio Icon oranje */
	--si-radius: 18px;
	--si-max: 1200px;

	/* extra tokens */
	--si-border: rgba(255,255,255,.10);
	--si-tile: rgba(255,255,255,.06);
	--si-glow: rgba(255,107,53,.35);
}

.si-footer{
	position: relative;
	color: var(--si-text);
	background:
		radial-gradient(1200px 800px at 20% -10%, color-mix(in oklab, var(--si-accent) 30%, transparent) , transparent 60%),
		radial-gradient(900px 700px at 120% 120%, color-mix(in oklab, var(--si-accent) 22%, transparent) , transparent 60%),
		linear-gradient(180deg, var(--si-bg-dark), var(--si-bg-darker));
	padding: clamp(40px, 5vw, 72px) 0 28px;
	overflow: hidden;
	isolation: isolate;

	/* cursor in de footer */
	cursor: none;
}

/* subtiele dot-textuur */
.si-footer::before{
	content:"";
	position:absolute; inset:0;
	background-image: radial-gradient(rgba(255,255,255,.06) 0.6px, transparent 0.6px);
	background-size: 18px 18px;
	opacity:.14;
	pointer-events: none;
	z-index: 0;
}

/* zachte glow ring achter brand */
.si-footer::after{
	content:"";
	position:absolute; width:560px; height:560px;
	left: max(2%, calc((100% - var(--si-max)) / 2));
	top: -260px;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--si-accent) 28%, transparent), transparent);
	filter: blur(8px);
	z-index: 0; pointer-events:none;
}

.si-footer-wrap{
	position: relative;
	z-index: 1;
	max-width: var(--si-max);
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* Top layout – robuuster bij minder kolommen */
.si-footer-top{
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);
	gap: clamp(20px, 3vw, 42px);
	align-items: start;
}
@media (max-width: 980px){
	.si-footer-top{ grid-template-columns: 1fr 1fr; }
	.si-contact{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
	.si-footer-top{ grid-template-columns: 1fr; }
}

/* Brand */
.si-logo{
	display:inline-flex; align-items:center; gap:.55rem;
	font-weight: 900; letter-spacing: .2px;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	color: #fff; text-decoration: none;
}
.si-logo strong{ 
	background: linear-gradient(90deg, #fff, #dbeafe);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}
.si-tagline{
	margin:.6rem 0 0;
	color: var(--si-text-dim);
	font-size: .98rem;
	line-height: 1.5;
}

/* Nav (auto-fit zodat lege kolommen geen gaten maken) */
.si-nav{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 18px 28px;
}
@media (max-width: 640px){
	.si-nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.si-col-title{
	margin: 0 0 .6rem;
	font-size: .95rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #c7d2fe;
	opacity:.9;
}

.si-nav ul{ list-style: none; padding: 0; margin: 0; }
.si-nav a{
	display: inline-block;
	padding: .28rem 0;
	color: var(--si-text);
	text-decoration: none;
	opacity:.85;
	transition: opacity .2s ease, transform .2s ease, color .2s ease, text-shadow .2s ease;
}
.si-nav a:hover,
.si-nav a:focus-visible{
	color: #fff;
	opacity: 1;
	transform: translateX(2px);
	text-shadow: 0 0 14px var(--si-glow);
	outline: none;
}

/* Contact */
.si-contact address{ font-style: normal; color: var(--si-text-dim); }
.si-contact a{
	color: var(--si-text);
	text-decoration: none;
	transition: color .2s ease, text-shadow .2s ease;
}
.si-contact a:hover,
.si-contact a:focus-visible{
	color: #fff; 
	text-shadow: 0 0 12px var(--si-glow);
	outline: none;
}

/* Socials */
.si-social{ display:flex; margin-top: 1rem; }

/* spacing tussen iconen */
.studio-icon-footer-social-icons{
	display:flex; gap:.6rem;
}

.studio-icon-footer-social-icons a{
	width: 42px; height: 42px;
	border-radius: 12px;
	display: grid; place-items: center;
	background: var(--si-tile);
	border: 1px solid var(--si-border);
	color: #cbd5e1;
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		background .25s ease,
		color .25s ease,
		border-color .25s ease;
}
.studio-icon-footer-social-icons svg{
	width: 20px; height: 20px; fill: currentColor;
}
.studio-icon-footer-social-icons a:hover,
.studio-icon-footer-social-icons a:focus-visible{
	transform: translateY(-2px) scale(1.05);
	color: #fff; 
	background: color-mix(in oklab, var(--si-accent) 15%, transparent);
	border-color: color-mix(in oklab, var(--si-accent) 50%, transparent);
	box-shadow: 0 6px 22px color-mix(in oklab, var(--si-accent) 40%, transparent);
	outline: none;
}

/* Divider */
.si-divider{
	margin: clamp(22px, 4vw, 36px) 0 clamp(12px, 2vw, 16px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

/* Bottom bar */
.si-bottom{
	display:flex; align-items:center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
}
.si-copy{
	margin:0; font-size:.95rem; color: var(--si-text-dim);
}
.si-mini{
	margin:0; padding:0; list-style:none; display:flex; gap: 14px; flex-wrap: wrap;
}
.si-mini a{
	color: var(--si-text-dim); text-decoration: none; font-size: .95rem;
	transition: color .2s ease, text-shadow .2s ease;
}
.si-mini a:hover, .si-mini a:focus-visible{
	color: #fff;
	text-shadow: 0 0 10px var(--si-glow);
	outline: none;
}

/* Focus ring voor keyboard users (alle links in footer) */
.si-footer a:focus-visible{
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--si-accent) 45%, transparent);
	border-radius: 10px;
	outline: none;
}

/* =========================
Custom Cursor (footer-only)
========================= */
.si-cursor{
	position: fixed;
	inset: 0 auto auto 0;
	width: 28px; height: 28px;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 9999;

	/* basis glow */
	background: radial-gradient(circle at 50% 50%,
		color-mix(in oklab, var(--si-accent) 60%, transparent) 0%,
		color-mix(in oklab, var(--si-accent) 30%, transparent) 40%,
		transparent 70%);
	box-shadow: 0 0 18px color-mix(in oklab, var(--si-accent) 60%, transparent);
	opacity: 0; /* verschijnt alleen in footer */
	transition: width .22s ease, height .22s ease, opacity .18s ease;
}

/* grotere, fellere cursor boven interactives in de footer */
.si-footer a:hover ~ .si-cursor,
.si-footer button:hover ~ .si-cursor,
.si-footer [role="button"]:hover ~ .si-cursor{
	width: 42px; height: 42px;
	box-shadow: 0 0 28px color-mix(in oklab, var(--si-accent) 80%, transparent);
}

/* Reduced motion: toon hem zonder animaties/lag */
@media (prefers-reduced-motion: reduce){
	.si-footer{ cursor: auto; }
	.si-cursor{ display: none !important; }
}
/* De glow-spot die meebeweegt */
.si-mouseglow{
	position: fixed;
	top: 0; left: 0;
	width: 220px; height: 220px;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 3;
	opacity: 0;

	/* Studio Icon oranje glow */
	background: radial-gradient(closest-side,
		rgba(255,107,53,.40) 0%,   /* fel oranje in het midden */
		rgba(255,107,53,.25) 35%,
		rgba(255,107,53,.15) 55%,
		rgba(255,107,53,0)   70%   /* zacht uitfaden */
	);

	filter: blur(8px);
	transition: opacity .18s ease, width .22s ease, height .22s ease, filter .22s ease;
	mix-blend-mode: screen;
}

/* Feller als je over links/knoppen hovert */
.si-footer a:hover ~ .si-mouseglow,
.si-footer button:hover ~ .si-mouseglow,
.si-footer [role="button"]:hover ~ .si-mouseglow{
	width: 260px; height: 260px;
	filter: blur(10px);
	background: radial-gradient(closest-side,
		rgba(255,107,53,.55) 0%,
		rgba(255,107,53,.35) 40%,
		rgba(255,107,53,.15) 60%,
		rgba(255,107,53,0)   75%
	);
}

/* ------------------------------------------------ Home page FOOTER END ------------------------------------------------ */


/*--------------------------------------------- TWILINQ home first section -------------------------------------------*/

/* Container en grid */
.studio-icon-twilinq-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 16px; /* iets smaller padding voor mobiel */
}

.studio-icon-twilinq-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr; /* mobiel = één kolom */
}

@media (min-width: 1024px) {
	.studio-icon-twilinq-grid {
		grid-template-columns: 1fr 1fr; /* desktop = 2 kolommen */
		align-items: center;
	}
}

/* Zorg dat left en right nooit buiten container vallen */
.studio-icon-twilinq-left,
.studio-icon-twilinq-right {
	width: 100%;
	min-width: 0; /* voorkomt uitrekken */
	box-sizing: border-box;
}


/* Teksten links */
.studio-icon-twilinq-heading {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
}
.studio-icon-twilinq-subtext {
	margin-top: 16px;
	font-size: 18px;
	color: #667085;
	max-width: 48ch;
}

/* Pills */
.studio-icon-twilinq-pills {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.studio-icon-twilinq-pill {
	background: #f2f4f7;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	font-size: 14px;
	padding: 6px 14px;
}

.studio-icon-twilinq-container .studio-icon-twilinq-pill {
	background-color: #fff;
}

/* Buttons */
.studio-icon-twilinq-actions {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.studio-icon-twilinq-btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 50px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.25s ease;
}
.studio-icon-twilinq-btn-primary {
	background: #2F3BE4;
	color: #fff;
	box-shadow: 0 8px 24px rgba(47, 59, 228, 0.35);
}
.studio-icon-twilinq-btn-primary:hover {
	background: #232bb3;
	box-shadow: 0 12px 36px rgba(88, 101, 242, 0.55);
}
.studio-icon-twilinq-btn-outline {
	background: transparent;
	color: #2F3BE4;
	border: 2px solid #2F3BE4;
}
.studio-icon-twilinq-btn-outline:hover {
	background: #2F3BE4;
	color: #fff;
	box-shadow: 0 8px 24px rgba(47, 59, 228, 0.35);
}

/* Rechterblok */
.studio-icon-twilinq-right {
	border: 1px solid #e9eaee;
	border-radius: 28px;
	box-shadow: 0 8px 24px rgba(20, 20, 40, 0.06);
	padding: 28px;
}

.studio-icon-twilinq-right-img-container img {
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.studio-icon-twilinq-card {
	background: #fff;
	border: 1px solid #e9eaee;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(20, 20, 40, 0.04);
	transition: box-shadow 0.25s ease;
}
.studio-icon-twilinq-card:hover {
	box-shadow: 0 8px 20px rgba(20, 20, 40, 0.08);
}
.studio-icon-twilinq-card-body {
	padding: 16px;
}
.studio-icon-twilinq-card-body h4 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}
.studio-icon-twilinq-card-body p {
	margin: 0;
	font-size: 14px;
	color: #667085;
}

/*--------------------------------------------- TWILINQ home first section END -------------------------------------------*/

/*--------------------------------------------- TWILINQ Home diensten -------------------------------------------*/

/* Container */
.studio-icon-twilinq-diensten-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px;
}

/* Head */
.studio-icon-twilinq-diensten-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
}
.studio-icon-twilinq-diensten-title {
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	margin: 0;
}
.studio-icon-twilinq-diensten-btn {
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: 30px;
	background: #fff;
	border: 1px solid #e9eaee;
	color: #2F3BE4;
	transition: all 0.25s ease;
}
.studio-icon-twilinq-diensten-btn:hover {
	background: #2F3BE4;
	color: #fff;
	box-shadow: 0 8px 24px rgba(47, 59, 228, 0.35);
}

/* Grid */
.studio-icon-twilinq-diensten-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.studio-icon-twilinq-diensten-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.studio-icon-twilinq-diensten-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Cards */
.studio-icon-twilinq-diensten-card {
	background: #fff;
	border: 1px solid #e9eaee;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(20, 20, 40, 0.04);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.studio-icon-twilinq-diensten-card:hover {
	box-shadow: 0 12px 28px rgba(20, 20, 40, 0.1);
	transform: translateY(-2px);
}
.studio-icon-twilinq-diensten-card-body {
	padding: 20px;
}
.studio-icon-twilinq-diensten-card-body h4 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
}
.studio-icon-twilinq-diensten-card-body p {
	margin: 0;
	font-size: 14px;
	color: #667085;
}


/*--------------------------------------------- TWILINQ Home diensten END -------------------------------------------*/


/*--------------------------------------------- TWILINQ Home USP -------------------------------------------*/

/* Container */
.studio-icon-twilinq-usp-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 20px;
}

/* Section */
.studio-icon-twilinq-usp-section {
	background: #f9fafb;
	border-radius: 32px;
	padding: 40px 20px;
}

/* Titel */
.studio-icon-twilinq-usp-title {
	text-align: center;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	margin: 0 0 24px;
}

/* Grid */
.studio-icon-twilinq-usp-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr; /* mobiel */
}

@media (min-width: 768px) {
	.studio-icon-twilinq-usp-grid {
		grid-template-columns: repeat(2, 1fr); /* tablet */
	}
}

@media (min-width: 1100px) {
	.studio-icon-twilinq-usp-grid {
		grid-template-columns: repeat(4, 1fr); /* desktop */
	}
}

/* USP Cards */
.studio-icon-twilinq-usp-card {
	background: #fff;
	border: 1px solid #e9eaee;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(20, 20, 40, 0.04);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.studio-icon-twilinq-usp-card:hover {
	box-shadow: 0 10px 24px rgba(20, 20, 40, 0.08);
	transform: translateY(-2px);
}
.studio-icon-twilinq-usp-card-body {
	padding: 20px;
}
.studio-icon-twilinq-usp-card-body h4 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
}
.studio-icon-twilinq-usp-card-body p {
	margin: 0;
	font-size: 14px;
	color: #667085;
}


/*--------------------------------------------- TWILINQ Home USP END -------------------------------------------*/

/*--------------------------------------------- TWILINQ Home Cases -------------------------------------------*/

/* Container */
.studio-icon-twilinq-cases-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px 20px;
	box-sizing: border-box;
}

/* Head (titel + knop) */
.studio-icon-twilinq-cases-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.studio-icon-twilinq-cases-title {
	margin: 0;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.2;
}

/* Ghost button */
.studio-icon-twilinq-cases-btn {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: 30px;
	background: #fff;
	border: 1px solid #e9eaee;
	color: #2F3BE4;
	transition: all 0.25s ease;
}
.studio-icon-twilinq-cases-btn:hover {
	background: #2F3BE4;
	color: #fff;
	box-shadow: 0 8px 24px rgba(47, 59, 228, 0.35);
}

/* Grid (responsive) */
.studio-icon-twilinq-cases-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;       /* mobiel */
}
@media (min-width: 768px) {
	.studio-icon-twilinq-cases-grid {
		grid-template-columns: repeat(2, 1fr);  /* tablet/desktop */
	}
}

/* Cards */
.studio-icon-twilinq-cases-card {
	background: #fff;
	overflow: hidden;
	min-width: 0;
}

.studio-icon-twilinq-cases-body {
	padding: 20px;
}

/* Quote blok */
.studio-icon-twilinq-cases-quote {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.studio-icon-twilinq-cases-mark {
	font-size: 28px;
	line-height: 1;
	color: #2F3BE4;
	margin-top: 2px;
	user-select: none;
}

.studio-icon-twilinq-cases-text {
	margin: 0;
	font-size: 14px;
	color: #667085;
	line-height: 1.6;
}

/* Klantregel */
.studio-icon-twilinq-cases-client {
	margin-top: 10px;
	font-size: 12px;
	color: #667085;
}

/* Focus states (toegankelijkheid) */
.studio-icon-twilinq-cases-btn:focus-visible,
.studio-icon-twilinq-cases-card:focus-within {
	outline: 2px solid #3942FF;
	outline-offset: 2px;
	border-radius: 22px;
}


/*--------------------------------------------- TWILINQ Home Cases END -------------------------------------------*/

/*--------------------------------------------- TWILINQ Home Over Ons -------------------------------------------*/
/* ================================
Twillinq Over-sectie (styling)
HTML blijft 1-op-1 hetzelfde
================================== */
.studio-icon-twilinq-over-section{
	/* Design tokens (pas aan naar je merk) */
	--twq-accent: #2F3BE4;
	--twq-text: #0b1220;
	--twq-muted: #5b6472;
	--twq-line: rgba(15,23,42,.12);
	--twq-surface: #ffffff;
	--twq-radius-lg: 16px;
	--twq-radius-md: 12px;
	--twq-space-sm: 12px;
	--twq-space-md: 18px;
	--twq-space-lg: 28px;
	--twq-shadow-sm: 0 4px 14px rgba(0,0,0,.06);
	--twq-shadow-md: 0 12px 30px rgba(0,0,0,.10);
	padding-left: 60px;
	padding-right: 60px;
	color: var(--twq-text);
	background: transparent;
}

.studio-icon-twilinq-over-section {

}
/* Container breedte */
.studio-icon-twilinq-over-container{
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px;
	box-sizing: border-box;
}

/* Grid-kaart */
.studio-icon-twilinq-over-grid{
	display: grid;
	gap: var(--twq-space-lg);
	grid-template-columns: 1.1fr .9fr;
	background: var(--twq-surface);
	border: 1px solid var(--twq-line);
	border-radius: var(--twq-radius-lg);
	padding: clamp(18px, 3vw, 28px);
	box-shadow: var(--twq-shadow-sm);
	position: relative;
	overflow: hidden;
}

/* subtiele glansrand */
.studio-icon-twilinq-over-grid::after{
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background: linear-gradient(120deg, rgba(47,59,228,.06), transparent 35%, rgba(47,59,228,.05) 70%, transparent);
}

/* Responsief */
@media (max-width: 980px){
	.studio-icon-twilinq-over-grid{ grid-template-columns: 1fr; }
}

/* Linkerkolom (copy) */
.studio-icon-twilinq-over-left{
	display: grid;
	gap: var(--twq-space-md);
	align-content: start;
}

.studio-icon-twilinq-over-title{
	margin: .1em 0 .2em;
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1.1;
	letter-spacing: -.015em;
}

.studio-icon-twilinq-over-text{
	margin: 0;
	color: var(--twq-muted);
	font-size: clamp(15px, 1.35vw, 17px);
	line-height: 1.7;
}

/* CTA's */
.studio-icon-twilinq-over-actions{
	display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px;
}
.studio-icon-twilinq-over-btn{
	--pad-y: 10px; --pad-x: 14px;
	display: inline-flex; align-items: center; gap: 10px;
	padding: var(--pad-y) var(--pad-x);
	border-radius: 12px;
	font-weight: 700; line-height: 1;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, color .2s ease, border-color .2s ease, background .2s ease;
	box-shadow: var(--twq-shadow-sm);
}
.studio-icon-twilinq-over-btn:focus-visible{
	outline: 2px solid #3b82f6; outline-offset: 2px;
}
.studio-icon-twilinq-over-btn:hover{
	transform: translateY(-1px);
	box-shadow: var(--twq-shadow-md);
}

/* Variants */
.studio-icon-twilinq-over-btn-primary{
	background: var(--twq-accent);
	color: #fff;
	border: 1px solid var(--twq-accent);
}
.studio-icon-twilinq-over-btn-primary:hover{
	filter: brightness(1.03);
	box-shadow: 0 14px 30px rgba(47,59,228,.22);
	color: #fff;
}
.studio-icon-twilinq-over-btn-outline{
	background: #fff;
	color: var(--twq-text);
	border: 1px solid var(--twq-line);
}
.studio-icon-twilinq-over-btn-outline:hover{
	border-color: rgba(47,59,228,.35);
	color: var(--twq-accent);
}

/* Rechterkolom (stats) */
.studio-icon-twilinq-over-stats{
	align-self: center;
}

.studio-icon-twilinq-over-stats-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 12px;
}

@media (min-width: 981px){
	.studio-icon-twilinq-over-stats-grid{ gap: 14px; }
}

.studio-icon-twilinq-over-stat{
	background: linear-gradient(180deg, #fff, #f8fafc);
	border: 1px solid var(--twq-line);
	border-radius: var(--twq-radius-md);
	padding: 12px;
	min-height: 90px;
	display: grid; align-content: center;
	box-shadow: var(--twq-shadow-sm);
	position: relative;
	overflow: hidden;
}

/* decoratieve hoek-highlight */
.studio-icon-twilinq-over-stat::after{
	content: "";
	position: absolute; inset: -1px -1px auto auto;
	width: 40%; height: 40%;
	background: radial-gradient(120px 60px at 100% 0%, rgba(47,59,228,.12), transparent 60%);
	pointer-events: none;
}

/* Stat typografie */
.studio-icon-twilinq-over-n{
	font-weight: 800;
	font-size: clamp(18px, 2.2vw, 22px);
	line-height: 1.1;
	color: var(--twq-text);
}
.studio-icon-twilinq-over-l{
	font-size: 12px;
	color: var(--twq-muted);
	margin-top: 6px;
}

/* Subtiele motion; respecteer reduce motion */
@keyframes twq-floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
.studio-icon-twilinq-over-stat:nth-child(1){ animation: twq-floaty 6s ease-in-out infinite; }
.studio-icon-twilinq-over-stat:nth-child(2){ animation: twq-floaty 6.6s ease-in-out infinite; }
.studio-icon-twilinq-over-stat:nth-child(3){ animation: twq-floaty 5.8s ease-in-out infinite; }
.studio-icon-twilinq-over-stat:nth-child(4){ animation: twq-floaty 6.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
	.studio-icon-twilinq-over-stat{ animation: none !important; }
}

/*--------------------------------------------- TWILINQ Home Over Ons END -------------------------------------------*/

/*--------------------------------------------- TWILINQ Home CTA -------------------------------------------*/

/* Sectieruimte */
.studio-icon-twilinq-cta-section {
	padding: 0 60px;
}

/* Container */
.studio-icon-twilinq-cta-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 40px) 20px;
	background: #eef0ff;                 /* zachte merk-tint */
	border-radius: 32px;
	text-align: center;
	box-sizing: border-box;
}

/* Titel & tekst */
.studio-icon-twilinq-cta-title {
	margin: 0 0 10px;
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.2;
}
.studio-icon-twilinq-cta-text {
	margin: 0 auto;
	max-width: 60ch;
	color: #667085;
	font-size: 16px;
	line-height: 1.65;
}

/* Acties (knoppen) */
.studio-icon-twilinq-cta-actions {
	margin-top: 16px;
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Buttons */
.studio-icon-twilinq-cta-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.25s ease;
	line-height: 1;
}

/* Primary */
.studio-icon-twilinq-cta-btn-primary {
	background: #2F3BE4;
	color: #fff;
	border: 1px solid transparent;
	box-shadow: 0 8px 24px rgba(47, 59, 228, 0.35);
}
.studio-icon-twilinq-cta-btn-primary:hover {
	background: #232bb3;
	box-shadow: 0 12px 36px rgba(88, 101, 242, 0.55);
	transform: translateY(-1px);
}

/* Outline */
.studio-icon-twilinq-cta-btn-outline {
	background: #fff;
	color: #2F3BE4;
	border: 1px solid #e9eaee;
}
.studio-icon-twilinq-cta-btn-outline:hover {
	background: #f7f8ff;
	border-color: #2F3BE4;
	box-shadow: 0 8px 24px rgba(47, 59, 228, 0.18);
}

/* Toegankelijkheid */
.studio-icon-twilinq-cta-btn:focus-visible {
	outline: 2px solid #3942FF;
	outline-offset: 2px;
}

/*--------------------------------------------- TWILINQ Home CTA END -------------------------------------------*/


/*--------------------------------------------- TWILINQ Footer -------------------------------------------*/
/* Footer wrapper - lichte variant */
.studio-icon-twilinq-footer-light {
	background: #ffffff;
	color: #101828;
	border-top: 1px solid #e4e7ec;
}

/* Bovenste sectie */
.studio-icon-twilinq-footer-section {
	padding: 40px 0 8px;
}
.studio-icon-twilinq-footer-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;

	display: grid;
	gap: 32px;
	grid-template-columns: 1fr; /* mobiel */
}
@media (min-width: 900px) {
	.studio-icon-twilinq-footer-container {
		grid-template-columns: 2fr 3fr; /* desktop: logo links + links rechts */
		align-items: start;
	}
}

/* Brand blok */
.studio-icon-twilinq-footer-brand {
	text-align: center;
}
@media (min-width: 900px) {
	.studio-icon-twilinq-footer-brand {
		text-align: left;
	}
}
.studio-icon-twilinq-footer-logo {
	display: inline-block;
	max-width: 170px;
	height: auto;
}
.studio-icon-twilinq-footer-tagline {
	margin: 10px auto 0;
	max-width: 40ch;
	color: #475467;
	font-size: 14px;
	line-height: 1.6;
}
@media (min-width: 900px) {
	.studio-icon-twilinq-footer-tagline {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Links grid */
.studio-icon-twilinq-footer-links-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 naast elkaar mobiel */
}
@media (min-width: 700px) {
	.studio-icon-twilinq-footer-links-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop */
	}
}

/* Kolommen */
.studio-icon-twilinq-footer-heading {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: #101828;
}
.studio-icon-twilinq-footer-list {
	list-style-type: none !important;
	margin: 0;
	padding: 0 !important;
}
.studio-icon-twilinq-footer-list li {
	margin: 6px 0;
	font-weight: 400;
}
.studio-icon-twilinq-footer-list a {
	color: #475467;
	text-decoration: none;
	transition: color 0.25s ease;
}
.studio-icon-twilinq-footer-list a:hover {
	color: #2F3BE4;
}

/* Subfoot */
.studio-icon-twilinq-subfoot {
	border-top: 1px solid #e4e7ec;
	margin-top: 24px;
}
.studio-icon-twilinq-subfoot-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	color: #475467;
	font-size: 13px;
}
.studio-icon-twilinq-subfoot-links {
	display: flex;
	gap: 16px;
}
.studio-icon-twilinq-subfoot-links a {
	color: #475467;
	text-decoration: none;
}
.studio-icon-twilinq-subfoot-links a:hover {
	color: #2F3BE4;
}

@media (max-width: 767px) {
	.studio-icon-twilinq-subfoot-inner {
		justify-content: center;
	}
}

/*--------------------------------------------- TWILINQ Footer END -------------------------------------------*/

/*--------------------------------------------- TWILINQ Page Cases  -------------------------------------------*/

.si-page-hero-section {
	background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
}
/* =========================================================
Studio Icon Cases – Global tokens
========================================================= */
:root {
	/* Kleuren */
	--sic-bg: #fff;
	--sic-bg-subtle: #f9fafb;
	--sic-line: #ececec;
	--sic-line-soft: #eee;
	--sic-text: #111827;
	--sic-text-muted: #5b616a;
	--sic-primary: #0b63e6;
	--sic-primary-600: #084bb0;
	--sic-primary-contrast: #fff;
	--sic-pill-bg: #e5f1ff;
	--sic-pill-fg: #0073e6;
	--sic-tag-bg: #f4f7ff;
	--sic-tag-fg: #3758f9;
	--sic-tag-line: #e6ebff;

	/* Ronde hoeken & schaduw */
	--sic-radius: 12px;
	--sic-radius-sm: 8px;
	--sic-shadow: 0 8px 24px rgba(0,0,0,.08);

	/* Timing */
	--sic-t-fast: .2s;
	--sic-t-med: .35s;
	--sic-t-slow: .4s;
}

/* =========================================================
Sections & headings
========================================================= */

.studio-icon-cases-h2 {
	margin: .35em 0 .2em;
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.2;
}

.studio-icon-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #333;
}
.studio-icon-eyebrow:before {
	content: "";
	width: 26px;
	height: 2px;
	background: #333;
	border-radius: 2px;
}

/* Eyebrow */
.studio-icon-cases-eyebrow {
	display: inline-block;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7280;
	margin-bottom: .25rem;
}

/* Lead */
.studio-icon-cases-lead {
	font-size: 1.05rem;
	line-height: 1.55;
	color: #444;
	margin-top: .25rem;
}

/* =========================================================
HERO
========================================================= */

.studio-icon-cases-hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: center;
}

.studio-icon-cases-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.studio-icon-cases-pill {
	background: var(--sic-pill-bg);
	color: var(--sic-pill-fg);
	padding: .4rem .8rem;
	border-radius: 20px;
	font-size: .9rem;
}

.studio-icon-cases-hero-img {
	width: 100%;
	border-radius: var(--sic-radius-sm);
	object-fit: cover;
}

/* HERO responsive */
@media (max-width: 900px) {
	.studio-icon-cases-hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.studio-icon-cases-hero-img { margin-top: 2rem; }
}

/* =========================================================
FILTERS
========================================================= */
.studio-icon-cases-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}

.studio-icon-cases-chip {
	padding: .5rem 1.2rem;
	border: 1px solid var(--sic-pill-fg);
	border-radius: 20px;
	background: transparent;
	color: var(--sic-pill-fg);
	cursor: pointer;
	transition: background var(--sic-t-med) ease, color var(--sic-t-med) ease, border-color var(--sic-t-med) ease;
}

.studio-icon-cases-chip:hover,
.studio-icon-cases-chip:focus-visible,
.studio-icon-cases-chip[aria-pressed="true"] {
	background: var(--sic-pill-fg);
	color: var(--sic-primary-contrast);
	outline: none;
}

/* =========================================================
GRIDS
========================================================= */
/* Card grid (auto-fill) */
.studio-icon-cases-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
	gap: 1.5rem;
	margin-top: 1.25rem;
}

/* 12-col layout grid (voor One-Pagers/CTA) */
.studio-icon-cases-grid-12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0,1fr));
	gap: 1.5rem;
}

.studio-icon-cases-col-4 { grid-column: span 4; }
.studio-icon-cases-col-12 { grid-column: span 12; }

/* 12-col responsive */
@media (max-width: 1024px) {
	.studio-icon-cases-thumb { height: 190px; }
}
@media (max-width: 900px) {
	.studio-icon-cases-col-4 { grid-column: span 6; }   /* 2 kolommen */
}
@media (max-width: 560px) {
	.studio-icon-cases-grid-12 { gap: 1rem; }
	.studio-icon-cases-col-4 { grid-column: span 12; }  /* 1 kolom */
	.studio-icon-cases-thumb { height: 170px; }
}

/* =========================================================
CARDS (generiek)
========================================================= */
.studio-icon-cases-card {
	background: var(--sic-bg);
	border: 1px solid var(--sic-line);
	border-radius: var(--sic-radius);
	overflow: hidden;
	transition: opacity var(--sic-t-med) ease,
		transform var(--sic-t-med) ease,
		box-shadow var(--sic-t-fast) ease;
	opacity: 1;
	transform: scale(1);
	padding: 1rem .8rem;
}
.studio-icon-cases-card:hover { box-shadow: var(--sic-shadow); }

.studio-icon-cases-pad { padding: 1rem 1rem 1.1rem; }
.studio-icon-cases-card-title { margin: 10px 0 6px; font-size: 1.06rem; line-height: 1.35; }

.studio-icon-cases-thumb {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

/* Tagbar */
.studio-icon-cases-tagbar { display:flex; flex-wrap:wrap; gap:.45rem; }
.studio-icon-cases-tag {
	display: inline-block;
	padding: .25rem .6rem;
	font-size: .8rem;
	border-radius: 999px;
	background: var(--sic-tag-bg);
	color: var(--sic-tag-fg);
	border: 1px solid var(--sic-tag-line);
}

/* Metrics */
.studio-icon-cases-metric {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	margin: .6rem 0 .75rem;
	font-weight: 600;
}
.studio-icon-cases-metric > div {
	background: var(--sic-bg-subtle);
	border: 1px solid #f0f0f0;
	border-radius: var(--sic-radius-sm);
	padding: .5rem .6rem;
	text-align: center;
}

/* Note + CTA */
.studio-icon-cases-note { color: var(--sic-text-muted); font-size: .95rem; line-height: 1.55; }
.studio-icon-cases-cta-link {
	display: inline-block;
	margin-top: .35rem;
	text-decoration: none;
	color: var(--sic-primary);
	font-weight: 600;
	transition: color var(--sic-t-fast) ease, background var(--sic-t-fast) ease;
}
.studio-icon-cases-cta-link:hover,
.studio-icon-cases-cta-link:focus-visible {
	text-decoration: underline;
	outline: none;
}

/* Cards responsive */
@media (max-width: 900px) {
	.studio-icon-cases-thumb { height: 160px; }
	.studio-icon-cases-metric { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.studio-icon-cases-thumb { height: 140px; }
	.studio-icon-cases-metric { grid-template-columns: 1fr; }
}

/* =========================================================
FILTER-ANIMATIE (i.c.m. JS)
========================================================= */
.studio-icon-cases-card.is-hiding {
	opacity: 0;
	transform: scale(.96);
}
.studio-icon-cases-card.is-hidden {
	display: none; /* pas ná transitionend zetten via JS */
}

/* =========================================================
CTA – Case Request
========================================================= */
.studio-icon-cases-cta-card {
	background: var(--sic-bg);
	border: 1px solid var(--sic-line);
	border-radius: var(--sic-radius);
	padding: 18px;
}

.studio-icon-cases-cta-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.studio-icon-cases-cta-link {
	background: var(--sic-primary);
	color: var(--sic-primary-contrast);
	padding: .6rem 1.2rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	flex-shrink: 0;
	transition: background var(--sic-t-fast) ease;
}
.studio-icon-cases-cta-link:hover,
.studio-icon-cases-cta-link:focus-visible {
	background: var(--sic-primary-600);
	outline: none;
}

/* CTA responsive */
@media (max-width: 900px) {
	.studio-icon-cases-cta-flex {
		flex-direction: column;
		align-items: flex-start;
	}
	.studio-icon-cases-cta-link { margin-top: 1rem; }
}

/* Layout: 4 kolommen → 12-grid */
.studio-icon-cases-col-3 { grid-column: span 3; }

@media (max-width: 1100px) {
	.studio-icon-cases-col-3 { grid-column: span 6; } /* 2 kolommen */
}
@media (max-width: 560px) {
	.studio-icon-cases-col-3 { grid-column: span 12; } /* 1 kolom */
}

/* Badge */
.studio-icon-cases-badge {
	display: inline-block;
	background: #eef6ff;
	color: #0b63e6;
	border: 1px solid #d9eaff;
	font-weight: 600;
	font-size: .8rem;
	padding: .28rem .6rem;
	border-radius: 999px;
	margin-bottom: .6rem;
}

/* Icon row (titel met icoon) */
.studio-icon-cases-icon-row {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: .25rem 0 .4rem;
}
.studio-icon-cases-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	color: #0b63e6;
}

/* Checklist */
.studio-icon-cases-list {
	list-style: none;
	padding: 0;
	margin: .75rem 0 0;
	display: grid;
	gap: .35rem .75rem;
}
.studio-icon-cases-list li {
	display: grid;
	grid-template-columns: 18px 1fr;
	align-items: start;
	gap: .5rem;
	line-height: 1.45;
}
.studio-icon-cases-tick {
	width: 19px;
	height: 19px;
	border-radius: 50%;
	border: 2px solid #16a34a;
	position: relative;
	top: .1rem;
}
.studio-icon-cases-tick::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 3px;
	height: 8px;
	border-right: 2px solid #16a34a;
	border-bottom: 2px solid #16a34a;
	transform: rotate(45deg);
}

/* Kleine typografie-afstemming binnen cards */
.studio-icon-cases-card p { 
	font-size: .9rem;
	line-height: 1.5;
}
.studio-icon-cases-card strong { font-size: 1.02rem; }


/*--------------------------------------------- TWILINQ Page Cases END -------------------------------------------*/

/*--------------------------------------------- TWILINQ FAQ -------------------------------------------*/

/* ====== FAQ Grid ====== */
.studio-icon-cases-faq-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}
.studio-icon-cases-faq-col { grid-column: span 6; }

@media (max-width: 900px) {
	.studio-icon-cases-faq-col { grid-column: span 12; }
}

/* ====== FAQ Item ====== */
.studio-icon-cases-faq-item {
	background: var(--sic-bg, #fff);
	border: 1px solid var(--sic-line, #ececec);
	border-radius: var(--sic-radius, 12px);
	overflow: clip; /* nette maskering van animatie */
	transition: box-shadow .2s ease, border-color .2s ease;
}

.studio-icon-cases-faq-item + .studio-icon-cases-faq-item { margin-top: .75rem; }
.studio-icon-cases-faq-item[open] { box-shadow: var(--sic-shadow, 0 8px 24px rgba(0,0,0,.08)); }

/* Summary (toggler) */
.studio-icon-cases-faq-summary {
	list-style: none;
	cursor: pointer;
	padding: 1rem 1.1rem;
	font-weight: 600;
	position: relative;
	outline: none;
}
.studio-icon-cases-faq-summary::-webkit-details-marker { display: none; }

.studio-icon-cases-faq-summary::after {
	content: "";
	position: absolute;
	right: 1rem; top: 50%; transform: translateY(-50%) rotate(45deg);
	width: 10px; height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: .8;
	transition: transform .25s ease, opacity .2s ease;
}
.studio-icon-cases-faq-item[open] .studio-icon-cases-faq-summary::after {
	transform: translateY(-50%) rotate(225deg); /* pijl omhoog */
	opacity: 1;
}

/* Focus state voor keyboard-navigatie */
.studio-icon-cases-faq-summary:focus-visible {
	outline: 2px solid var(--sic-primary, #0b63e6);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Antwoord (inhoud) met smooth open/close */
.studio-icon-cases-faq-answer {
	padding: 0 1.1rem 1rem;
	max-height: 0;
	opacity: 0;
	transition: max-height .35s ease, opacity .35s ease;
}
.studio-icon-cases-faq-item[open] .studio-icon-cases-faq-answer {
	max-height: 200vh; /* ruim genoeg voor content */
	opacity: 1;
}

/* Tekstkleuren en spacing */
.studio-icon-cases-faq-answer p {
	margin: .25rem 0 0;
	color: var(--sic-text-muted, #5b616a);
	line-height: 1.6;
	font-size: .995rem;
}

/* Respecteer 'reduced motion' */
@media (prefers-reduced-motion: reduce) {
	.studio-icon-cases-faq-answer,
	.studio-icon-cases-faq-summary::after {
		transition: none;
	}
}

.studio-icon-cases-grid.is-hidden {
	display: none !important;
}

/*--------------------------------------------- TWILINQ FAQ END -------------------------------------------*/

/*--------------------------------------------- TWILINQ Swiper Slider -------------------------------------------*/

/* ============ Swiper – basis layout ============ */
.swiper { width: 100%; }
.swiper-wrapper { align-items: stretch; }           /* kaarten even hoog uitlijnen */
.swiper-slide { height: auto; }      /* ruimte tussen slides */

/* ============ Kaarten ============ */
.studio-icon-twilinq-usp-card {
	height: 100%;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 14px;
	padding: 18px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0,0,0,.06);
	display: flex;
}
.studio-icon-twilinq-usp-card-body { display: grid; gap: 8px; }
.studio-icon-twilinq-usp-card h4 { margin: 0; font-size: 18px; line-height: 1.2; }
.studio-icon-twilinq-usp-card p  { margin: 0; line-height: 1.5; }

/* ============ Paginatie (bullets) ============ */
.swiper-pagination { position: relative !important; margin-top: 10px; }
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; }
.swiper-pagination-bullet {
	width: 8px; height: 8px;
	background: #cfd3d9;
	opacity: 1;
	transition: transform .2s ease, background-color .2s ease;
}
.swiper-pagination-bullet-active {
	background: #2F3BE4;
	transform: scale(1.2);
}

/* ============ Pijlen ============ */
.swiper-button-prev,
.swiper-button-next {
	position: absolute;
	width: 40px; height: 40px;
	border-radius: 999px;
	background: transparent;
	border: 2px solid #2F3BE4;   /* zichtbare rand */
	color: #2F3BE4;
	opacity: .9;
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	transition: opacity .15s ease, transform .15s ease, box-shadow .2s ease;
	z-index: 10;
}
.swiper-button-prev { left: 8px; }
.swiper-button-next { right: 8px; }

.swiper-button-prev::after,
.swiper-button-next::after { font-size: 18px; }  /* default 44px is te groot */

.swiper-button-prev:hover,
.swiper-button-next:hover {
	opacity: 1;
	box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}
.swiper-button-disabled {
	opacity: .35 !important;
	cursor: not-allowed;
	box-shadow: none;
}

/* ============ Pijlen buiten de content (ruimte reserveren) ============ */
/* .twilinq-swiper { position: relative; padding: 0 60px; } */
.twilinq-swiper .swiper-button-prev { left: -20px; }
.twilinq-swiper .swiper-button-next { right: -20px; }

/* ============ Donkere achtergrond-variant (optioneel) ============ */
.twilinq-swiper--on-dark .swiper-button-prev,
.twilinq-swiper--on-dark .swiper-button-next {
	background: rgba(255,255,255,.9);
	border-color: rgba(255,255,255,.9);
	color: #0d0d0d;
}
.twilinq-swiper--on-dark .swiper-pagination-bullet { background: rgba(255,255,255,.55); }
.twilinq-swiper--on-dark .swiper-pagination-bullet-active { background: #fff; }

/* ============ Responsief ============ */
@media (min-width: 1024px) {
	.swiper-button-prev { left: 12px; }
	.swiper-button-next { right: 12px; }
}
@media (max-width: 767px) {
/* 	.twilinq-swiper { padding: 0 40px; } */
	.twilinq-swiper .swiper-button-prev { left: 5px; }
	.twilinq-swiper .swiper-button-next { right: 5px; }
}

.twilinq-swiper .swiper {

}

/*--------------------------------------------- TWILINQ Swiper Slider END -------------------------------------------*/

.helpdesk-hero-section {
	background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
}

/* Contactbar */
.studio-icon-contactbar {
	display:flex; 
	flex-wrap: wrap;
	gap:12px; 
	margin-top:14px;
}
.studio-icon-contactbar a {
	grid-column:span 3; display:flex; align-items:center;
	justify-content:center; gap:10px; padding:12px;
	border:1px solid var(--line); border-radius:12px;
	text-decoration:none; color:inherit; background:#fff;
}
.studio-icon-contactbar a:hover {
	border-color:var(--accent); color:var(--accent);
}
@media (max-width:980px) {
	.studio-icon-contactbar a { grid-column:span 6 }
}

/*--------------------------------------------- TWILINQ Helpdesk Page -------------------------------------------*/

/* Container & grid */
.studio-icon-status-grid {
	display:grid;
	gap:10px;
	grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
	margin-top:14px;
}

.studio-icon-status-tile {
	display:flex;
	align-items:center;
	gap:8px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:10px;
	padding:10px 14px;
	font-size:14px;
	box-shadow:0 2px 6px rgba(0,0,0,0.04);
}

/* Dot met pulse animatie */
.studio-icon-status-dot {
	width:10px;
	height:10px;
	border-radius:50%;
	background:#16a34a; /* groen */
	box-shadow:0 0 0 rgba(22,163,74, 0.6);
	animation: studio-icon-pulse 1.5s infinite;
}

@keyframes studio-icon-pulse {
	0% { box-shadow:0 0 0 0 rgba(22,163,74, 0.6); }
	70% { box-shadow:0 0 0 8px rgba(22,163,74, 0); }
	100% { box-shadow:0 0 0 0 rgba(22,163,74, 0); }
}

/* Tekst */
.studio-icon-status-lead {
	margin-top:10px;
	color:var(--muted);
	font-size:14px;
}

/* Titel */
.studio-icon-status-title {
	font-size:clamp(20px,2.8vw,28px);
	margin-bottom:6px;
}

/* Section */
.studio-icon-catalog-section {
	border-top:1px solid var(--line);
	padding-top:var(--space-md);
}

/* Title */
.studio-icon-catalog-title {
	font-size:clamp(22px, 2.6vw, 28px);
	margin-bottom:20px;
}

/* Grid */
.studio-icon-catalog-grid {
	display:grid;
	gap:20px;
	grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

/* Grid wrapper */
.studio-icon-two{
	display:grid;
	gap:20px;
	grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 980px){
	.studio-icon-two{ grid-template-columns: 1fr; }
}

/* Cards */
.studio-icon-block{
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:20px;
	box-shadow:0 4px 10px rgba(0,0,0,.04);
	transition: transform .15s ease, box-shadow .15s ease;
}
.studio-icon-block:hover{
	box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Titles */
.studio-icon-block-title{
	font-size:18px;
	margin:0 0 8px;
}

/* List with custom bullets */
.studio-icon-list{
	margin:0; padding:0 !important;
	display:grid; gap:8px;
	list-style:none !important;
	color: var(--muted);
	font-size:14px; line-height:1.6;
}
.studio-icon-list li{
	position:relative;
	padding-left:28px;
}
.studio-icon-list li::before{
	content:"";
	position:absolute; left:0; top:7px;
	width:16px; height:16px; border-radius:999px;
	background: var(--accent);
	box-shadow:0 0 0 3px rgba(47,59,228,.12);
	/* check */
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 14.58L3.3 10.25l1.414-1.414 2.915 2.915 7.657-7.657L16.7 5.51z"/></svg>') center/12px 12px no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 14.58L3.3 10.25l1.414-1.414 2.915 2.915 7.657-7.657L16.7 5.51z"/></svg>') center/12px 12px no-repeat;
}

/* Optional: badges per severity (voeg span.badge toe in li) */
.studio-icon-badge{
	display:inline-block;
	padding:2px 8px;
	border-radius:999px;
	font-size:12px; font-weight:700;
	margin-left:6px;
	background:#eef2ff; color:#2F3BE4; border:1px solid rgba(47,59,228,.25);
}
/* Section */
.studio-icon-sla-section {
	border-top:1px solid var(--line);
	padding-top:var(--space-md);
}

.studio-icon-sla-title {
	font-size:clamp(22px,2.6vw,28px);
	margin-bottom:18px;
}

/* Wrapper */
.studio-icon-sla-block {
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:18px;
	box-shadow:0 4px 10px rgba(0,0,0,.04);
}

/* Table */
.studio-icon-sla-table {
	width:100%;
	border-collapse:collapse;
	font-size:14px;
	line-height:1.5;
}
.studio-icon-sla-table th,
.studio-icon-sla-table td {
	padding:10px 12px;
	text-align:left;
	border-bottom:1px solid var(--line);
}
.studio-icon-sla-table th {
	font-weight:600;
	background:#f8fafc;
	font-size:13px;
}
.studio-icon-sla-table tbody tr:last-child td {
	border-bottom:none;
}

/* Row hover */
.studio-icon-sla-table tbody tr:hover {
	background:#f9fafb;
}

/* Scrollbare tabel op kleine schermen */
.studio-icon-sla-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.studio-icon-sla-table {
	min-width: 720px; /* voorkom te krappe kolommen */
}

/* Note */
.studio-icon-sla-note {
	color:var(--muted);
	margin-top:10px;
	font-size:12px;
}

/* Priority colors */
.studio-icon-sla-table .is-p1 td:first-child { color:#dc2626; font-weight:700; } /* rood */
.studio-icon-sla-table .is-p2 td:first-child { color:#ea580c; font-weight:700; } /* oranje */
.studio-icon-sla-table .is-p3 td:first-child { color:#2563eb; font-weight:700; } /* blauw */
.studio-icon-sla-table .is-p4 td:first-child { color:#16a34a; font-weight:700; } /* groen */

/* Responsive */
@media (max-width:768px) {
	.studio-icon-sla-table th, 
	.studio-icon-sla-table td {
		font-size:12px;
		padding:8px 6px;
	}
}

/* Section */
.studio-icon-kpi-section {
	border-top: 1px solid var(--line);
	padding-top: var(--space-md, 20px);
}

/* Titel */
.studio-icon-kpi-title {
	font-size: clamp(22px, 2.6vw, 28px);
	margin-bottom: 16px;
}

/* Grid */
.studio-icon-kpis {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 980px) {
	.studio-icon-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
	.studio-icon-kpis { grid-template-columns: 1fr; }
}

/* Card */
.studio-icon-kpi {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 28px 18px;
	box-shadow: 0 4px 10px rgba(0,0,0,.04);
	transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
	text-align: center;
}
.studio-icon-kpi:hover {
	transform: translateY(-2px);
	border-color: rgba(47,59,228,.25);
	box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Typografie */
.studio-icon-kpi-num {
	font-weight: 800;
	font-size: clamp(20px, 3vw, 26px);
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--text, #0b1220);
	/* subtiele “live” glans */
	background: linear-gradient(90deg, currentColor 0%, currentColor 60%, rgba(47,59,228,.8) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 1px 0 rgba(0,0,0,.04));
}
.studio-icon-kpi-lbl {
	margin-top: 6px;
	font-size: 13px;
	color: var(--muted, #5b6472);
}

/* Subtiele in-fade/slide animatie bij laden */
@keyframes studio-icon-kpi-appear {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.studio-icon-kpi { animation: studio-icon-kpi-appear .4s ease both; }
.studio-icon-kpi:nth-child(2){ animation-delay: .05s; }
.studio-icon-kpi:nth-child(3){ animation-delay: .1s; }
.studio-icon-kpi:nth-child(4){ animation-delay: .15s; }

/* Respecteer reduce motion */
@media (prefers-reduced-motion: reduce) {
	.studio-icon-kpi, .studio-icon-kpi-num { animation: none !important; }
	.studio-icon-kpi-num { background: none; color: var(--text, #0b1220); }
} 

/* Grid met standaard pakketten */
.studio-icon-packages-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 980px) {
	.studio-icon-packages-grid {
		grid-template-columns: 1fr;
	}
}

/* Package cards */
.studio-icon-package {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 4px 8px rgba(0,0,0,.03);
	transition: transform .2s ease, box-shadow .2s ease;
}
.studio-icon-package:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

.studio-icon-package-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}

.studio-icon-package-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.studio-icon-package-list li {
	margin: 8px 0;
	padding-left: 18px;
	position: relative;
}
.studio-icon-package-list li::before {
	content: "✔";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-size: 14px;
}

/* Maatwerk callout volle breedte */
.studio-icon-package-custom {
	margin-top: 30px;
	padding: 18px 22px;
	border-radius: 14px;
	border: 1px solid var(--accent);
	background: var(--accent-light, #f8fafc);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}
.studio-icon-package-custom p {
	margin: 0;
	font-size: 16px;
}
.studio-icon-package-btn {
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid var(--accent);
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.studio-icon-package-btn:hover {
	background: var(--accent);
	color: #fff;
}

/*--------------------------------------------- TWILINQ Helpdesk Page END-------------------------------------------*/


/*--------------------------------------------- TWILINQ Cloud Werkplekl Page-------------------------------------------*/

.studio-icon-cs-services-grid {
	grid-gap: 10px;display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

}
/* Section spacing (optioneel) */
.studio-icon-cs {
	padding: var(--space-md, 24px) 0;
}

/* Responsive grid */
.studio-icon-cs-grid {
	display: grid;
	gap: clamp(12px, 2.5vw, 24px);
	/*  auto-fit + minmax zorgt dat het vloeiend afbreekt */
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}


/* Op mobiel forceren we 1 kolom */
@media (max-width: 600px) {
	.studio-icon-cs-services-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Cards */
.studio-icon-cs-card {
	background: #fff;
	border: 1px solid var(--line, rgba(15,23,42,.12));
	border-radius: 12px;
	padding: clamp(14px, 2.2vw, 20px);
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.05);
	transition: transform .2s ease, box-shadow .2s ease;
	/* gelijke hoogte + nette verdeling content */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Hover-effect alleen op devices met hover */
@media (hover:hover) {
	.studio-icon-cs-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 20px rgba(0,0,0,.08);
	}
}

/* Logo’s schaalbaar en niet uitrekken */
.studio-icon-cs-card img {
	max-height: 48px;
	max-width: 100%;
	width: 100px;
	height: 34px;
	margin: 0 auto clamp(8px, 1.2vw, 12px);
	object-fit: contain;
}

/* Tekst */
.studio-icon-cs-card h3 {
	margin: 6px 0 6px;
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.25;
}
.studio-icon-cs-card p {
	margin: 0;
	font-size: clamp(13px, 1.4vw, 14px);
	line-height: 1.55;
	color: var(--muted, #5b6472);
}

/* Smalle schermen: forceer 1 kolom als het krap wordt */
@media (max-width: 520px) {
	.studio-icon-cs-grid {
		grid-template-columns: 1fr;
	}
}

/* Heel smal: laat long words en slashes netter afbreken */
.studio-icon-cs-card p,
.studio-icon-cs-card h3 {
	overflow-wrap: anywhere;
}

/* Optioneel: containerbreedte als je geen parent container hebt */
.studio-icon-cs > .studio-icon-cs-grid {
	max-width: 1100px;
	margin-inline: auto;
}
/*--------------------------------------------- TWILINQ Cloud & Security Page END-------------------------------------------*/


/*--------------------------------------------- TWILINQ Automatisering Page -------------------------------------------*/
.studio-icon-automatisering-grid {
	display: grid;
	gap: clamp(16px, 2.5vw, 24px);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin-top: 20px;
}

.studio-icon-automatisering-block {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* altijd zichtbaar */
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.studio-icon-automatisering-block:hover {
	border-color: var(--accent);
	box-shadow: 0 4px 14px rgba(0,0,0,0.08); /* iets sterker bij hover */
}

.studio-icon-automatisering-block h3 {
	margin-top: 0;
	font-size: 1.1rem;
	margin-bottom: 8px;
}

.studio-icon-automatisering-block p {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

.studio-icon-automatisering-packs-grid {
	display: grid;
	gap: clamp(16px, 2.5vw, 24px);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-top: 20px;
}

.studio-icon-automatisering-pack {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* altijd zichtbaar */
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.studio-icon-automatisering-pack:hover {
	border-color: var(--accent);
	box-shadow: 0 4px 14px rgba(0,0,0,0.08); /* iets sterker bij hover */
}

.studio-icon-automatisering-pack h3 {
	margin-top: 0;
	font-size: 1.2rem;
	margin-bottom: 10px;
}

.studio-icon-automatisering-pack ul {
	padding-left: 18px;
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

.studio-icon-conn-grid {
	display: grid;
	gap: clamp(16px, 2.5vw, 24px);
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	margin-top: 20px;
}

.studio-icon-conn-block {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.studio-icon-conn-block:hover {
	border-color: var(--accent);
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.studio-icon-conn-block h3 {
	margin-top: 0;
	font-size: 1.1rem;
	margin-bottom: 10px;
}

.studio-icon-conn-block ul {
	margin: 0;
	padding-left: 18px;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

.studio-icon-conn-block ul li {
	margin-bottom: 6px;
}

.studio-icon-arch-diagram {
	width: 100%;
	min-height: 220px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #f8fafc url('https://via.placeholder.com/960x360?text=Edge+%E2%86%92+Gateway+%E2%86%92+Cloud+%E2%86%92+Dashboards') 
		center/contain no-repeat;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.studio-icon-arch-lead {
	margin-top: 14px;
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.6;
}

.studio-icon-arch-diagram img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid var(--line);
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/*--------------------------------------------- TWILINQ Automatisering Page END-------------------------------------------*/

/*--------------------------------------------- TWILINQ IT Support Page -------------------------------------------*/

/* ===== Pills (tags) ===== */
.studio-icon-itsupport-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0;
}

.studio-icon-itsupport-pill {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.9rem;
	white-space: nowrap;
	transition: border-color 0.2s, color 0.2s;
}

.studio-icon-itsupport-pill:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* ===== Badge box ===== */
.studio-icon-itsupport-badge {
	display: grid;
	gap: 6px;
	background: #f9fafb;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 0.95rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	margin-top: 10px;
}

.studio-icon-kpis-it-support .studio-icon-kpi-num {
	font-size: 1.2rem;
	padding-bottom: 20px;
}
/*--------------------------------------------- TWILINQ IT Support Page END-------------------------------------------*/

/*--------------------------------------------- TWILINQ Databekabeling Page -------------------------------------------*/

/* Grid */
.studio-icon-survey-grid {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	grid-template-columns: repeat(2, 1fr);
	margin-top: 20px;
}

/* Mobiel: 1 kolom */
@media (max-width: 768px) {
	.studio-icon-survey-grid {
		grid-template-columns: 1fr;
	}
}

/* Blocks */
.studio-icon-survey-block {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	transition: box-shadow .2s ease, transform .2s ease;
}

.studio-icon-survey-block:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}

/* Titels */
.studio-icon-survey-block h3 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.1rem;
	color: var(--heading, #111);
	font-weight: bold;
}

/* Lijst */
.studio-icon-survey-block ul {
	margin: 0;
	padding-left: 18px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--muted, #555);
}

.studio-icon-survey-block li {
	margin: 6px 0;
}

.studio-icon-databekabeling-gallery-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.studio-icon-databekabeling-gallery-shot {
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	background: #fff;
}

.studio-icon-databekabeling-gallery-shot img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.studio-icon-databekabeling-gallery-shot:hover img {
	transform: scale(1.05);
}

.databekabling-vakwerk-section {
	background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
}

.databekabling-vakwerk-section .studio-icon-gallery-lead {
	padding-top: 20px;
}

/*--------------------------------------------- TWILINQ Databekabeling Page END-------------------------------------------*/

/*--------------------------------------------- TWILINQ VoIP & Mobile Page -------------------------------------------*/

/* Responsive grid: breekt vloeiend naar 3/2/1 kolom */
.studio-icon-telecom-grid {
	display: grid;
	gap: clamp(16px, 2.5vw, 24px);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Overrule eventuele inline grid-column spans */
.studio-icon-telecom-grid > .block[style*="grid-column"] {
	grid-column: auto !important;
}

/* Kaarten */
.studio-icon-telecom-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,.05); /* altijd zichtbaar */
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
@media (hover:hover){
	.studio-icon-telecom-card:hover {
		border-color: var(--accent);
		box-shadow: 0 4px 14px rgba(0,0,0,.08);
		transform: translateY(-2px);
	}
}

/* Typografie & lijst */
.studio-icon-telecom-card h3 {
	margin: 0 0 10px;
	font-size: 1.1rem;
	font-weight: bold;
}
.studio-icon-telecom-card ul {
	margin: 0; padding-left: 18px;
	color: var(--muted);
	font-size: 0.95rem; line-height: 1.55;
}
.studio-icon-telecom-card li { margin: 6px 0; }

/* Smal scherm: verzekerd 1 kolom indien nodig */
@media (max-width: 560px){
	.studio-icon-telecom-grid {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------- TWILINQ VoIP & Mobile Page END-------------------------------------------*/


/*--------------------------------------------- TWILINQ Diensten Page -------------------------------------------*/
.studio-icon-twilinq-diensten-grid {
	display: grid;
	gap: clamp(18px, 2.5vw, 28px);
	grid-template-columns: repeat(2, 1fr);
	margin-top: 32px;
}

@media (max-width: 900px) {
	.studio-icon-twilinq-diensten-grid {
		grid-template-columns: 1fr;
	}
}

/* === CARD STYLE === */
.studio-icon-twilinq-diensten-card {
	background: #fff;
	border: 1px solid var(--line, #e5e7eb);
	border-radius: 14px;
	padding: 26px 28px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover:hover) {
	.studio-icon-twilinq-diensten-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
	}
}

/* === BADGE === */
.studio-icon-twilinq-diensten-badge {
	display: inline-block;
	background: var(--accent-light, #e8f1ff);
	color: var(--accent, #0057d8);
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 6px;
	padding: 4px 12px;
	margin-bottom: 12px;
}

/* === TITLES & TEXT === */
.studio-icon-twilinq-diensten-card h3 {
	font-size: 1.25rem;
	margin: 8px 0 12px;
	color: var(--heading, #111);
}

.studio-icon-twilinq-diensten-card p {
	color: var(--text-muted, #555);
	line-height: 1.6;
	margin-bottom: 18px;
}

/* === LIST zonder bullets === */
.studio-icon-twilinq-diensten-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

.studio-icon-twilinq-diensten-list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 8px;
	color: var(--text-muted, #444);
}

/* .studio-icon-twilinq-diensten-tick::before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--accent, #0066cc);
	font-weight: 600;
} */

/* === CTA BUTTON === */
.studio-icon-twilinq-diensten-cta-actions {
	margin-top: 18px;
}

.studio-icon-twilinq-diensten-cta-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.25s ease;
	border: 1px solid transparent;
	font-size: 0.95rem;
	text-align: center;
}

.studio-icon-twilinq-diensten-cta-btn-primary {
	background: var(--accent, #0066cc);
	color: #fff;
	border-color: var(--accent, #0066cc);
	box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
}

.studio-icon-twilinq-diensten-cta-btn-primary:hover {
	background: var(--accent-dark, #004fa3);
	border-color: var(--accent-dark, #004fa3);
	box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}

/* === RESPONSIVE TEXT TWEAKS === */
@media (max-width: 768px) {
	.studio-icon-twilinq-diensten-card {
		padding: 22px 20px;
	}
	.studio-icon-twilinq-diensten-card h3 {
		font-size: 1.1rem;
	}
	.studio-icon-twilinq-diensten-badge {
		font-size: 0.75rem;
	}
}


/* === CONTAINER === */
.studio-icon-twilinq-diensten-process {
	border-top: 1px solid var(--line, #e5e7eb);
	padding-block: clamp(40px, 6vw, 70px);
}

.studio-icon-twilinq-diensten-eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--accent, #0066cc);
	font-size: 0.9rem;
	margin-bottom: 8px;
}

.studio-icon-twilinq-diensten-title {
	margin: 0.35em 0 0.2em;
	font-size: clamp(26px, 3.4vw, 34px);
}

.studio-icon-twilinq-diensten-lead {
	color: var(--text-muted, #555);
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 700px;
}

/* === GRID: 4 kolommen desktop, 2 tablet, 1 mobiel === */
.studio-icon-twilinq-diensten-process-grid {
	display: grid;
	gap: clamp(24px, 2.5vw, 36px);
	grid-template-columns: repeat(4, 1fr);
	margin-top: 40px;
}

@media (max-width: 1000px) {
	.studio-icon-twilinq-diensten-process-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.studio-icon-twilinq-diensten-process-grid {
		grid-template-columns: 1fr;
	}
}

/* === STEPS === */
.studio-icon-twilinq-diensten-step {
	background: #fff;
	border: 1px solid var(--line, #e5e7eb);
	border-radius: 12px;
	padding: 26px 24px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover:hover) {
	.studio-icon-twilinq-diensten-step:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
	}
}

/* === NUMMER-BADGE === */
.studio-icon-twilinq-diensten-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--accent-light, #e8f1ff);
	color: var(--accent, #0066cc);
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}

/* === TEXT === */
.studio-icon-twilinq-diensten-step h4 {
	margin: 6px 0 10px;
	font-size: 1.1rem;
	color: var(--heading, #111);
}

.studio-icon-twilinq-diensten-step p {
	color: var(--text-muted, #555);
	line-height: 1.6;
	margin: 0;
}

/* Container & headings */
.studio-icon-twilinq-diensten-faq {
	border-top: 1px solid var(--line, #e5e7eb);
	padding-block: clamp(36px, 5vw, 64px);
}
.studio-icon-twilinq-diensten-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	color: var(--accent, #0066cc);
	font-size: .9rem;
}
.studio-icon-twilinq-diensten-faq-title {
	margin: .35em 0 .2em;
	font-size: clamp(26px, 3.4vw, 34px);
}

/* FAQ items */
.studio-icon-twilinq-diensten-faq-item {
	border: 1px solid var(--line, #e5e7eb);
	border-radius: 12px;
	background: #fff;
	margin-top: 14px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* Summary (trigger) */
.studio-icon-twilinq-diensten-faq-summary {
	cursor: pointer;
	list-style: none; /* verwijder default marker in sommige browsers */
	padding: 16px 18px 16px 48px;
	position: relative;
	font-weight: 600;
	line-height: 1.4;
	outline: none;
}
.studio-icon-twilinq-diensten-faq-summary::-webkit-details-marker { display: none; }

/* Plus/minus indicator */
.studio-icon-twilinq-diensten-faq-summary::before,
.studio-icon-twilinq-diensten-faq-summary::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 16px;
	height: 2px;
	background: var(--accent, #0066cc);
	transform: translateY(-50%);
	transition: transform .2s ease, opacity .2s ease;
}
.studio-icon-twilinq-diensten-faq-summary::after {
	transform: translateY(-50%) rotate(90deg); /* maakt '+' */
}

/* Open state -> '-' */
.studio-icon-twilinq-diensten-faq-item[open] .studio-icon-twilinq-diensten-faq-summary::after {
	transform: translateY(-50%) rotate(0deg); /* verticale streep verdwijnt */
	opacity: 0;
}

/* Hover/focus states */
@media (hover:hover) {
	.studio-icon-twilinq-diensten-faq-summary:hover {
		color: var(--accent, #0066cc);
	}
}
.studio-icon-twilinq-diensten-faq-summary:focus-visible {
	box-shadow: 0 0 0 3px rgba(0,102,204,.25) inset;
	border-radius: 12px;
}

/* Content (collapsible area) */
.studio-icon-twilinq-diensten-faq-content {
	padding: 0 18px 16px 48px;
	color: var(--text-muted, #555);
	line-height: 1.6;
	animation: studio-icon-twilinq-diensten-faq-reveal .2s ease;
}
@keyframes studio-icon-twilinq-diensten-faq-reveal {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Compact on small screens */
@media (max-width: 640px) {
	.studio-icon-twilinq-diensten-faq-summary { padding: 14px 16px 14px 44px; }
	.studio-icon-twilinq-diensten-faq-content { padding: 0 16px 14px 44px; }
}
/*--------------------------------------------- TWILINQ Diensten Page END-------------------------------------------*/

/*--------------------------------------------- TWILINQ Privacy Verklaring Page -------------------------------------------*/

/* ===== Privacyverklaring Twilinq (Divi-stijl) ===== */
.studio-icon-privacy {
	font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.7;
	color: #222;
	max-width: 900px;
	margin: 0 auto;
}
.studio-icon-privacy h2 {
	font-size: 1.9rem;
	color: #111;
	margin-bottom: .3em;
}
.studio-icon-privacy h3 {
	font-size: 1.3rem;
	margin-top: 1.6em;
	margin-bottom: .4em;
	color: #0d3d8a;
}
.studio-icon-privacy p {
	margin-bottom: 1em;
}
.studio-icon-privacy ul {
	margin: 0 0 1em 1.2em;
	padding: 0;
}
.studio-icon-privacy li {
	margin-bottom: .4em;
}
.studio-icon-privacy a {
	color: #0b5fff;
	text-decoration: none;
}
.studio-icon-privacy a:hover {
	text-decoration: underline;
}
.studio-icon-privacy strong {
	color: #111;
}
.studio-icon-privacy .meta {
	color: #555;
	font-size: 0.95rem;
	margin-bottom: 1.5em;
}
.studio-icon-privacy .contact {
	background: #f8faff;
	border: 1px solid #e0e6f9;
	padding: 1em 1.2em;
	border-radius: 8px;
	margin-top: 1em;
}

/*--------------------------------------------- TWILINQ Privacy Verklaring Page END-------------------------------------------*/

/*--------------------------------------------- TWILINQ Oplossingen Page -------------------------------------------*/

.studio-icon-solutions .grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.studio-icon-solutions .card {
	background: #fff;
	border: 1px solid #e6e9f0;
	border-radius: 14px;
	padding: 2rem 1.75rem;
	box-shadow: 0 2px 10px rgba(0,0,0,0.03);
	transition: all 0.25s ease;
}
.studio-icon-solutions .card:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}

.studio-icon-solutions .badge {
	display: inline-block;
	background: #0d3d8a;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.3em 0.8em;
	border-radius: 6px;
	margin-bottom: 0.8em;
}

.studio-icon-solutions h3 {
	font-size: 1.3rem;
	color: #111;
	margin: 0.4em 0 0.6em;
	line-height: 1.4;
}

.studio-icon-solutions p {
	color: #333;
	margin-bottom: 1em;
	line-height: 1.6;
}

.studio-icon-solutions .list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.2em;
}
.studio-icon-solutions .list li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.45em;
}
.studio-icon-solutions .list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #0d8a44;
	font-weight: 600;
}

.studio-icon-solutions .chips {
	margin-top: 1rem;
}
.studio-icon-solutions .chip {
	display: inline-block;
	background: #f0f3fa;
	color: #0d3d8a;
	font-size: 0.85rem;
	font-weight: 500;
	padding: 0.25em 0.8em;
	border-radius: 999px;
	margin: 0.2em 0.4em 0 0;
}

.studio-icon-solutions .cta-link {
	display: inline-block;
	margin-top: 1.2em;
	color: #0d3d8a;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}
.studio-icon-solutions .cta-link:hover {
	color: #0b5fff;
	text-decoration: underline;
}
.studio-icon-oplossingen-eyebrow {
	display: block;
	color: #0d3d8a;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
	margin-bottom: 0.4em;
}

.studio-icon-oplossingen-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 0;
}

.studio-icon-oplossingen-card {
	background: #fdfdfd;
	border: 1px solid #e5e8ef;
	border-radius: 12px;
	padding: 1.8rem 1.6rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	transition: all 0.25s ease;
}
.studio-icon-oplossingen-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}

.studio-icon-oplossingen-card h3 {
	font-size: 1.25rem;
	margin: 0 0 0.5em;
	color: #111;
}

.studio-icon-oplossingen-card p {
	color: #333;
	line-height: 1.6;
	margin: 0 0 1em;
}

.studio-icon-oplossingen-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.studio-icon-oplossingen-chip {
	display: inline-block;
	background: #f1f5ff;
	color: #0d3d8a;
	font-size: 0.85rem;
	font-weight: 500;
	padding: 0.25em 0.8em;
	border-radius: 999px;
	transition: background 0.2s ease;
}
.studio-icon-oplossingen-chip:hover {
	background: #e3ecff;
}

/* ===== Responsiveness ===== */
@media (max-width: 980px) {
	.studio-icon-oplossingen-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.studio-icon-oplossingen-grid {
		grid-template-columns: 1fr;
	}
	.studio-icon-oplossingen-card {
		padding: 1.4rem 1.2rem;
	}
}
/*--------------------------------------------- TWILINQ Oplossingen Page END-------------------------------------------*/



/*--------------------------------------------- TWILINQ Over ons Page -------------------------------------------*/


/* ===== Twilinq Sidebar (Waarom Twilinq + Verwachting) ===== */
.sidebar-sticky {
	position: sticky;
	top: 90px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===== Kaarten ===== */
.sidebar-sticky .card {
	background: #fff;
	border: 1px solid #e5e8ef;
	border-radius: 12px;
	padding: 1.4rem 1.6rem 1.6rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.sidebar-sticky .card:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}

/* ===== Titels & kicker ===== */
.sidebar-sticky .kicker {
	color: #0d3d8a;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
	margin-bottom: 0.2rem;
}

.sidebar-sticky .h3 {
	font-size: 1.15rem;
	color: #111;
	font-weight: 600;
	line-height: 1.3;
}

/* ===== Lijsten ===== */
.sidebar-sticky .benefits {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	color: #333;
	font-size: 0.95rem;
	line-height: 1.55;
}

.sidebar-sticky .benefits li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.sidebar-sticky .benefits .dot {
	width: 8px;
	height: 8px;
	background-color: #0d3d8a;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 6px;
}

/* ===== Divider ===== */
.sidebar-sticky .divider {
	border-top: 1px solid #e5e8ef;
	margin: 1rem 0;
}

/* ===== Badges ===== */
.sidebar-sticky .badge-outline {
	display: inline-block;
	border: 1px solid #c6d2ee;
	color: #0d3d8a;
	background: #f5f7ff;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.15em 0.7em;
	margin-right: 4px;
}

/* ===== Knop & hint ===== */
.sidebar-sticky .btn {
	display: inline-block;
	width: 100%;
	text-align: center;
	background: #0d3d8a;
	color: #fff;
	border-radius: 8px;
	padding: 0.7em 1em;
	font-weight: 600;
	text-decoration: none;
	font-size: 0.95rem;
	transition: background 0.25s ease, transform 0.25s ease;
}
.sidebar-sticky .btn:hover {
	background: #0b3477;
	transform: translateY(-2px);
}

.sidebar-sticky .hint {
	color: #666;
	font-size: 0.85rem;
	margin-top: 0.6rem;
}

/* ===== Ordered list styling ===== */
.sidebar-sticky ol.small {
	color: #333;
	font-size: 0.9rem;
	padding-left: 1.1rem;
}
.sidebar-sticky ol.small li::marker {
	color: #0d3d8a;
	font-weight: 600;
}

/* ===== Kleine tekst ===== */
.sidebar-sticky .small {
	font-size: 0.9rem;
	color: #444;
	line-height: 1.6;
}

/* ===== Responsiveness ===== */
@media (max-width: 980px) {
	.sidebar-sticky {
		position: static;
		top: auto;
	}
	.sidebar-sticky .card {
		padding: 1.2rem 1.3rem;
	}
}


/*--------------------------------------------- TWILINQ Over ons Page END-------------------------------------------*/

/*--------------------------------------------- TWILINQ Adviesgesprek Form -------------------------------------------*/

/* ===== Formulierbasis ===== */
.studio-icon-cta-form {
	max-width: 600px;
	margin: 0 auto;
	background: #fff;
	padding: 28px;
	border-radius: 12px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.studio-icon-cta-form .form-title {
	margin-bottom: 18px;
	font-size: 1.4rem;
	color: #0d3d8a;
}

.studio-icon-cta-form label {
	display: block;
	margin-bottom: 16px;
	font-weight: 500;
	color: #333;
}

.studio-icon-cta-form input,
.studio-icon-cta-form select,
.studio-icon-cta-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 15px;
	margin-top: 6px;
	transition: border-color 0.2s;
}

.studio-icon-cta-form input:focus,
.studio-icon-cta-form select:focus,
.studio-icon-cta-form textarea:focus {
	border-color: #0d3d8a;
	outline: none;
}

/* ===== Twee kolommen ===== */
.studio-icon-cta-form .form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}

/* ===== Knop en kleine tekst ===== */
.studio-icon-cta-form .actions {
	margin-top: 20px;
}

.studio-icon-cta-form input[type="submit"] {
	background-color: #0d3d8a;
	color: #fff;
	border: none;
	padding: 12px 20px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s;
}

.studio-icon-cta-form input[type="submit"]:hover {
	background-color: #0b3475;
}

.studio-icon-cta-form .disclaimer {
	display: block;
	margin-top: 16px;
	font-size: 13px;
	color: #666;
	text-align: center;
}

/*--------------------------------------------- TWILINQ Adviesgesprek Form END-------------------------------------------*/

@media screen and (max-width: 768px) {
	.studio-icon-twilinq-diensten-title {
		text-align: center;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.studio-icon-twilinq-cases-head {
		justify-content: center;
	}
	.studio-icon-twilinq-over-section {
		padding: 0 20px;
	}
	.studio-icon-twilinq-cta-section {
		padding: 0 20px;
	}
	.studio-icon-twilinq-diensten-container {
		padding: 20px 10px 20px 20px;
	}
	.studio-icon-twilinq-footer-links-grid {
		text-align: center;
		grid-template-columns: 100%;
	}
}
@media (max-width: 768px) {
	.studio-icon-twilinq-footer-heading { margin: 0; }
	.studio-icon-twilinq-footer-heading .footer-toggle {
		all: unset;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: .6rem 0;
		cursor: pointer;
		font-weight: 600;
		border-bottom: 1px solid #eee;
	}
	.studio-icon-twilinq-footer-heading .footer-toggle .chevron::after {
		content: '▾';
		display: inline-block;
		transition: transform .2s ease;
		margin-left: .5rem;
	}
	.studio-icon-twilinq-footer-heading .footer-toggle[aria-expanded="true"] .chevron::after {
		transform: rotate(180deg);
	}

	/* optioneel: nette lijststijl */
	.studio-icon-twilinq-footer-list {
		margin: 0 0 .5rem 0;
		padding-left: 0;
	}
	.studio-icon-twilinq-footer-list li { list-style: none; }
	.studio-icon-cases-faq-col {
		grid-column: 1;
	}
	.studio-icon-cases-faq-grid {
		grid-template-columns: auto;
	}
	.swiper-button-next, .swiper-button-prev {
		display: none;
	}
}

@media (min-width: 769px) {
  /* Zorg dat het weer een normale kop wordt */
  .studio-icon-twilinq-footer-heading .footer-toggle {
    all: unset;              /* verwijdert buttonappearance */
    display: block;          /* normale block heading */
    cursor: default;         /* geen handcursor */
    color: inherit;
    font-weight: 600;
    width: auto;
  }

  .studio-icon-twilinq-footer-heading .chevron {
    display: none !important; /* verberg het pijltje */
  }

  .studio-icon-twilinq-footer-list {
    display: block !important; /* altijd zichtbaar */
  }
}

@media (min-width: 769px) {
	/* op desktop altijd zichtbaar en heading is geen klikbare toggle */
	.studio-icon-twilinq-footer-heading .footer-toggle { pointer-events: none; }
}