/**
 * Computech theme styles.
 *
 * Design tokens below are pulled directly from the real Figma "Website"
 * page (node 50:577, "01_HOME"), via get_design_context — these are exact,
 * not estimates: White #FFFFFF, Black #000000, Contrast (yellow-green)
 * #D6EB12, Red #D33121, Grey #CDCDCD, Light grey #FAF9F5.
 *
 * Fonts match the design: the local Juturu variable font is used for
 * headings, while Neue Haas Grotesk Display is loaded from the project's
 * Adobe Fonts kit for body text and interface elements.
 */

@font-face {
	font-family: 'Juturu';
	src: url('../fonts/Juturu-VariableVF.woff2') format('woff2-variations'),
		url('../fonts/Juturu-VariableVF.woff') format('woff-variations'),
		url('../fonts/Juturu-VariableVF.ttf') format('truetype-variations');
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	/* Color */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-red: #d33121; /* primary brand color */
	--color-contrast: #d6eb12; /* yellow-green pill button */
	--color-grey: #cdcdcd; /* card borders */
	--color-light-grey: #faf9f5; /* section / card background */
	--color-body: rgba(0, 0, 0, 0.6); /* black at 60% opacity, as used in the design */

	/* Type */
	--font-heading: 'Juturu', 'Poppins', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'neue-haas-grotesk-text', 'Helvetica Neue', Arial, 'Segoe UI', sans-serif;

	/* Layout */
	--container-width: 1200px;
	--radius-pill: 30px;
	--radius-pill-outline: 100px;
	--radius-card: 20px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.67;
	color: var(--color-black);
	background: var(--color-white);
}

.container {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 20px;
}

h1,
h2,
h3 {
	font-family: var(--font-heading);
	font-weight: 700;
	margin: 0 0 16px;
}

a {
	color: inherit;
}

/* Buttons — exact geometry from Figma: 20px/10px padding, pill radii */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	font-family: 'neue-haas-grotesk-display', 'Helvetica Neue', Arial, 'Segoe UI', sans-serif;
	font-weight: 500;
	font-size: 1.125rem;
	line-height: normal;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Hover: invert filled <-> outline (more prominent than the old opacity fade). */
.btn:hover,
.btn:focus-visible {
	opacity: 1;
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background: transparent;
	border-color: var(--color-contrast);
	color: var(--color-contrast);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: transparent;
	border-color: var(--color-red);
	color: var(--color-red);
}
.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--color-red);
	border-color: var(--color-red);
	color: var(--color-white);
}

.btn--pill {
	border-radius: var(--radius-pill);
}

.btn--primary {
	background: var(--color-contrast);
	color: var(--color-black);
}

.btn--secondary {
	background: var(--color-red);
	color: var(--color-white);
	border-radius: var(--radius-pill-outline);
}

.btn--outline {
	background: transparent;
	border-color: currentColor;
	border-radius: var(--radius-pill-outline);
}

/* Header (red nav bar, matches the real design) */
.site-header {
	background: var(--color-red);
	padding: 24px 0;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-header__brand {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	line-height: 1.2;
	color: var(--color-white);
}

.site-header__logo-img {
	height: 30px;
	width: auto;
	display: block;
}

.site-footer__logo-img {
	height: 30px;
	width: auto;
	display: block;
	filter: invert(1); /* the SVG is white-on-transparent, designed for the red header */
	margin-bottom: 12px;
}

.nav {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 9px 30px;
	border-radius: 40px;
}

.nav li {
	list-style: none;
}

.nav a {
	text-decoration: none;
	font-size: 1.125rem;
	color: var(--color-white);
	opacity: 0.8;
}

.nav .menu-item-has-children {
	position: relative;
}

.nav .menu-item-has-children > a::after {
	content: '⌄';
	display: inline-block;
	margin-left: 6px;
	font-size: 0.9em;
}

.nav .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	z-index: 10;
	min-width: 250px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: var(--color-red);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 12px;
	transform: translateX(-50%);
}

.nav .sub-menu a {
	display: block;
	padding: 8px 16px;
	white-space: nowrap;
}

.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

/* Reusable full-width hero: fixed content styling, configurable artwork. */
.hero--home {
	background: var(--color-red);
	color: var(--color-white);
	padding-block: 140px 100px;
	position: relative;
	overflow: hidden;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	min-height: 679px;
	display: flex;
	align-items: center;
}

.hero--home .container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.hero--home .hero__content {
	position: relative;
	z-index: 2;
	max-width: 894px;
}

.hero--home .hero__heading {
	color: var(--color-white);
}

.hero--home .hero__heading .accent {
	color: var(--color-black);
}

.hero__heading {
	font-size: clamp(2.25rem, 5.2vw, 4.625rem);
	max-width: 850px;
	line-height: 1.02;
	letter-spacing: 0.05em;
}

.hero__subtext {
	max-width: 850px;
	font-size: 1.4375rem;
	line-height: 1.48;
	letter-spacing: 0.02em;
	margin: 30px 0;
}

.hero--home .hero__subtext {
	color: rgba(255, 255, 255, 0.8);
}

/* Front page only: narrower subtext measure (not every page using the hero block). */
.home .hero--home .hero__subtext {
	max-width: 600px;
}

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 24px;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero--background-image::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 58%, rgba(0, 0, 0, 0.08) 100%);
	pointer-events: none;
}

.hero--has-custom-image.hero--image-mask .hero__media {
	background-color: var(--color-red);
	background-position: center 48%;
	-webkit-mask-image: url('https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg');
	mask-image: url('https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: auto 118.4%;
	mask-size: auto 118.4%;
	-webkit-mask-position: 29.375vw 0;
	mask-position: 29.375vw 0;
}

.hero--has-custom-image.hero--image-mask {
	background: var(--color-red);
}

.hero--has-custom-image.hero--image-mask::after {
	display: none;
}

.hero__shape {
	position: absolute;
	z-index: 1;
	width: min(105vw, 1513px);
	height: auto;
	pointer-events: none;
	user-select: none;
}

.hero--background-image.hero--image-overlay .hero__shape {
	right: -28%;
	bottom: -115%;
	opacity: 1;
	transform: rotate(135deg);
}

.hero--background-color.hero--icon-bottom-right .hero__shape {
	width: 1490.483px;
	height: 607.234px;
	right: -18.829vw;
	top: 25vh;
	bottom: auto;
	transform: rotate(123.929deg);
}

.hero--background-color .hero__shape {
	width: 1490.483px;
	height: 607.234px;
}

.hero--background-color.hero--icon-top-center .hero__shape {
	left: -339px;
	top: -200px;
	bottom: auto;
	transform: rotate(35.852deg);
}

.hero--background-color.hero--icon-bottom-left .hero__shape {
	left: -18.829vw;
	top: 25vh;
	bottom: auto;
	transform: rotate(124deg);
}

/* Hero — Detail pages */
.hero--detail {
	background: var(--color-light-grey);
	padding-block: 48px 64px;
}

.breadcrumb {
	font-size: 0.85rem;
	color: var(--color-body);
	margin-bottom: 24px;
}

.hero--detail .hero__heading {
	font-size: clamp(1.8rem, 3.5vw, 2.75rem);
	max-width: 700px;
	color: var(--color-black);
}

.hero__intro {
	max-width: 700px;
	color: var(--color-body);
}

.hero__contact-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 24px;
}

.hero__contact-label {
	font-weight: 600;
}

/* Section eyebrow label (small red uppercase kicker above H2s) */
.section-eyebrow {
	color: var(--color-red);
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 1.625rem;
	letter-spacing: 0.52px;
	text-transform: uppercase;
	margin-bottom: 20px;
	display: block;
}

/* Card grid — "Oplossingen" style: featured red card + plain cards, icon+arrow */
.card-grid {
	padding-block: 64px;
}

.card-grid__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.card-grid__heading {
	font-size: clamp(1.75rem, 3.6vw, 3.1875rem); /* 51px at design width */
	max-width: 760px;
	line-height: 1.12;
}

.card-grid__heading .accent {
	color: var(--color-red);
}

.card-grid__row {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 32px;
}

.card-grid--cols-2 .card-grid__row {
	grid-template-columns: repeat(2, 1fr);
}

.card-grid--cols-4 .card-grid__row {
	grid-template-columns: repeat(4, 1fr);
}

.card {
	background: var(--color-light-grey);
	color: var(--color-black);
	border-radius: var(--radius-card);
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 280px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* The red card in the Figma design is the HOVER state, not a permanent
   variant — every card looks the same by default and turns red on hover.
   "featured" can still force it permanently red if a design ever needs that. */
.card:hover,
.card--featured {
	background: var(--color-red);
	color: var(--color-white);
}

.card__top-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.card__icon img {
	width: 40px;
	height: 40px;
	display: block;
}

/* Icons/arrows are single-color source assets — force them white on hover
   regardless of their original color, since the design doesn't have
   separate white variants of every icon. */
.card:hover .card__icon img,
.card--featured .card__icon img {
	filter: brightness(0) invert(1);
}

.card__arrow img {
	width: 21px;
	height: 21px;
	display: block;
	filter: brightness(0);
	opacity: 0.6;
}

.card:hover .card__arrow img,
.card--featured .card__arrow img {
	filter: brightness(0) invert(1);
	opacity: 1;
}

.card__title {
	font-size: 2rem; /* 32px */
	font-family: var(--font-heading);
	margin: 20px 0 8px;
}

.card__desc {
	opacity: 0.6;
	font-size: 1.125rem; /* 18px, matches body */
	margin: 0;
}

.card:hover .card__desc,
.card--featured .card__desc {
	opacity: 0.8;
}

/* Help section */
.help-section {
	background: var(--color-light-grey);
	border-top: 5px solid var(--color-contrast);
	padding-block: 80px;
	position: relative;
	overflow: hidden;
}

.help-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.help-section__heading {
	font-size: clamp(1.75rem, 3.6vw, 3.1875rem); /* 51px */
	max-width: 600px;
	line-height: 1.12;
}

.help-section__accent {
	color: var(--color-red);
}

.help-section__buttons {
	display: flex;
	gap: 20px;
	margin-top: 24px;
}

.help-section__icons {
	display: flex;
	gap: 0;
	margin-top: 40px;
}

.help-section__icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	font-size: 0.95rem;
	opacity: 0.8;
	padding: 0 24px;
}

.help-section__icon-item:not(:last-child) {
	border-right: 1px solid var(--color-grey);
}

.help-section__icon {
	width: 26px;
	height: 26px;
}

.help-section__image img {
	width: 100%;
	border-radius: var(--radius-card);
	display: block;
}

.help-section__decor {
	position: absolute;
	right: -4%;
	top: 50%;
	transform: translateY(-50%) rotate(-6deg);
	width: 62%;
	max-width: 700px;
	height: auto;
	pointer-events: none;
}

.hero__decor {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: auto;
	max-width: 62%;
	object-fit: contain;
	object-position: right center;
	pointer-events: none;
}

/* Content section (detail pages) */
.content-section {
	padding-block: 56px;
}

.content-section--light {
	background: var(--color-light-grey);
}

.content-section__heading {
	font-size: 1.6rem;
	max-width: 900px;
}

.content-section__body {
	max-width: 900px;
	color: var(--color-body);
}

.content-section__list {
	max-width: 900px;
	padding-left: 20px;
}

/* About grid — "Wat je van ons mag verwachten": asymmetric bordered cards */
.about-grid {
	padding-block: 90px;
	background: var(--color-white);
}

.about-grid__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.about-grid__cell {
	border: 1px solid var(--color-grey);
	margin: -0.5px;
	padding: 20px;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 16px;
}

.about-grid__cell--photo {
	background-size: cover;
	background-position: center;
	justify-content: flex-end;
	align-items: flex-start;
}

.about-grid__cell-title {
	font-size: 2rem; /* 32px */
	font-family: var(--font-heading);
	margin: 0;
}

.about-grid__cell-desc {
	opacity: 0.6;
	font-size: 1.125rem;
	margin: 0;
}

/* CTA band */
.cta-band {
	padding-block: 90px;
	background: var(--color-red);
	color: var(--color-white);
}

.cta-band__heading {
	font-size: clamp(2rem, 3.6vw, 3.1875rem); /* 51px */
	max-width: 500px;
	line-height: 1.12;
}

.cta-band__heading .accent {
	color: var(--color-black);
}

.cta-band__buttons {
	display: flex;
	gap: 20px;
	margin-top: 24px;
}

.cta-band--default {
	text-align: left;
}

/* Contact form section */
.contact-form-section {
	padding-block: 64px;
}

.contact-form-section__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
}

.contact-form-section__hours {
	border-collapse: collapse;
}

.contact-form-section__hours td {
	padding: 4px 16px 4px 0;
}

/* Footer */
.site-footer {
	margin-top: 0;
}

.site-footer__top {
	padding: 80px 0 70px;
	border-bottom: 1px solid var(--color-white);
}

.site-footer__row {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
	gap: 32px;
}

.site-footer__col h3 {
	font-size: 1.1rem;
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer__links a {
	font-size: 0.95rem;
}

.site-footer__col p,
.site-footer__col a {
	font-size: 0.95rem;
}

.site-footer__bottom {
	padding: 50px 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.95rem;
}

.site-footer__legal-links {
	display: flex;
	gap: 30px;
}

.site-footer__legal-links a {
}

.site-footer__credit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.95rem;
}

/* Wide desktop containers: fluid beyond 1440px with generous page gutters. */
@media (min-width: 1441px) {
	.container {
		max-width: none;
		padding-inline: 120px;
	}
}

/* Desktop reusable hero height: viewport minus the 168px page chrome. */
@media (min-width: 901px) {
	.site-header {
		padding: 60px 0;
	}

	.hero--home {
		height: calc(100vh - 168px);
		min-height: 0;
	}
}

/* Responsive */
@media (max-width: 900px) {
	.hero--home {
		padding-block: 100px 80px;
		min-height: 600px;
	}

	.hero--home .hero__content {
		max-width: 72%;
	}

	.hero__shape {
		width: 145vw;
	}

	.card-grid__row,
	.card-grid--cols-4 .card-grid__row {
		grid-template-columns: repeat(2, 1fr);
	}

	.help-section__grid,
	.contact-form-section__grid,
	.about-grid__row {
		grid-template-columns: 1fr;
	}

	.site-footer__row {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.hero--home {
		padding-block: 80px 64px;
		min-height: 660px;
	}

	.hero--home .hero__content {
		max-width: 100%;
	}

	.hero__heading {
		letter-spacing: 0.025em;
	}

	.hero__subtext {
		font-size: 1.125rem;
		line-height: 1.55;
	}

	.hero__buttons {
		align-items: flex-start;
		flex-direction: column;
	}

	.hero--has-custom-image.hero--image-mask .hero__media {
		background-position: 58% center;
		-webkit-mask-size: auto 100%;
		mask-size: auto 100%;
		-webkit-mask-position: left top;
		mask-position: left top;
	}

	.hero--has-custom-image.hero--image-mask::after {
		display: block;
		background: linear-gradient(90deg, rgba(211, 49, 33, 0.94) 0%, rgba(211, 49, 33, 0.72) 58%, rgba(211, 49, 33, 0.18) 100%);
	}

	.hero__shape {
		width: 230vw;
		opacity: 0.5;
	}

	.card-grid__row,
	.card-grid--cols-4 .card-grid__row,
	.card-grid--cols-2 .card-grid__row {
		grid-template-columns: 1fr;
	}

	.site-header__nav {
		display: none;
	}

	.site-footer__row {
		grid-template-columns: 1fr;
	}
}


/* Header variants and responsive navigation. The first Hero block controls the
   parent modifier, so desktop chrome matches the chosen hero art direction. */
.site-header {
	position: relative;
	z-index: 20;
}

.site-header__brand,
.custom-logo-link {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}

.site-header__brand .site-header__logo-img,
.custom-logo-link .custom-logo {
	display: block;
	width: auto;
	height: 30px;
	max-width: 156px;
	object-fit: contain;
}

.site-header__contact,
.nav__contact,
.site-header__menu-toggle {
	flex: 0 0 auto;
}

.nav__contact,
.site-header__menu-toggle {
	display: none;
}

/* Masked-image heroes use the home treatment: an unobtrusive red header. */
.site-header--image-mask {
	background: var(--color-red);
}

/* Colour heroes retain the red ground but give the menu its pale pill. */
.site-header--color {
	background: var(--color-red);
}

.site-header--color .nav {
	background: rgba(255, 255, 255, 0.86);
}

.site-header--color .nav > .nav__item > .nav__link {
	color: var(--color-black);
	opacity: 1;
}

.site-header--color .nav .menu-item-has-children > a::after {
	color: var(--color-black);
}

/* Image heroes with the decorative overlay get the red menu treatment. */
.site-header--image-overlay {
	background: var(--color-red);
}

.site-header--image-overlay .nav {
	background: var(--color-red);
	border: 1px solid rgba(255, 255, 255, 0.26);
}

.site-header--image-overlay .nav > .nav__item > .nav__link {
	opacity: 1;
}

/* The hover bridge prevents the submenu closing while the cursor crosses over. */
.nav .menu-item-has-children {
	padding-bottom: 10px;
	margin-bottom: -10px;
}

.nav .menu-item-has-children::before {
	content: '';
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	height: 14px;
}

.nav .sub-menu {
	top: calc(100% + 8px);
	padding: 10px;
	background: rgba(211, 49, 33, 0.98);
	border: 0;
	border-radius: 18px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.nav .sub-menu a {
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--color-white);
	opacity: 1;
	transition: background-color 0.15s ease;
}

.nav .sub-menu a:hover,
.nav .sub-menu a:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	outline: none;
}

.site-header--color .nav .sub-menu {
	background: var(--color-white);
}

.site-header--color .nav .sub-menu a {
	color: var(--color-black);
}

.site-header--color .nav .sub-menu a:hover,
.site-header--color .nav .sub-menu a:focus-visible {
	background: var(--color-light-grey);
}

@media (max-width: 1100px) {
	body.nav-is-open {
		overflow: hidden;
	}

	.site-header {
		padding-block: 24px;
	}

	.site-header__inner {
		position: relative;
	}

	.site-header__contact {
		display: none;
	}

	.site-header__menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 10px 0;
		border: 0;
		background: transparent;
		color: var(--color-white);
		font: inherit;
		font-weight: 550;
		cursor: pointer;
	}

	.site-header__menu-toggle-icon {
		display: grid;
		gap: 5px;
		width: 25px;
	}

	.site-header__menu-toggle-icon i {
		display: block;
		width: 100%;
		height: 2px;
		background: currentColor;
		transition: transform 0.2s ease;
	}

	.site-header--color .site-header__menu-toggle {
		color: var(--color-black);
	}

	.site-header__menu-toggle[aria-expanded='true'] .site-header__menu-toggle-icon i:first-child {
		transform: translateY(3.5px) rotate(45deg);
	}

	.site-header__menu-toggle[aria-expanded='true'] .site-header__menu-toggle-icon i:last-child {
		transform: translateY(-3.5px) rotate(-45deg);
	}

	.nav {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 30;
		overflow-y: auto;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		margin: 0;
		padding: 112px 32px 36px;
		border-radius: 0;
		background: var(--color-red) !important;
	}

	.nav.nav--is-open {
		display: flex;
	}

	.nav > .nav__item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	}

	.nav > .nav__item > .nav__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 0;
		color: var(--color-white) !important;
		opacity: 1;
		font-family: var(--font-heading);
		font-size: clamp(2rem, 8vw, 3.25rem);
		font-weight: 650;
		line-height: 1.05;
	}

	.nav .menu-item-has-children {
		padding: 0;
		margin: 0;
	}

	.nav .menu-item-has-children::before {
		display: none;
	}

	.nav .menu-item-has-children > a::after {
		transform: rotate(0deg);
	}

	.nav .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		margin: 0 0 16px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent !important;
		box-shadow: none;
		transform: none;
	}

	.nav .sub-menu a {
		padding: 7px 0;
		color: rgba(255, 255, 255, 0.82) !important;
		font-size: 1.125rem;
	}

	.nav .sub-menu a:hover,
	.nav .sub-menu a:focus-visible {
		background: transparent;
		color: var(--color-contrast) !important;
	}

	.nav__contact {
		display: inline-flex;
		align-self: flex-start;
		margin-top: 32px;
	}
}

@media (max-width: 600px) {
	.site-header__brand .site-header__logo-img,
	.custom-logo-link .custom-logo {
		height: 26px;
		max-width: 140px;
	}

	.site-header__menu-toggle-label {
		display: none;
	}

	.nav {
		padding-inline: 20px;
	}
}


.site-header__logo-svg {
	display: block;
	width: auto;
	height: 30px;
	max-width: 156px;
}

@media (max-width: 600px) {
	.site-header__logo-svg {
		height: 26px;
		max-width: 140px;
	}
}


/* Image + SVG-overlay hero: the image begins behind the transparent header. */
.site-header--image-overlay {
	background: transparent;
	z-index: 99;
}

.site-header--image-overlay .site-header__inner,
.site-header--image-overlay .nav,
.site-header--image-overlay .site-header__contact,
.site-header--image-overlay .site-header__menu-toggle {
	position: relative;
	z-index: 99;
}

.hero--background-image.hero--image-overlay .hero__shape {
	right: -38%;
	bottom: -12%;
}

@media (min-width: 901px) {
	.site-header--image-overlay + .site-main .hero--background-image.hero--image-overlay {
		margin-top: -168px;
		height: 100vh;
	}
}


/* Shared desktop submenu: independent of the hero/header variation. */
@media (min-width: 1101px) {
	.nav .menu-item-has-children:hover > .nav__link,
	.nav .menu-item-has-children:focus-within > .nav__link {
		color: var(--color-white);
		font-weight: 700;
		opacity: 1;
	}

	.nav .sub-menu,
	.site-header--color .nav .sub-menu {
		top: calc(100% + 14px);
		min-width: 440px;
		margin: 0;
		padding: 24px 48px;
		background: var(--color-light-grey);
		border: 0;
		border-radius: 24px;
		box-shadow: none;
	}

	.nav .sub-menu li + li {
		border-top: 1px solid var(--color-grey);
	}

	.nav .sub-menu a,
	.site-header--color .nav .sub-menu a {
		display: block;
		padding: 28px 0;
		border-radius: 0;
		color: rgba(0, 0, 0, 0.7);
		font-size: 2rem;
		font-weight: 400;
		line-height: 1.15;
		opacity: 1;
		transition: color 0.15s ease, font-weight 0.15s ease;
	}

	.nav .sub-menu a:hover,
	.nav .sub-menu a:focus-visible,
	.site-header--color .nav .sub-menu a:hover,
	.site-header--color .nav .sub-menu a:focus-visible {
		background: transparent;
		color: var(--color-red);
		font-weight: 700;
	}
}


/* Refined submenu scale and shared dropdown icon. */
.nav .menu-item-has-children > a::after {
	content: '';
	width: 14px;
	height: 9px;
	margin-left: 8px;
	background: url('https://compu-tech.be/wp-content/uploads/2026/09/Dropdown-Icon.svg') center / contain no-repeat;
	vertical-align: middle;
}

@media (min-width: 1101px) {
	.nav .sub-menu,
	.site-header--color .nav .sub-menu {
		min-width: 320px;
		padding: 16px 28px;
		border-radius: 18px;
	}

	.nav .sub-menu a,
	.site-header--color .nav .sub-menu a {
		padding: 18px 0;
		font-size: 1.5rem;
	}
}

.nav__popup-header,
.nav__close,
.nav .submenu-toggle {
	display: none;
}

@media (max-width: 1100px) {
	.nav__popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: -78px 0 44px;
	}

	.nav__popup-brand,
	.nav__popup-logo {
		display: block;
		width: auto;
		height: 30px;
		max-width: 156px;
	}

	.nav__close {
		display: grid;
		place-items: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.nav__close span {
		grid-area: 1 / 1;
		display: block;
		width: 27px;
		height: 2px;
		background: var(--color-white);
	}

	.nav__close span:first-child {
		transform: rotate(45deg);
	}

	.nav__close span:last-child {
		transform: rotate(-45deg);
	}

	.nav .menu-item-has-children > .nav__link::after {
		display: none;
	}

	.nav .menu-item-has-children {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.nav .menu-item-has-children > .sub-menu {
		display: none;
		grid-column: 1 / -1;
	}

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

	.nav .submenu-toggle {
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		background: url('https://compu-tech.be/wp-content/uploads/2026/09/Dropdown-Icon.svg') center / 16px auto no-repeat;
		filter: brightness(0) invert(1);
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.nav .submenu-toggle[aria-expanded='true'] {
		transform: rotate(180deg);
	}

	.nav .menu-item-has-children > .nav__link {
		grid-column: 1;
	}

	.nav .sub-menu a,
	.site-header--color .nav .sub-menu a {
		font-size: 1.125rem;
	}
}


/* Compact, content-sized desktop dropdown; hover emphasis without reflow. */
@media (min-width: 1101px) {
	.nav .sub-menu,
	.site-header--color .nav .sub-menu {
		min-width: unset;
		padding: 20px;
	}

	.nav .sub-menu a,
	.site-header--color .nav .sub-menu a {
		padding: 20px 0;
		font-size: 18px;
		font-weight: 400;
		text-shadow: none;
		transition: color 0.18s ease, text-shadow 0.18s ease;
	}

	.nav .menu-item-has-children:hover > .nav__link,
	.nav .menu-item-has-children:focus-within > .nav__link,
	.nav .sub-menu a:hover,
	.nav .sub-menu a:focus-visible,
	.site-header--color .nav .sub-menu a:hover,
	.site-header--color .nav .sub-menu a:focus-visible {
		font-weight: 400;
		text-shadow: 0.25px 0 currentColor, -0.25px 0 currentColor;
	}
}


@media (min-width: 1101px) {
	.nav .sub-menu li:first-child > a {
		padding-top: 0;
	}

	.nav .sub-menu li:last-child > a {
		padding-bottom: 0;
	}
}


.site-header--color .nav {
	background: rgba(255, 255, 255, 0.2);
}

.site-header--color .nav > .nav__item > .nav__link,
.site-header--color .nav .menu-item-has-children > a::after {
	color: var(--color-white);
}


.site-header--image-overlay .nav {
	border: 0;
}


@media (max-width: 1100px) {
	/* The popup uses the same 24px header rhythm as the compact site header. */
	.nav {
		padding: 24px 20px 36px;
	}

	.nav__popup-header {
		margin: 0 0 44px;
		min-height: 42px;
	}

	.nav__popup-brand,
	.nav__popup-brand .site-header__logo-img,
	.nav__contact {
		opacity: 1;
	}

	/* Mobile state is controlled only by the submenu button, not hover/focus. */
	.nav .menu-item-has-children:hover > .sub-menu,
	.nav .menu-item-has-children:focus-within > .sub-menu {
		display: none;
	}

	.nav .menu-item-has-children.submenu-is-open > .sub-menu,
	.nav .menu-item-has-children.submenu-is-open:hover > .sub-menu,
	.nav .menu-item-has-children.submenu-is-open:focus-within > .sub-menu {
		display: block;
	}

	.nav__close span {
		transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
	}

	.nav.nav--is-open .nav__close span:first-child {
		animation: computech-close-first 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.nav.nav--is-open .nav__close span:last-child {
		animation: computech-close-last 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

@keyframes computech-close-first {
	from { transform: translateY(8px) rotate(0deg); opacity: 0; }
	to { transform: translateY(0) rotate(45deg); opacity: 1; }
}

@keyframes computech-close-last {
	from { transform: translateY(-8px) rotate(0deg); opacity: 0; }
	to { transform: translateY(0) rotate(-45deg); opacity: 1; }
}


@media (max-width: 1100px) {
	/* Match the visible 30px logo row of the mobile site header exactly. */
	.nav__popup-header {
		height: 30px;
		min-height: 0;
	}

	.nav__popup-brand,
	.nav__popup-logo {
		height: 30px;
		max-width: 156px;
	}

	.site-header__inner,
	.nav__popup-header,
	.site-header__menu-toggle,
	.nav__close {
		touch-action: manipulation;
	}

	.site-header__menu-toggle,
	.nav__close {
		width: 30px;
		height: 30px;
		min-width: 30px;
		flex: 0 0 30px;
		padding: 0;
		box-sizing: border-box;
		-webkit-tap-highlight-color: transparent;
	}

	.site-header__menu-toggle {
		justify-content: center;
	}

	.site-header__menu-toggle-icon {
		width: 25px;
		height: 9px;
		flex: 0 0 25px;
		align-content: center;
	}

	.nav__close span {
		width: 25px;
	}
}


@media (max-width: 900px) {
	.site-header--image-overlay + .site-main .hero--background-image.hero--image-overlay {
		margin-top: -100px;
	}
}

@media (max-width: 1100px) {
	.nav .nav__popup-brand,
	.nav .nav__popup-brand .site-header__popup-logo,
	.nav .nav__popup-brand .site-header__logo-img {
		opacity: 1 !important;
	}

	.nav .nav__contact {
		background: var(--color-contrast);
		color: var(--color-black) !important;
		font-weight: 550;
		opacity: 1 !important;
	}
}


@media (max-width: 1100px) {
	/* Reuse the exact site-header SVG box: no independent popup scaling. */
	.nav__popup-brand {
		display: flex;
		align-items: center;
		height: 30px;
		width: auto;
	}

	.nav__popup-brand .site-header__logo-svg {
		display: block;
		width: auto;
		height: 30px;
		max-width: 156px;
		opacity: 1 !important;
	}

	/* Keep the popup opaque and above the transparent image-overlay header. */
	.site-header--image-overlay .nav.nav--is-open {
		background: var(--color-red) !important;
		z-index: 120;
	}
}


/* The image-overlay header sets its desktop nav relative; reset that only
   while its mobile popup is open so it covers the whole viewport. */
@media (max-width: 1100px) {
	.site-header--image-overlay .nav.nav--is-open {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw;
		height: 100dvh;
	}
}


@media (max-width: 1100px) {
	.nav__popup-header {
		height: 30px;
		min-height: 30px;
	}

	.nav__popup-brand {
		height: 26px;
	}

	.nav__popup-brand .site-header__logo-svg {
		width: 135.2px;
		height: 26px;
		max-width: none;
	}
}


/* Reusable hero entrance: shared by colour, masked-image and image-overlay variants. */
@keyframes computech-hero-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes computech-hero-artwork {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0) scale(0.99);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

.hero--home .hero__content > * {
	opacity: 0;
	animation: computech-hero-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
	will-change: transform, opacity;
}

.hero--home .hero__heading {
	animation-delay: 0.08s;
}

.hero--home .hero__subtext {
	animation-delay: 0.18s;
}

.hero--home .hero__buttons {
	animation-delay: 0.28s;
}

.hero--home .hero__media,
.hero--home .hero__shape {
	animation: computech-hero-artwork 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 0.04s;
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.hero--home .hero__content > *,
	.hero--home .hero__media,
	.hero--home .hero__shape {
		opacity: 1;
		animation: none;
		transform: none;
	}
}


@keyframes computech-hero-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Shapes retain their configured rotation/position; only their opacity enters. */
.hero--home .hero__shape {
	animation: computech-hero-fade 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 0.04s;
	will-change: opacity;
}


/* GSAP owns hero motion when JavaScript is available; retain visible static content
   as the no-script fallback. */
.hero--home .hero__content > *,
.hero--home .hero__media,
.hero--home .hero__shape {
	animation: none;
	opacity: 1;
	will-change: auto;
}


/* Active navigation state across every header/menu variation. */
.nav .current-menu-item > .nav__link,
.nav .current-menu-parent > .nav__link,
.nav .current-menu-ancestor > .nav__link,
.nav .sub-menu .current-menu-item > a {
	font-weight: 550;
}


.nav .current-menu-item > .nav__link:hover,
.nav .current-menu-item > .nav__link:focus-visible,
.nav .current-menu-parent > .nav__link:hover,
.nav .current-menu-parent > .nav__link:focus-visible,
.nav .current-menu-ancestor > .nav__link:hover,
.nav .current-menu-ancestor > .nav__link:focus-visible,
.nav .sub-menu .current-menu-item > a:hover,
.nav .sub-menu .current-menu-item > a:focus-visible {
	font-weight: 550;
}


@media (min-width: 1101px) {
	.nav .menu-item-has-children:not(.current-menu-item):not(.current-menu-parent):not(.current-menu-ancestor):hover > .nav__link,
	.nav .menu-item-has-children:not(.current-menu-item):not(.current-menu-parent):not(.current-menu-ancestor):focus-within > .nav__link {
		font-weight: 400 !important;
	}

	.nav .current-menu-item > .nav__link:hover,
	.nav .current-menu-item > .nav__link:focus-visible,
	.nav .current-menu-parent > .nav__link:hover,
	.nav .current-menu-parent > .nav__link:focus-visible,
	.nav .current-menu-ancestor > .nav__link:hover,
	.nav .current-menu-ancestor > .nav__link:focus-visible,
	.nav .sub-menu .current-menu-item > a:hover,
	.nav .sub-menu .current-menu-item > a:focus-visible {
		font-weight: 550 !important;
		text-shadow: none;
	}
}

/* Navigation stability: hover must never change a label's weight or create a
   simulated-weight shadow. The current section alone uses the 550 state. */
@media (min-width: 1101px) {
	.nav > .nav__item > .nav__link,
	.nav > .nav__item > .nav__link:hover,
	.nav > .nav__item > .nav__link:focus-visible {
		font-weight: 400 !important;
		text-shadow: none !important;
		transition: color 0.18s ease, opacity 0.18s ease !important;
	}

	.nav > .nav__item.current-menu-item > .nav__link,
	.nav > .nav__item.current-menu-parent > .nav__link,
	.nav > .nav__item.current-menu-ancestor > .nav__link,
	.nav > .nav__item.current-menu-item > .nav__link:hover,
	.nav > .nav__item.current-menu-parent > .nav__link:hover,
	.nav > .nav__item.current-menu-ancestor > .nav__link:hover,
	.nav > .nav__item.current-menu-item > .nav__link:focus-visible,
	.nav > .nav__item.current-menu-parent > .nav__link:focus-visible,
	.nav > .nav__item.current-menu-ancestor > .nav__link:focus-visible {
		font-weight: 550 !important;
		text-shadow: none !important;
	}
}

/* Footer: shared five-column desktop grid and the supplied two-column mobile layout. */
.site-footer {
}

.site-footer__top {
	padding: 80px 0 72px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.site-footer__row {
	grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 72px);
}

.site-footer__col--brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.site-footer__mark {
	display: block;
	width: 108px;
	height: 44px;
	margin: 0 0 118px;
	object-fit: contain;
	object-position: left center;
}

.site-footer__logo-img {
	display: block;
	width: min(164px, 100%);
	height: auto;
	margin: 0 0 10px;
	filter: none;
}

.site-footer__col--brand > p {
	margin: 0;
}

.site-footer__col h3 {
	margin: 0 0 16px;
	font-size: 1.1rem;
	font-weight: 650;
	line-height: 1.2;
}

.site-footer__links {
	gap: 14px;
}

.site-footer__links a,
.site-footer__col p,
.site-footer__col a {
	font-size: 1rem;
	line-height: 1.45;
}

.site-footer__col p {
	margin: 0 0 14px;
}

.site-footer__bottom {
	padding: 44px 0 72px;
	gap: 20px;
}

.site-footer__legal,
.site-footer__credit {
	font-size: 1rem;
}

.site-footer__credit > span a {
}

.site-footer__partners {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.site-footer__partners a {
	display: grid;
	place-items: center;
	line-height: 1;
}

.site-footer__partners img {
	display: block;
	width: auto;
	height: 14px;
}

.site-footer__partners a:first-child img {
	width: 20px;
	height: auto;
}

@media (max-width: 900px) {
	.site-footer .container {
		padding-right: 20px;
		padding-left: 20px;
	}

	.site-footer__top {
		padding: 56px 0 44px;
	}

	.site-footer__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 42px 24px;
	}

	.site-footer__col--brand {
		grid-column: 1 / -1;
	}

	.site-footer__mark {
		width: 82px;
		height: auto;
		margin-bottom: 40px;
	}

	.site-footer__logo-img {
		width: 148px;
	}

	.site-footer__legal,
	.site-footer__credit {
		align-items: flex-start;
		flex-direction: column;
		gap: 20px;
	}

	.site-footer__legal-links {
		flex-wrap: wrap;
		gap: 12px 22px;
	}

	.site-footer__partners {
		margin-left: 0;
	}
}

@media (max-width: 900px) {
	.site-footer__credit {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		gap: 12px;
	}

	.site-footer__partners {
		margin-left: auto;
		flex: 0 0 auto;
	}
}

/* Footer has its own full-width desktop composition, so retain the intended
   page gutters even when the global container becomes fluid. */
@media (min-width: 901px) {
	.site-footer > .container {
		max-width: none;
		padding-right: clamp(40px, 8.333vw, 120px);
		padding-left: clamp(40px, 8.333vw, 120px);
	}
}

/* Desktop footer alignment: each information column shares the same four
   content rows; the brand lockup occupies those final two rows. */
@media (min-width: 901px) {
	.site-footer__row {
		align-items: start;
	}

	.site-footer__col:not(.site-footer__col--brand) {
		display: grid;
		grid-template-rows: 30px repeat(4, 56px);
		align-content: start;
	}

	.site-footer__col:not(.site-footer__col--brand) > h3 {
		grid-row: 1;
		margin: 0;
	}

	.site-footer__col:not(.site-footer__col--brand) > .site-footer__links {
		display: contents;
	}

	.site-footer__col:not(.site-footer__col--brand) > .site-footer__links > li,
	.site-footer__col:not(.site-footer__col--brand) > p {
		align-self: start;
		margin: 0;
	}

	.site-footer__col--brand {
		display: grid;
		grid-template-rows: 30px repeat(4, 56px);
		align-content: start;
	}

	.site-footer__mark {
		grid-row: 1;
		width: 108px;
		height: 44px;
		margin: 0;
	}

	.site-footer__logo-img {
		grid-row: 4;
		align-self: start;
		margin: 0;
	}

	.site-footer__col--brand > p {
		grid-row: 5;
		align-self: start;
		margin: 0;
	}

	.site-footer__links a,
	.site-footer__col a,
	.site-footer__legal-links a,
	.site-footer__credit a {
	}

	.site-footer__col p,
	.site-footer__links a {
		line-height: 1.35;
	}

	.site-footer__col:nth-child(4) > p {
		line-height: 1.16;
	}
}

@media (min-width: 901px) {
	.site-footer__col:not(.site-footer__col--brand),
	.site-footer__col--brand {
		grid-template-rows: repeat(5, 56px);
	}
}

/* Compact desktop footer rhythm and one consistent treatment for text links. */
@media (min-width: 901px) {
	.site-footer__col:not(.site-footer__col--brand),
	.site-footer__col--brand {
		grid-template-rows: repeat(5, 28px);
	}

	.site-footer__logo-img {
		width: 115px;
	}

	.site-footer a:not(.site-footer__partners a) {
	}
}

/* Final footer type rhythm and link treatment. */
.site-footer__col p,
.site-footer__col a,
.site-footer__links a,
.site-footer__legal,
.site-footer__credit {
}

.site-footer a:not(.site-footer__partners a) {
}

.site-footer__legal-links a {
}

@media (min-width: 901px) {
	.site-footer__col:not(.site-footer__col--brand),
	.site-footer__col--brand {
		grid-template-rows: repeat(5, 40px);
	}

	.site-footer__col p,
	.site-footer__links a {
		line-height: 24px;
	}
}

@media (min-width: 901px) {
	.site-footer a:not(.site-footer__partners a) {
	}

	.site-footer__legal-links a {
	}
}

/* Canonical footer palette: use rgba text colour rather than nested opacity. */
.site-footer {
	background: var(--color-light-grey);
	color: var(--color-black);
}

.site-footer__col h3 {
	color: var(--color-black);
	opacity: 1;
}

.site-footer__col p,
.site-footer__col a,
.site-footer__links a,
.site-footer__legal,
.site-footer__legal > span,
.site-footer__credit,
.site-footer__credit > span,
.site-footer__credit > span a {
	color: var(--color-body);
	opacity: 1;
}

.site-footer a {
	text-decoration: none;
	text-decoration-line: none;
}

.site-footer__legal-links a {
	color: var(--color-body);
	opacity: 1;
	text-decoration: underline;
	text-decoration-line: underline;
}

.site-footer__partners,
.site-footer__partners a,
.site-footer__partners img {
	opacity: 1;
}

/* Footer link interaction. */
.site-footer a:not(.site-footer__partners a) {
	transition: color 0.22s ease;
}

.site-footer a:not(.site-footer__partners a):hover,
.site-footer a:not(.site-footer__partners a):focus-visible {
	color: var(--color-red);
}

/* Oplossingen block */
.solutions-block {
	padding: clamp(88px, 9vw, 160px) 0;
	background: var(--color-white);
}

.solutions-block__intro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.solutions-block__intro-copy {
	max-width: 780px;
}

.solutions-block__subtitle {
	margin: 0 0 24px;
	color: var(--color-red);
	font-size: clamp(1.1rem, 1.8vw, 1.625rem);
	font-weight: 550;
	line-height: 1.1;
	text-transform: uppercase;
}

.solutions-block__title {
	margin: 0;
	font-size: clamp(2.5rem, 4.3vw, 4.75rem);
	font-weight: 650;
	line-height: 1.05;
	letter-spacing: -0.04em;
}

.solutions-block__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin-top: clamp(48px, 6vw, 96px);
}

.solutions-block__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1.1 / 1;
	padding: 28px;
	border-radius: 28px;
	background: var(--color-light-grey);
	color: var(--color-black);
	transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s ease;
}

.solutions-block__card:hover {
	background: var(--color-red);
	color: var(--color-white);
	transform: none;
}

.solutions-block__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}

.solutions-block__icon,
.solutions-block__arrow {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.solutions-block__icon img {
	display: block;
	width: 58px;
	height: 58px;
	object-fit: contain;
	transition: filter 0.28s ease;
}

.solutions-block__arrow img {
	display: block;
	width: 28px;
	height: 28px;
	opacity: 0.18;
	transition: filter 0.28s ease, opacity 0.28s ease;
}

.solutions-block__card:hover .solutions-block__icon img,
.solutions-block__card:hover .solutions-block__arrow img {
	filter: brightness(0) invert(1);
	opacity: 1;
}

.solutions-block__card-copy h3 {
	margin: 0;
	font-size: clamp(1.65rem, 2.1vw, 2.5rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.solutions-block__card-copy p {
	margin: 20px 0 0;
	color: rgba(0, 0, 0, 0.6);
	font-size: clamp(1rem, 1.25vw, 1.45rem);
	line-height: 1.25;
	transition: color 0.28s ease;
}

.solutions-block__card:hover .solutions-block__card-copy p {
	color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1100px) {
	.solutions-block__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.solutions-block__card {
		min-height: 300px;
	}
}

@media (max-width: 700px) {
	.solutions-block {
		padding: 72px 0;
	}

	.solutions-block__intro {
		align-items: flex-start;
		flex-direction: column;
	}

	.solutions-block__intro .btn {
		margin-top: 8px;
	}

	.solutions-block__grid {
		grid-template-columns: 1fr;
		margin-top: 48px;
	}

	.solutions-block__card {
		min-height: 280px;
		padding: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.solutions-block__card,
	.solutions-block__icon img,
	.solutions-block__arrow img,
	.solutions-block__card-copy p {
		transition: none;
	}
}

.solutions-block__title-accent {
	color: var(--color-red);
}

/* Oplossingen card icon states. Source icons are used as monochrome glyphs so
   the card state, not the uploaded asset, controls the brand treatment. */
.solutions-block__card {
	color: var(--color-black);
	text-decoration: none;
}

.solutions-block__icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--color-red);
	transition: background-color 0.28s ease;
}

.solutions-block__icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.solutions-block__arrow {
	width: 28px;
	height: 28px;
	background: #cdcdcd;
	-webkit-mask: url("../images/icon-arrow-black.svg") center / contain no-repeat;
	mask: url("../images/icon-arrow-black.svg") center / contain no-repeat;
	transition: background-color 0.28s ease;
}

.solutions-block__arrow img {
	display: none;
}

.solutions-block__card:hover {
	color: var(--color-white);
}

.solutions-block__card:hover .solutions-block__icon {
	background: var(--color-white);
}

.solutions-block__card:hover .solutions-block__icon img {
	filter: brightness(0) saturate(100%) invert(20%) sepia(84%) saturate(3078%) hue-rotate(350deg) brightness(88%) contrast(88%);
}

.solutions-block__card:hover .solutions-block__arrow {
	background: var(--color-white);
}

/* Oplossingen typography: aligned below the 74px desktop hero H1 scale. */
.solutions-block__subtitle {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 1.8vw, 1.625rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.52px;
}

.solutions-block__title {
	font-size: clamp(1.875rem, 7vw, 2rem);
	font-weight: 650;
	line-height: 1.1;
	letter-spacing: 0;
}

.solutions-block__card-copy h3 {
	font-size: clamp(2rem, 2.5vw, 2.5rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.04em;
}

.solutions-block__card-copy p {
	font-size: clamp(1.125rem, 1.67vw, 1.5rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* Oplossingen: supplied Figma desktop type specifications. */
@media (min-width: 701px) {
	.solutions-block__subtitle {
		font-size: 26px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0.52px;
	}

	.solutions-block__title {
		font-size: 51px;
		font-style: normal;
		font-weight: 800;
		line-height: 57px;
		letter-spacing: 1.53px;
	}

	.solutions-block__card-copy h3 {
		font-size: 32px;
		font-style: normal;
		font-weight: 500;
		line-height: 32px;
		letter-spacing: 0.96px;
	}
}

/* Card subtitles intentionally inherit the global paragraph typography. */
.solutions-block__card-copy p {
	font-family: inherit;
	font-size: inherit;
	font-style: normal;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
}

/* Oplossingen card geometry. */
.solutions-block__card {
	padding: 20px;
}

.solutions-block__icon {
	width: 40px;
	height: 40px;
}

.solutions-block__icon img {
	width: 18px;
	height: 18px;
}

.solutions-block__arrow {
	width: 21px;
	height: 21px;
}

/* Shared Figma type scale for reusable section intros and solution-style cards. */
:root {
	--type-section-subtitle-size: 26px;
	--type-section-subtitle-weight: 500;
	--type-section-subtitle-tracking: 0.52px;
	--type-section-title-size: 51px;
	--type-section-title-weight: 800;
	--type-section-title-line-height: 57px;
	--type-section-title-tracking: 1.53px;
	--type-feature-card-title-size: 32px;
	--type-feature-card-title-weight: 500;
	--type-feature-card-title-line-height: 32px;
	--type-feature-card-title-tracking: 0.96px;
}

@media (min-width: 701px) {
	.solutions-block__subtitle {
		font-size: var(--type-section-subtitle-size);
		font-weight: var(--type-section-subtitle-weight);
		letter-spacing: var(--type-section-subtitle-tracking);
	}

	.solutions-block__title {
		font-size: var(--type-section-title-size);
		font-weight: var(--type-section-title-weight);
		line-height: var(--type-section-title-line-height);
		letter-spacing: var(--type-section-title-tracking);
	}

	.solutions-block__card-copy h3 {
		font-size: var(--type-feature-card-title-size);
		font-weight: var(--type-feature-card-title-weight);
		line-height: var(--type-feature-card-title-line-height);
		letter-spacing: var(--type-feature-card-title-tracking);
	}
}

/* Oplossingen card corner radius. */
.solutions-block__card {
	border-radius: 20px;
}

/* Help Section — reusable two-column treatment from Figma. */
.help-section {
	position: relative;
	overflow: hidden;
	padding: clamp(72px, 8vw, 128px) 0;
	background: var(--color-light-grey);
	border-top: 5px solid var(--color-contrast);
}

.help-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(40px, 7vw, 120px);
}

.help-section__content {
	position: relative;
	z-index: 1;
}

.help-section__heading {
	margin: 0;
	font-size: clamp(2.25rem, 3.54vw, 3.1875rem);
	font-weight: 800;
	line-height: 1.1176;
	letter-spacing: 1.53px;
}

.help-section__accent {
	color: var(--color-red);
}

.help-section__body {
	margin-top: 42px;
	color: var(--color-body);
}

.help-section__body p {
	margin: 0 0 22px;
}

.help-section__body p:last-child {
	margin-bottom: 0;
}

.help-section__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 56px;
}

.help-section__image {
	align-self: stretch;
	min-height: 620px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	-webkit-mask: url("https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat;
	mask: url("https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat;
}

.help-section--image-right .help-section__image {
	grid-column: 2;
	margin-right: -14vw;
	transform: rotate(180deg);
}

.help-section--image-left .help-section__image {
	grid-column: 1;
	grid-row: 1;
	margin-left: -14vw;
	transform: none;
}

.help-section--image-left .help-section__content {
	grid-column: 2;
	grid-row: 1;
}

.help-section__icon-boxes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 88px;
}

.help-section__icon-box {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 10px 20px;
	color: rgba(0, 0, 0, 0.7);
	font-size: 18px;
	line-height: 1.35;
	text-align: center;
}

.help-section__icon-box:not(:last-child) {
	border-right: 1px solid var(--color-grey);
}

.help-section__icon-box img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.help-section__text-boxes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 88px;
	border: 1px solid var(--color-grey);
	border-radius: 20px;
	overflow: hidden;
}

.help-section__text-box {
	display: flex;
	min-height: 360px;
	flex-direction: column;
	justify-content: space-between;
	padding: 32px 24px 26px;
}

.help-section__text-box + .help-section__text-box {
	border-left: 1px solid var(--color-grey);
}

.help-section__text-box h3 {
	margin: 0;
	font-size: 32px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.96px;
}

.help-section__text-box p {
	margin: 32px 0 0;
	color: var(--color-body);
	font-size: inherit;
	line-height: inherit;
}

@media (max-width: 900px) {
	.help-section__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.help-section__content,
	.help-section--image-left .help-section__content {
		grid-column: 1;
		grid-row: auto;
		max-width: none;
	}

	.help-section__image,
	.help-section--image-right .help-section__image,
	.help-section--image-left .help-section__image {
		grid-column: 1;
		grid-row: auto;
		min-height: min(110vw, 580px);
		margin: 0 -20px;
		transform: none;
	}

	.help-section--image-left .help-section__image {
		order: -1;
	}

	.help-section__icon-boxes {
		margin-top: 56px;
	}

	.help-section__text-boxes {
		margin-top: 56px;
	}
}

@media (max-width: 600px) {
	.help-section {
		padding: 64px 0;
	}

	.help-section__heading {
		font-size: 38px;
		line-height: 1.1;
		letter-spacing: 0.8px;
	}

	.help-section__body {
		margin-top: 28px;
	}

	.help-section__buttons {
		gap: 12px;
		margin-top: 34px;
	}

	.help-section__icon-boxes {
		grid-template-columns: minmax(0, 132px) 1fr;
		column-gap: 24px;
		row-gap: 28px;
	}

	.help-section__icon-box {
		padding: 8px 24px 8px 0;
		align-items: flex-start;
		text-align: left;
	}

	.help-section__icon-box:nth-child(2n) {
		border-right: 0;
		padding-right: 0;
	}

	.help-section__text-boxes {
		grid-template-columns: 1fr;
	}

	.help-section__text-box {
		min-height: 250px;
		padding: 24px 20px;
	}

	.help-section__text-box + .help-section__text-box {
		border-top: 1px solid var(--color-grey);
		border-left: 0;
	}
}

/* The Figma shape rotates independently; photo content remains upright. */
.help-section__image,
.help-section--image-right .help-section__image,
.help-section--image-left .help-section__image {
	position: relative;
	overflow: visible;
	background: none;
	-webkit-mask: none;
	mask: none;
	transform: none;
}

.help-section__image-mask {
	position: absolute;
	inset: 0;
	overflow: hidden;
	-webkit-mask: url("https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat;
	mask: url("https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat;
	transform: rotate(-58deg);
	transform-origin: center;
}

.help-section__image-art {
	position: absolute;
	inset: -55%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: rotate(58deg) scale(1.6);
	transform-origin: center;
}

@media (max-width: 900px) {
	.help-section__image-mask {
		inset: 4%;
	}

	.help-section__image-art {
		transform: rotate(58deg) scale(1.7);
	}
}

/* Figma image framing: retain the upright laptop composition within the rotated mask. */
.help-section__image-art {
	inset: -20%;
	background-position: 35% center;
	transform: rotate(58deg) scale(1.25);
}

@media (max-width: 900px) {
	.help-section__image-art {
		inset: -22%;
		transform: rotate(58deg) scale(1.3);
	}
}

/* Help Section Figma SVG-mask geometry. */
@media (min-width: 901px) {
	.help-section__image-mask {
		inset: auto;
		width: 1239.488px;
		height: 504.977px;
		aspect-ratio: 27 / 11;
		top: -315px;
		right: -472.847px;
		transform: rotate(-58.885deg);
	}

	.help-section__image-art {
		inset: -35%;
		transform: rotate(58.885deg) scale(1.35);
		background-position: 35% center;
	}
}

/* The Figma offsets are measured from the full Help Section canvas. */
@media (min-width: 901px) {
	.help-section--image-right .help-section__image {
		position: absolute;
		inset: 0;
		min-height: 0;
		margin: 0;
		pointer-events: none;
	}

	.help-section--image-right .help-section__content {
		grid-column: 1;
	}
}

/* Updated Help Section SVG-mask placement. */
@media (min-width: 901px) {
	.help-section__image-mask {
		top: -150px;
		right: -460.847px;
		transform: rotate(-75deg);
	}

	.help-section__image-art {
		transform: rotate(75deg) scale(1.35);
	}
}

/* Keep the counter-rotation exact while expanding its paint area to prevent seams. */
@media (min-width: 901px) {
	.help-section__image-art {
		inset: -60%;
		transform: rotate(75deg);
	}
}

/* Size the photo against the visible mask, not the expanded anti-seam canvas. */
@media (min-width: 901px) {
	.help-section__image-art {
		background-size: 70% auto;
		background-position: center;
	}
}


/* About Grid + CTA Band — Figma alignment, 2026-09-15 */
.about-grid {
	padding: clamp(88px, 8vw, 150px) 0;
	background: var(--color-white);
	overflow: hidden;
}
.about-grid__header {
	margin-bottom: clamp(64px, 7vw, 112px);
}
.about-grid__subtitle {
	margin: 0 0 34px;
	color: var(--color-red);
	font-family: var(--font-heading);
	font-size: 26px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: .52px;
	text-transform: uppercase;
}
.about-grid__heading {
	max-width: 620px;
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-heading);
	font-size: 51px;
	font-style: normal;
	font-weight: 800;
	line-height: 57px;
	letter-spacing: 1.53px;
}
.about-grid__heading .accent { color: var(--color-red); }
.about-grid__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(300px, auto);
	width: min(100%, 1320px);
}
.about-grid__cell {
	grid-column: var(--about-column);
	grid-row: var(--about-row);
	min-width: 0;
	min-height: 300px;
	margin: 0 -1px -1px 0;
	padding: 30px 24px;
	border: 1px solid var(--color-grey);
	background: var(--color-white);
	color: var(--color-black);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	text-decoration: none;
	transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.about-grid__cell--col-1 { --about-column: 1; border-radius: 20px 0 0 20px; }
.about-grid__cell--col-2 { --about-column: 2; border-radius: 20px 0 0 20px; }
.about-grid__cell--col-1 + .about-grid__cell--col-2,
.about-grid__cell--col-2 + .about-grid__cell--col-3 { border-radius: 0 20px 20px 0; }
.about-grid__cell--col-3 { --about-column: 3; border-radius: 0 20px 20px 0; }
a.about-grid__cell:hover,
a.about-grid__cell:focus-visible {
	z-index: 1;
	color: var(--color-red);
}
.about-grid__cell-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: .96px;
}
.about-grid__cell-desc {
	max-width: 420px;
	margin-top: auto;
	color: rgba(0,0,0,.6);
	font-size: 18px;
	line-height: 1.55;
}
.about-grid__cell-desc p { margin: 0; }
.about-grid__cell-link {
	align-self: flex-start;
	color: var(--color-red);
	font-weight: 550;
}
.about-grid__cell--image {
	position: relative;
	overflow: hidden;
	padding: 20px;
	background: var(--color-light-grey);
}
.about-grid__cell--image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about-grid__cell--image .btn {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	margin-top: auto;
}
.cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(76px, 6.5vw, 112px) 0;
	background: var(--color-red);
	color: var(--color-white);
	text-align: left;
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band__content { max-width: 560px; }
.cta-band__heading {
	max-width: 560px;
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 51px;
	font-weight: 800;
	line-height: 57px;
	letter-spacing: 1.53px;
}
.cta-band__heading .accent { color: var(--color-black); }
.cta-band__text {
	max-width: 470px;
	margin-top: 24px;
	color: var(--color-white);
	font-size: 18px;
	line-height: 1.55;
}
.cta-band__text p { margin: 0; }
.cta-band__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 34px;
}
.cta-band .btn--outline {
	border-color: var(--color-white);
	color: var(--color-white);
}
.cta-band__decor {
	position: absolute;
	z-index: 0;
	top: -62%;
	right: -12%;
	width: min(72vw, 1120px);
	height: auto;
	opacity: .12;
	pointer-events: none;
	user-select: none;
}
@media (max-width: 900px) {
	.about-grid { padding: 72px 0; }
	.about-grid__header { margin-bottom: 48px; }
	.about-grid__subtitle { margin-bottom: 22px; font-size: 20px; }
	.about-grid__heading,
	.cta-band__heading { font-size: clamp(30px, 8vw, 34px); line-height: 1.12; letter-spacing: .8px; }
	.about-grid__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.about-grid__cell,
	.about-grid__cell--col-1,
	.about-grid__cell--col-2,
	.about-grid__cell--col-3 {
		--about-column: 1;
		grid-column: 1;
		grid-row: auto !important;
		min-height: 260px;
		margin: 0 0 -1px;
		border-radius: 0;
	}
	.about-grid__cell:first-child { border-radius: 20px 20px 0 0; }
	.about-grid__cell:last-child { border-radius: 0 0 20px 20px; }
	.about-grid__cell:only-child { border-radius: 20px; }
	.about-grid__cell--image { min-height: 300px; }
	.cta-band { padding: 72px 0; }
	.cta-band__decor { top: -20%; right: -54%; width: 150vw; }
	.cta-band__buttons { gap: 14px; }
}

/* About Grid connected-corner correction */
@media (min-width: 901px) {
	.about-grid__cell--slot-1 {
		border-radius: 20px 0 0 20px;
	}
	.about-grid__cell--slot-2 {
		border-radius: 0 20px 0 0;
	}
	.about-grid__cell--slot-3 {
		border-radius: 20px 0 0 20px;
	}
	.about-grid__cell--slot-4 {
		border-radius: 0 20px 20px 0;
	}
}
@media (min-width:901px){
.about-grid__cell.about-grid__cell--slot-1{border-radius:20px 0 0 20px}
.about-grid__cell.about-grid__cell--slot-2{border-radius:0 20px 0 0}
.about-grid__cell.about-grid__cell--slot-3{border-radius:0 0 0 20px}
.about-grid__cell.about-grid__cell--slot-4{border-radius:0 20px 20px 0}
}
/* CTA decorative SVG — Figma dimensions */
.cta-band__decor {
	width: 1513.119px;
	height: 1449.671px;
	max-width: none;
	transform: rotate(60.447deg);
}

/* About Grid dynamic perimeter corners — supports unlimited rows */
@media (min-width:901px){
	.about-grid__cell[class*="has-corner-"]{border-radius:0}
	.about-grid__cell.has-corner-tl{border-top-left-radius:20px}
	.about-grid__cell.has-corner-tr{border-top-right-radius:20px}
	.about-grid__cell.has-corner-br{border-bottom-right-radius:20px}
	.about-grid__cell.has-corner-bl{border-bottom-left-radius:20px}
}

/* About Grid: definitive dynamic corners and shared container width */
.about-grid__grid {
	width: 100%;
	max-width: none;
}
@media (min-width:901px) {
	.about-grid__cell {
		border-radius: 0 !important;
	}
	.about-grid__cell.has-corner-tl {
		border-top-left-radius: 20px !important;
	}
	.about-grid__cell.has-corner-tr {
		border-top-right-radius: 20px !important;
	}
	.about-grid__cell.has-corner-br {
		border-bottom-right-radius: 20px !important;
	}
	.about-grid__cell.has-corner-bl {
		border-bottom-left-radius: 20px !important;
	}
}

/* Footer linked logo: the anchor is now the desktop grid item */
@media (min-width:901px) {
	.site-footer__brand-link {
		grid-row: 4;
		align-self: start;
		display: block;
		width: 115px;
		line-height: 0;
	}
	.site-footer__brand-link .site-footer__logo-img {
		grid-row: auto;
		width: 115px;
		height: auto;
		margin: 0;
	}
}

/* CTA decorative SVG — final placement */
.cta-band__decor {
	top: -117%;
	right: -28%;
	transform: rotate(-10deg);
	opacity: 1;
}

/* Mobile refinements: CTA artwork, Oplossingen rhythm, Help artwork */
@media (max-width: 900px) {
	.cta-band__decor {
		width: 135vw;
		height: auto;
		aspect-ratio: 1513.119 / 1449.671;
		top: -38%;
		right: -62%;
		transform: rotate(-10deg);
	}

	.solutions-block__grid {
		margin-top: 28px;
	}

	.help-section--image-right .help-section__image {
		position: relative;
		width: calc(100% + 120px);
		min-height: 420px;
		margin-right: -120px;
		margin-left: 0;
		justify-self: end;
		overflow: visible;
		transform: none;
	}

	.help-section--image-right .help-section__image-mask {
		inset: auto;
		top: 70px;
		right: -240px;
		width: 620px;
		height: 253px;
		transform: rotate(-75deg);
	}

	.help-section--image-right .help-section__image-art {
		inset: -60%;
		background-size: 70% auto;
		background-position: center;
		transform: rotate(75deg);
	}
}

@media (max-width: 480px) {
	.cta-band__decor {
		width: 125vw;
		top: -24%;
		right: -58%;
	}

	.help-section--image-right .help-section__image {
		width: calc(100% + 90px);
		min-height: 360px;
		margin-right: -90px;
	}

	.help-section--image-right .help-section__image-mask {
		top: 62px;
		right: -245px;
		width: 570px;
		height: 232px;
	}
}

/* Mobile refinement pass 2 */
@media (max-width: 900px) {
	.cta-band__decor {
		width: 145vw;
		top: -43%;
		right: -65%;
	}

	.solutions-block__intro {
		gap: 14px;
	}
	.solutions-block__intro .btn {
		margin-top: 24px;
	}
	.solutions-block__grid {
		margin-top: 18px;
	}

	.help-section--image-right .help-section__image-mask {
		right: -180px;
	}
}

@media (max-width: 480px) {
	.cta-band__decor {
		width: 135vw;
		top: -29%;
		right: -61%;
	}
	.help-section--image-right .help-section__image-mask {
		right: -190px;
	}
}

/* Help Section: mirror the left-side Figma composition and keep the photo artwork outside the content grid. */
@media (min-width: 901px) {
	.help-section--image-left .help-section__image {
		position: absolute;
		inset: 0;
		min-height: 0;
		margin: 0;
		pointer-events: none;
	}

	.help-section--image-left .help-section__image-mask {
		inset: auto;
		top: -150px;
		left: -460.847px;
		right: auto;
		width: 1239.488px;
		height: 504.977px;
		transform: rotate(-75deg);
	}

	.help-section--image-left .help-section__image-art {
		inset: -60%;
		background-size: 70% auto;
		background-position: center;
		transform: rotate(75deg);
	}
}

@media (max-width: 900px) {
	.help-section--image-left .help-section__image {
		position: relative;
		width: calc(100% + 120px);
		min-height: 420px;
		margin-left: -120px;
		margin-right: 0;
		justify-self: start;
		overflow: visible;
	}

	.help-section--image-left .help-section__image-mask {
		inset: auto;
		top: 70px;
		left: -180px;
		right: auto;
		width: 620px;
		height: 253px;
		transform: rotate(-75deg);
	}

	.help-section--image-left .help-section__image-art {
		inset: -60%;
		background-size: 70% auto;
		background-position: center;
		transform: rotate(75deg);
	}
}

@media (max-width: 480px) {
	.help-section--image-left .help-section__image {
		width: calc(100% + 90px);
		min-height: 360px;
		margin-left: -90px;
	}

	.help-section--image-left .help-section__image-mask {
		top: 62px;
		left: -190px;
		width: 570px;
		height: 232px;
	}
}

/* Mobile decorative SVG refinements: Winkel hero and CTA. */
@media (max-width: 900px) {
	.hero--background-color.hero--icon-bottom-right .hero__shape {
		width: 135vw;
		height: auto;
		max-width: none;
		right: -34vw;
		top: auto;
		bottom: -8%;
	}

	.cta-band__decor {
		width: 160vw;
		top: -55%;
		right: -70%;
	}
}

@media (max-width: 480px) {
	.hero--background-color.hero--icon-bottom-right .hero__shape {
		width: 140vw;
		right: -38vw;
		bottom: -5%;
	}

	.cta-band__decor {
		width: 150vw;
		top: -43%;
		right: -67%;
	}
}

/* Mobile CTA decoration: final vertical nudge. */
@media (max-width: 900px) {
	.cta-band__decor { top: calc(-55% - 15px); }
}
@media (max-width: 480px) {
	.cta-band__decor { top: calc(-43% - 15px); }
}

/* Help Section text-box grid: preserve the panel for odd item counts. */
@media (min-width: 901px) {
	.help-section__text-box + .help-section__text-box {
		border-left: 0;
	}

	.help-section__text-box:nth-child(even) {
		border-left: 1px solid var(--color-grey);
	}

	.help-section__text-box:nth-child(n + 3) {
		border-top: 1px solid var(--color-grey);
	}

	.help-section__text-box:nth-child(odd):last-child {
		grid-column: 1 / -1;
		border-left: 0;
	}
}

/* Card Grid — alternating Figma layout for Diensten and Oplossingen. */
.card-grid {
	padding-block: clamp(72px, 8vw, 140px);
}

.card-grid__intro {
	display: grid;
	gap: 28px;
	max-width: 760px;
}

.card-grid__heading {
	max-width: 760px;
	margin: 0;
	font-size: 51px;
	font-weight: 800;
	line-height: 57px;
	letter-spacing: 1.53px;
}

.card-grid__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-top: 0;
}

.card-grid__card {
	grid-column: var(--card-column);
	grid-row: var(--card-row);
	display: flex;
	min-width: 0;
	min-height: 300px;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px;
	border-radius: 20px;
	background: var(--color-light-grey);
	color: var(--color-black);
	text-decoration: none;
	transition: background-color .35s ease, color .35s ease, transform .35s ease;
}

.card-grid__card-title {
	margin: 0;
	font-size: 32px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: .96px;
}

.card-grid__card-text {
	margin-top: auto;
	padding-top: 40px;
	color: var(--color-body);
	font-size: inherit;
	line-height: inherit;
	transition: color .35s ease;
}

.card-grid__card-text p {
	margin: 0;
}

.card-grid__button {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	margin-top: 34px;
}

.card-grid__button img {
	width: 18px;
	height: 18px;
	transition: transform .3s ease;
}

.card-grid__card:hover,
.card-grid__card:focus-visible {
	background: var(--color-red);
	color: var(--color-white);
	transform: none;
}

.card-grid__card:hover .card-grid__card-text,
.card-grid__card:focus-visible .card-grid__card-text {
	color: rgba(255, 255, 255, .82);
}

.card-grid__card:hover .card-grid__button img,
.card-grid__card:focus-visible .card-grid__button img {
	transform: translate(2px, -2px);
}

@media (max-width: 900px) {
	.card-grid__heading {
		font-size: clamp(30px, 8vw, 34px);
		line-height: 1.14;
		letter-spacing: 0.02em;
	}

	.card-grid__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		margin-top: 48px;
	}

	.card-grid__card {
		grid-column: auto;
		grid-row: auto;
		min-height: 360px;
	}
}

@media (max-width: 600px) {
	.card-grid__intro {
		gap: 18px;
	}

	.card-grid__cards {
		grid-template-columns: 1fr;
		margin-top: 32px;
	}

	.card-grid__card {
		min-height: 330px;
		padding: 24px 20px;
	}
}

/* Card Grid buttons: consistent black 13px arrow in every state. */
.card-grid__button img {
	width: 13px;
	height: 13px;
	filter: brightness(0);
}

/* Optional Card Grid lime section border. */
.card-grid--border-top { border-top: 5px solid #D6EB12; }
.card-grid--border-bottom { border-bottom: 5px solid #D6EB12; }

/* About Grid: mobile cards form one continuous bordered stack. */
@media (max-width: 900px) {
	.about-grid__cell,
	.about-grid__cell[class*="has-corner-"] {
		border-radius: 0 !important;
	}

	.about-grid__cell:first-child {
		border-radius: 20px 20px 0 0 !important;
	}

	.about-grid__cell:last-child {
		border-radius: 0 0 20px 20px !important;
	}

	.about-grid__cell:only-child {
		border-radius: 20px !important;
	}
}

/* Partners — responsive, continuously scrolling logo carousel. */
.partners-block{overflow:hidden;padding-block:clamp(56px,6vw,96px);background:var(--color-light-grey)}
.partners-block--border-top{border-top:5px solid #D6EB12}.partners-block--border-bottom{border-bottom:5px solid #D6EB12}
.partners-block__viewport{width:100%;overflow:hidden}.partners-block__track{display:flex;width:max-content;animation:partners-marquee 28s linear infinite;will-change:transform}.partners-block__set{display:flex;gap:clamp(48px,7vw,128px);align-items:center;padding-right:clamp(48px,7vw,128px)}
.partners-block__item{display:grid;flex:0 0 clamp(150px,18vw,340px);place-items:center;min-height:92px;outline-offset:8px}.partners-block__item img{display:block;width:100%;max-width:100%;max-height:72px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s ease,opacity .25s ease,transform .25s ease}.partners-block__item:hover img,.partners-block__item:focus-visible img{filter:none;opacity:1;transform:scale(1.03)}.partners-block__track:has(.partners-block__item:hover),.partners-block__track:has(.partners-block__item:focus-visible){animation-play-state:paused}@keyframes partners-marquee{to{transform:translateX(-50%)}}
@media(max-width:900px){.partners-block__item{flex-basis:clamp(140px,28vw,240px)}}@media(max-width:600px){.partners-block{padding-block:48px}.partners-block__item{flex-basis:clamp(132px,46vw,190px);min-height:70px}.partners-block__item img{max-height:52px}}@media(prefers-reduced-motion:reduce){.partners-block__track{animation:none;width:100%;overflow-x:auto}.partners-block__set[aria-hidden="true"]{display:none}}

/* Partners: compact rhythm and consistent logo height. */
.partners-block__set {
	gap: clamp(40px, 4vw, 72px);
	padding-right: clamp(40px, 4vw, 72px);
}

.partners-block__item {
	flex-basis: clamp(160px, 17vw, 300px);
}

.partners-block__item img {
	width: 100%;
	height: 64px;
	max-height: none;
	object-fit: contain;
}

@media (max-width: 900px) {
	.partners-block__item { flex-basis: clamp(140px, 25vw, 210px); }
	.partners-block__item img { height: 56px; }
}

@media (max-width: 600px) {
	.partners-block__item { flex-basis: clamp(128px, 42vw, 175px); }
	.partners-block__item img { height: 46px; }
}



/* Voordelen block — reuses about-grid heading/typography; cards are
   independent rounded boxes with a staggered second column. Overrides
   below replace the earlier iteration's rules (voordelen-block scope). */
.voordelen-block {
	padding: clamp(96px, 9vw, 160px) 0 clamp(110px, 11vw, 190px);
}
.voordelen-block .about-grid__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 90px;
}
/* Let the grid fill the same width as every other about-grid section
   (min(100%,1320px) from the base rule) instead of a hardcoded cap. */
.voordelen-block .about-grid__grid {
	row-gap: 48px;
	column-gap: 0;
}
.voordelen__col {
	display: flex;
	flex-direction: column;
	gap: 40px;
	grid-column: var(--about-column);
	grid-row: var(--about-row);
	min-width: 0;
}
.voordelen-block .about-grid__cell {
	margin: 0;
	min-height: 0;
	justify-content: flex-start;
	gap: clamp(48px, 9vw, 120px);
}
/* Shared border: the anchor (first filled column) bleeds 1px into its
   stagger partner so the two cards don't render as a doubled line where
   they run side by side. */
.voordelen__col--anchor .about-grid__cell {
	margin-right: -1px;
}
/* Corners: every corner is rounded by default; only the facing pair
   between an anchor and its stagger partner is squared off. Matches
   the !important/specificity of about-grid's own desktop corner rules. */
@media (min-width: 901px) {
	.voordelen-block .about-grid__cell {
		border-radius: 20px !important;
	}
	.voordelen-block .about-grid__cell.voordelen__cell--square-br {
		border-bottom-right-radius: 0 !important;
	}
	.voordelen-block .about-grid__cell.voordelen__cell--square-tl {
		border-top-left-radius: 0 !important;
	}
}
.voordelen__col--slot-2,
.voordelen__col--slot-4 {
	margin-top: clamp(120px, 15vw, 210px);
}
.voordelen__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
@media (max-width: 900px) {
	.voordelen-block {
		padding: 64px 0 72px;
	}
	.voordelen-block .about-grid__header {
		margin-bottom: 48px;
	}
	.voordelen-block .about-grid__grid {
		grid-template-columns: 1fr;
		row-gap: 0;
	}
	/* Unwrap the column wrapper so the card and the buttons become direct
	   grid items — lets the buttons be reordered to the very end (after
	   every card) independently of which card they're nested under. */
	.voordelen__col {
		display: contents;
	}
	.voordelen-block .about-grid__cell {
		grid-column: 1;
		margin: 0 0 24px;
		border-radius: 20px !important;
	}
	.voordelen__buttons {
		grid-column: 1;
		order: 999;
		margin-bottom: 24px;
	}
}

/* Text Block with Image — 60/40 Figma composition. */
.text-image-block {
  position: relative;
  overflow: clip;
  padding-block: clamp(88px, 9vw, 156px);
}
.text-image-block--bg-white { background: var(--color-white); }
.text-image-block--bg-light-grey { background: var(--color-light-grey); }
.text-image-block--border-top { border-top: 5px solid var(--color-contrast); }
.text-image-block--border-bottom { border-bottom: 5px solid var(--color-contrast); }

.text-image-block__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
  align-items: center;
  min-height: 470px;
}
.text-image-block__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.text-image-block__title {
  max-width: 680px;
  margin: 0;
  color: var(--color-black);
  font-size: 51px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 1.53px;
}
.text-image-block__title .accent { color: var(--color-red); }
.text-image-block__body {
  max-width: 800px;
  margin-top: 52px;
  color: var(--color-body);
}
.text-image-block__body > :first-child { margin-top: 0; }
.text-image-block__body > :last-child { margin-bottom: 0; }
.text-image-block__body ul,
.text-image-block__body ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 30px;
}
.text-image-block__body li::marker { color: var(--color-red); }
.text-image-block__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}
.text-image-block__visual {
  position: absolute;
  z-index: 0;
  width: min(60vw, 970px);
  height: min(37vw, 600px);
  pointer-events: none;
}
.text-image-block__mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url("https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat;
  mask: url("https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat;
}
.text-image-block__art {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.text-image-block--image-right .text-image-block__visual {
  top: -190px;
  right: min(-24vw, -280px);
}
.text-image-block--image-left .text-image-block__visual {
  bottom: -250px;
  left: min(-24vw, -280px);
}
.text-image-block--image-left .text-image-block__content {
  grid-column: 2;
  margin-left: auto;
}
.text-image-block--image-left .text-image-block__visual {
  transform: rotate(180deg);
}
.text-image-block--image-left .text-image-block__art {
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  .text-image-block {
    overflow: hidden;
    padding-block: 72px;
  }
  .text-image-block__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 42px;
  }
  .text-image-block__content,
  .text-image-block--image-left .text-image-block__content {
    grid-column: auto;
    margin-left: 0;
  }
  .text-image-block__title {
    font-size: clamp(38px, 10vw, 51px);
    line-height: 1.1;
  }
  .text-image-block__body { margin-top: 30px; }
  .text-image-block__visual {
    position: relative;
    grid-row: 2;
    width: min(150vw, 760px);
    height: min(85vw, 440px);
  }
  .text-image-block--image-right .text-image-block__visual {
    top: auto;
    right: auto;
    margin: -18px -42% -58px auto;
  }
  .text-image-block--image-left .text-image-block__visual {
    bottom: auto;
    left: auto;
    margin: -18px auto -58px -42%;
  }
}

/* Text Block with Image: full right-side Figma mask composition. */
@media (min-width: 901px) {
  .text-image-block--image-right .text-image-block__visual {
    width: min(76vw, 1320px);
    height: min(47vw, 760px);
    top: -235px;
    right: min(-17vw, -210px);
  }
  .text-image-block--image-right .text-image-block__art {
    background-position: 68% center;
    background-size: cover;
  }
}

@media (min-width: 901px) {
  .text-image-block--image-right .text-image-block__visual {
    right: min(-48vw, -600px);
  }
}

/* Rotate the SVG silhouette only; retain an upright image within it. */
@media (min-width: 901px) {
  .text-image-block--image-right .text-image-block__mask {
    transform: rotate(-58deg);
    transform-origin: center;
  }
  .text-image-block--image-right .text-image-block__art {
    transform: rotate(58deg) scale(1.38);
    transform-origin: center;
  }
}

@media (min-width: 901px) {
  .text-image-block--image-right .text-image-block__visual {
    top: -350px;
    right: min(-36vw, -450px);
  }
}

/* Verhaal — team-story grid. */
.story-block { padding-block: clamp(76px, 9vw, 148px); background: var(--color-white); }
.story-block__title { margin: 0 0 52px; font-size: 51px; font-weight: 800; line-height: 57px; letter-spacing: 1.53px; }
.story-block__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 980px; }
.story-block__card { display: grid; grid-template-columns: minmax(0, 1fr) 150px; min-height: 320px; border: 1px solid var(--color-grey); border-radius: 20px 0 0 20px; overflow: hidden; }
.story-block__card + .story-block__card { margin-left: -1px; border-radius: 0 20px 20px 0; }
.story-block__copy { display: flex; flex-direction: column; padding: 28px; }
.story-block__card h3 { margin: 0; font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: .96px; }
.story-block__role { margin: 7px 0 0; color: var(--color-red); font-weight: 550; }
.story-block__text { margin-top: 24px; color: var(--color-body); font-size: 18px; line-height: 1.5; }
.story-block__text > :first-child { margin-top: 0; }
.story-block__text > :last-child { margin-bottom: 0; }
.story-block__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.story-block__socials a { color: var(--color-red); font-size: 14px; font-weight: 550; text-decoration: none; }
.story-block__image { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }

/* Quote. */
.quote-block { padding-block: clamp(50px, 6vw, 96px); background: var(--color-white); }
.quote-block__inner { display: grid; grid-template-columns: 105px minmax(0, 760px); align-items: center; gap: 28px; }
.quote-block__mark { color: var(--color-contrast); font-family: Georgia, serif; font-size: 190px; font-weight: 700; line-height: .55; }
.quote-block__quote { margin: 0; padding: 26px 30px; border: 2px solid var(--color-red); color: var(--color-black); }
.quote-block__quote p { margin: 0; font-size: 22px; line-height: 1.45; }
.quote-block__quote cite { display: block; margin-top: 16px; color: var(--color-red); font-size: 16px; font-style: normal; font-weight: 550; }

/* Winkel with Image — uses General Info from Theme Settings. */
.shop-image-block { position: relative; overflow: clip; padding-block: clamp(88px, 9vw, 150px); background: var(--color-white); }
.shop-image-block__grid { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); min-height: 520px; align-items: center; }
.shop-image-block__content { position: relative; z-index: 1; max-width: 720px; }
.shop-image-block__title { margin: 0; font-size: 51px; font-weight: 800; line-height: 57px; letter-spacing: 1.53px; }
.shop-image-block__intro { margin-top: 28px; color: var(--color-body); }
.shop-image-block__intro > :first-child { margin-top: 0; }
.shop-image-block__intro > :last-child { margin-bottom: 0; }
.shop-image-block__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin-top: 48px; }
.shop-image-block__detail h3 { margin: 0 0 10px; font-size: 20px; font-weight: 550; }
.shop-image-block__detail p,
.shop-image-block__detail a { margin: 0; color: var(--color-body); text-decoration: none; }
.shop-image-block__hours { grid-column: 1 / -1; }
.shop-image-block__hours p { display: grid; grid-template-columns: 90px 1fr; gap: 12px; margin: 7px 0 0; }
.shop-image-block__hours strong { color: var(--color-black); font-weight: 550; }
.shop-image-block__visual { position: absolute; z-index: 0; top: -195px; right: min(-24vw, -280px); width: min(62vw, 1050px); height: min(40vw, 660px); pointer-events: none; }
.shop-image-block__mask { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url("https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat; mask: url("https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat; transform: rotate(-58deg); transform-origin: center; }
.shop-image-block__art { position: absolute; inset: -22%; background-repeat: no-repeat; background-position: 68% center; background-size: cover; transform: rotate(58deg) scale(1.38); transform-origin: center; }

@media (max-width: 900px) {
  .story-block__grid { grid-template-columns: 1fr; }
  .story-block__card,
  .story-block__card + .story-block__card { grid-template-columns: minmax(0, 1fr) 125px; margin: -1px 0 0; border-radius: 0; }
  .story-block__card:first-child { margin-top: 0; border-radius: 20px 20px 0 0; }
  .story-block__card:last-child { border-radius: 0 0 20px 20px; }
  .quote-block__inner { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
  .quote-block__mark { font-size: 112px; }
  .quote-block__quote { padding: 22px; }
  .quote-block__quote p { font-size: 18px; }
  .shop-image-block { overflow: hidden; padding-block: 72px; }
  .shop-image-block__grid { grid-template-columns: 1fr; min-height: 0; gap: 38px; }
  .shop-image-block__details { margin-top: 34px; }
  .shop-image-block__visual { position: relative; top: auto; right: auto; grid-row: 2; width: min(150vw, 760px); height: min(85vw, 440px); margin: -18px -42% -58px auto; }
}

.story-block__contacts { display: flex; gap: 10px; margin-top: auto; padding-top: 24px; }
.story-block__contacts a { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--color-red); color: var(--color-white); font-size: 16px; line-height: 1; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.story-block__contacts a:hover,
.story-block__contacts a:focus-visible { background: var(--color-black); transform: translateY(-2px); }


/* Verhaal — match the compact, separate profile cards from the Over Ons design. */
.story-block__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 280px));
	align-items: start;
	gap: 24px;
	max-width: 584px;
}
.story-block__card,
.story-block__card + .story-block__card {
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0;
	border: 1px solid var(--color-grey);
	border-radius: 0;
	overflow: hidden;
}
.story-block__copy {
	display: flex;
	flex: 0 0 auto;
	padding: 20px 20px 0;
}
.story-block__card h3 {
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: .72px;
}
.story-block__role {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.35;
}
.story-block__text {
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.48;
}
.story-block__contacts {
	margin-top: 16px;
	padding-top: 0;
	gap: 7px;
}
.story-block__contacts a {
	position: relative;
	width: 18px;
	height: 18px;
	font-size: 0;
	background: var(--color-red);
	transform: none;
}
.story-block__contacts a:nth-child(2) {
	background: var(--color-contrast);
	color: var(--color-black);
}
.story-block__contacts a::before {
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}
.story-block__contacts a:first-child::before { content: "☎"; }
.story-block__contacts a:nth-child(2)::before { content: "✉"; font-size: 9px; }
.story-block__contacts a:hover,
.story-block__contacts a:focus-visible {
	background: var(--color-black);
	color: var(--color-white);
	transform: none;
}
.story-block__image {
	align-self: flex-start;
	width: 106px;
	height: 118px;
	min-height: 0;
	margin: 14px 20px 20px;
	object-fit: cover;
	border-radius: 0;
}
@media (max-width: 900px) {
	.story-block__grid {
		grid-template-columns: 1fr;
		max-width: 280px;
		gap: 20px;
	}
	.story-block__card,
	.story-block__card + .story-block__card,
	.story-block__card:first-child,
	.story-block__card:last-child {
		display: flex;
		margin: 0;
		border-radius: 0;
	}
}


/* Ons Verhaal — use the exact card system from the Over ons block. */
.story-block__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: none;
}
.story-block__card,
.story-block__card + .story-block__card {
	display: flex;
	min-width: 0;
	min-height: 300px;
	flex-direction: column;
	margin: 0 -1px -1px 0;
	border: 1px solid var(--color-grey);
	border-radius: 0;
	background: var(--color-white);
	overflow: hidden;
}
.story-block__card:first-child {
	border-radius: 20px 0 0 20px;
}
.story-block__card:nth-child(2) {
	border-radius: 0 20px 20px 0;
}
.story-block__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 30px 24px 0;
}
.story-block__card h3 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: .96px;
}
.story-block__role {
	margin: 8px 0 0;
	color: var(--color-red);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
}
.story-block__text {
	max-width: 420px;
	margin-top: 32px;
	color: rgba(0, 0, 0, .6);
	font-size: 18px;
	line-height: 1.55;
}
.story-block__contacts {
	display: flex;
	gap: 8px;
	margin-top: 22px;
	padding-top: 0;
}
.story-block__contacts a {
	display: grid;
	position: relative;
	width: 24px;
	height: 24px;
	place-items: center;
	border-radius: 50%;
	background: var(--color-red);
	color: var(--color-white);
	font-size: 0;
	line-height: 1;
	text-decoration: none;
}
.story-block__contacts a:nth-child(2) {
	background: var(--color-contrast);
	color: var(--color-black);
}
.story-block__contacts a::before {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.story-block__contacts a:first-child::before { content: "☎"; }
.story-block__contacts a:nth-child(2)::before { content: "✉"; font-size: 11px; }
.story-block__image {
	display: block;
	width: 112px;
	height: 126px;
	min-height: 0;
	margin: 18px 24px 24px;
	align-self: flex-start;
	object-fit: cover;
	border-radius: 0;
}
@media (max-width: 900px) {
	.story-block__grid {
		grid-template-columns: 1fr;
	}
	.story-block__card,
	.story-block__card + .story-block__card,
	.story-block__card:first-child,
	.story-block__card:nth-child(2),
	.story-block__card:last-child {
		margin: 0 0 -1px;
		border-radius: 0;
	}
	.story-block__card:first-child {
		border-radius: 20px 20px 0 0;
	}
	.story-block__card:last-child {
		border-radius: 0 0 20px 20px;
	}
	.story-block__card:only-child {
		border-radius: 20px;
	}
}


/* Ons Verhaal contact icons — supplied brand SVG assets. */
.story-block__contacts a::before {
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.story-block__contacts a:first-child::before {
	content: "";
	background-image: url("https://compu-tech.be/wp-content/uploads/2026/09/phone.svg");
}
.story-block__contacts a:nth-child(2)::before {
	content: "";
	width: 13px;
	height: 13px;
	background-image: url("https://compu-tech.be/wp-content/uploads/2026/09/mail.svg");
}


/* Ons Verhaal contact buttons — 40px brand circles with white SVGs. */
.story-block__contacts {
	gap: 10px;
}
.story-block__contacts a,
.story-block__contacts a:nth-child(2) {
	width: 40px;
	height: 40px;
	background: var(--color-red);
	color: var(--color-white);
}
.story-block__contacts a::before,
.story-block__contacts a:first-child::before,
.story-block__contacts a:nth-child(2)::before {
	width: 18px;
	height: 18px;
	filter: brightness(0) invert(1);
}


/* Ons Verhaal portraits — Figma dimensions. */
.story-block__image {
	width: 264px;
	height: 264px;
	max-width: calc(100% - 48px);
	margin: 24px;
	object-fit: cover;
	object-position: top center;
	border-radius: 20px;
}


/* Quote block — Figma composition with the supplied quote artwork. */
.quote-block {
	position: relative;
	overflow: hidden;
	padding-block: clamp(86px, 8vw, 140px);
}
.quote-block--bg-white { background: var(--color-white); }
.quote-block--bg-light-grey { background: var(--color-light-grey); }
.quote-block--border-top { border-top: 5px solid var(--color-contrast); }
.quote-block--border-bottom { border-bottom: 5px solid var(--color-contrast); }

.quote-block__inner {
	position: relative;
	display: flex;
	min-height: 330px;
	align-items: center;
}
.quote-block__mark {
	position: absolute;
	left: 0;
	bottom: -92px;
	width: clamp(220px, 22vw, 330px);
	height: auto;
	color: inherit;
	font-size: 0;
	line-height: 0;
	pointer-events: none;
}
.quote-block__mark img {
	display: block;
	width: 100%;
	height: auto;
}
.quote-block__quote {
	width: min(66%, 780px);
	margin: 0 0 0 34%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-black);
}
.quote-block__quote p {
	margin: 0;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: .22px;
}
.quote-block__quote cite {
	display: block;
	margin-top: 22px;
	color: var(--color-red);
	font-size: 16px;
	font-style: normal;
	font-weight: 550;
	line-height: 1.4;
}
@media (max-width: 900px) {
	.quote-block {
		padding-block: 72px;
	}
	.quote-block__inner {
		min-height: 400px;
		align-items: flex-start;
		padding-top: 190px;
	}
	.quote-block__mark {
		top: -30px;
		bottom: auto;
		width: 210px;
	}
	.quote-block__quote {
		width: 100%;
		max-width: 680px;
		margin: 0;
	}
	.quote-block__quote p {
		font-size: 18px;
		line-height: 1.55;
	}
}
@media (max-width: 480px) {
	.quote-block__inner {
		min-height: 360px;
		padding-top: 20px;
	}
	.quote-block__mark {
		width: 170px;
	}
}

.quote-block__quote p + p {
	margin-top: 18px;
}


/* Ons Verhaal — match Over ons card rhythm and contact order. */
@media (min-width: 901px) {
	.story-block__copy {
		min-height: 300px;
	}
	.story-block__text {
		margin-top: auto;
	}
	.story-block__contacts {
		margin-top: 30px;
	}
}
.story-block__contact--email,
.story-block__contacts .story-block__contact--email:first-child {
	background: var(--color-red);
}
.story-block__contact--phone,
.story-block__contacts .story-block__contact--phone:nth-child(2) {
	background: var(--color-contrast);
}
.story-block__contacts .story-block__contact::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-image: none;
	background-color: currentColor;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: none;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.story-block__contacts .story-block__contact--email {
	color: var(--color-white);
}
.story-block__contacts .story-block__contact--email::before {
	-webkit-mask-image: url("https://compu-tech.be/wp-content/uploads/2026/09/mail.svg");
	mask-image: url("https://compu-tech.be/wp-content/uploads/2026/09/mail.svg");
}
.story-block__contacts a.story-block__contact--phone {
	color: var(--color-red);
}
.story-block__contacts .story-block__contact--phone::before {
	-webkit-mask-image: none;
	mask-image: none;
	background-color: transparent;
	background-image: url("https://compu-tech.be/wp-content/uploads/2026/09/phone.svg");
}


/* Winkel with Image — title, text and Theme Settings opening-hours card. */
.shop-image-block__intro {
	max-width: 680px;
	margin: 60px 0;
	color: var(--color-body);
	font-size: 18px;
	line-height: 1.55;
}
.shop-image-block__intro > :first-child { margin-top: 0; }
.shop-image-block__intro > :last-child { margin-bottom: 0; }

.shop-image-block__info-box {
	width: 100%;
	max-width: 420px;
	margin: 0;
	padding: 20px;
	border-radius: 20px;
	background: var(--color-light-grey);
}
.shop-image-block__info-box h3 {
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-heading);
	font-size: 32px;
	font-style: normal;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: .96px;
}
.shop-image-block__hours-list {
	display: grid;
	gap: 8px;
	margin-top: 30px;
}
.shop-image-block__info-box p {
	color: rgba(0, 0, 0, .6);
	font-size: 18px;
	font-style: normal;
	font-weight: 450;
	line-height: 30px;
	letter-spacing: .36px;
}
.shop-image-block__hours-list p {
	display: flex;
	gap: 4px;
	margin: 0;
}
.shop-image-block__info-box strong {
	color: rgba(0, 0, 0, .6);
	font-weight: 700;
}
.shop-image-block__address {
	margin: 30px 0 0;
}
.shop-image-block__address a {
	color: inherit;
	text-decoration: none;
}
@media (max-width: 900px) {
	.shop-image-block__info-box {
		margin: 0;
		padding: 20px;
		border-radius: 20px;
	}
	.shop-image-block__hours-list {
		margin-top: 38px;
	}
	.shop-image-block__address {
		margin-top: 48px;
	}
}


/* Ons Verhaal — fixed desktop row alignment across every team card. */
@media (min-width: 901px) {
	.story-block__card {
		height: 100%;
	}
	.story-block__copy {
		flex: 0 0 auto;
		min-height: 0;
	}
	.story-block__card h3 {
		min-height: 32px;
	}
	.story-block__text {
		flex: 0 0 224px;
		min-height: 224px;
		margin-top: 120px;
		overflow: visible;
	}
	.story-block__contacts {
		flex: 0 0 40px;
		min-height: 40px;
		margin-top: 30px;
	}
	.story-block__image {
		flex: 0 0 264px;
		margin-top: 24px;
	}
}


/* Ons Verhaal — contacts sit 30px after the actual text content. */
@media (min-width: 901px) {
	.story-block__text {
		flex: 0 0 auto;
		min-height: 0;
	}
	.story-block__contacts {
		margin-top: 30px;
	}
}


/* Quote block — final Figma typography and overlapping icon placement. */
.quote-block {
	overflow: visible;
}
.quote-block__mark {
	z-index: 2;
	top: -112px;
	bottom: auto;
}
.quote-block__quote p {
	font-family: "Juturu", var(--font-body);
	font-size: 28px;
	font-style: normal;
	font-weight: 400;
	line-height: 35px;
	letter-spacing: .84px;
}
@media (max-width: 900px) {
	.quote-block__mark {
		top: -72px;
	}
	.quote-block__quote p {
		font-size: 28px;
		line-height: 35px;
		letter-spacing: .84px;
	}
}


/* Over Ons — Figma alignment for Quote and Winkel blocks. */
.quote-block {
	margin-top: 60px;
	padding: 110px clamp(20px, 8.333vw, 120px) 120px;
}
.quote-block__inner {
	min-height: 131px;
	align-items: center;
}
.quote-block__quote {
	width: min(100%, 894px);
	margin-left: auto;
}
.quote-block__quote strong {
	display: block;
	margin-top: 20px;
	font-family: "Juturu", var(--font-body);
	font-size: 39px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: 1.17px;
}
.quote-block__mark {
	left: 0;
	top: -160px;
	width: min(23vw, 330px);
}

@media (min-width: 901px) {
	.shop-image-block {
		padding-block: 0;
	}
	.shop-image-block__grid.container {
		width: 100%;
		max-width: none;
		min-height: 720px;
		padding-inline: 0;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: stretch;
	}
	.shop-image-block__content {
		max-width: none;
		padding: 110px clamp(60px, 8.333vw, 120px) 120px;
	}
	.shop-image-block__info-box {
		width: 100%;
		max-width: 420px;
	}
	.shop-image-block__visual {
		top: 0;
		right: 0;
		width: min(41.667vw, 600px);
		height: min(50vw, 720px);
	}
}

@media (max-width: 900px) {
	.quote-block {
		padding: 86px 0 80px;
	}
	.quote-block__inner {
		min-height: 0;
	}
	.quote-block__quote strong {
		font-size: 32px;
		line-height: 32px;
		letter-spacing: .96px;
	}
}


/* Over Ons Winkel — final Figma mask scale and edge placement. */
@media (min-width: 901px) {
	.shop-image-block__visual {
		top: 0;
		right: min(-15vw, -170px);
		width: min(62vw, 900px);
		height: min(50vw, 720px);
	}
}


/* Contact page — Formidable form + Winkel and map/image blocks. */
.contact-winkel-block {
	background: var(--color-white);
	padding: 120px 0;
}
.contact-winkel-block__grid {
	display: grid;
	grid-template-columns: 912fr 528fr;
	align-items: start;
	gap: clamp(50px, 6vw, 120px);
}
.contact-winkel-block__heading {
	margin: 0 0 24px;
	font-size: 51px;
	font-weight: 800;
	line-height: 57px;
	letter-spacing: 1.53px;
}
.contact-winkel-block__intro {
	max-width: 720px;
	margin: 0 0 42px;
	color: var(--color-body);
	font-size: 18px;
	line-height: 1.55;
}
.contact-winkel-block__form .frm_forms,
.contact-winkel-block__form .frm_form_fields {
	width: 100%;
}
.contact-winkel-block__form .frm_form_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 30px;
}
.contact-winkel-block__form .frm_form_field {
	min-width: 0;
	margin: 0;
}
.contact-winkel-block__form .frm_half {
	width: auto;
	grid-column: span 1;
}
.contact-winkel-block__form .frm_full,
.contact-winkel-block__form .frm_submit,
.contact-winkel-block__form .frm_message,
.contact-winkel-block__form .frm_error_style {
	width: auto;
	grid-column: 1 / -1;
}
.contact-winkel-block__form .frm_primary_label {
	display: block;
	margin: 0 0 4px;
	color: var(--color-black);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}
.contact-winkel-block__form .frm_required {
	color: var(--color-red);
}
.contact-winkel-block__form input[type="text"],
.contact-winkel-block__form input[type="email"],
.contact-winkel-block__form input[type="tel"],
.contact-winkel-block__form input[type="url"],
.contact-winkel-block__form input[type="number"],
.contact-winkel-block__form select,
.contact-winkel-block__form textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 0 10px;
	color: var(--color-black);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-grey);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.4;
	outline: 0;
	transition: border-color .2s ease, border-width .2s ease;
}
.contact-winkel-block__form textarea {
	min-height: 120px;
	resize: vertical;
}
.contact-winkel-block__form input:focus,
.contact-winkel-block__form select:focus,
.contact-winkel-block__form textarea:focus {
	border-bottom: 2px solid var(--color-red);
}
.contact-winkel-block__form .frm_blank_field input,
.contact-winkel-block__form .frm_blank_field select,
.contact-winkel-block__form .frm_blank_field textarea,
.contact-winkel-block__form [aria-invalid="true"] {
	border-bottom-color: var(--color-red);
}
.contact-winkel-block__form .frm_error,
.contact-winkel-block__form .frm_error_style {
	margin-top: 6px;
	color: var(--color-red);
	font-size: 14px;
	line-height: 1.4;
}
.contact-winkel-block__form .frm_submit {
	margin-top: 0;
}
/* Invisible reCAPTCHA field still takes a grid row (empty), doubling the gap
   before the submit button. Remove it from flow; it stays in the DOM so the
   invisible challenge still runs and its badge (position:fixed) is unaffected. */
.contact-winkel-block__form .frm_form_field:has(.frm-g-recaptcha) {
	position: absolute;
	width: 1px;
	height: 0;
	margin: 0;
	overflow: hidden;
}
.contact-winkel-block__form .frm_button_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px 20px;
	color: var(--color-black);
	background: var(--color-contrast);
	border: 0;
	border-radius: var(--radius-pill);
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 550;
	line-height: normal;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.contact-winkel-block__form .frm_button_submit:hover,
.contact-winkel-block__form .frm_button_submit:focus-visible {
	color: var(--color-white);
	background: var(--color-red);
}
.contact-winkel-block__form .frm_message {
	margin: 0;
	padding: 22px 24px;
	color: var(--color-black);
	background: rgba(214, 235, 18, .35);
	border: 1px solid var(--color-contrast);
	border-radius: 20px;
	font-size: 18px;
}
.contact-winkel-block__shop {
	padding: 20px;
	background: var(--color-light-grey);
	border-radius: 20px;
}
.contact-winkel-block__shop h2 {
	margin: 0 0 120px;
	font-size: 32px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: .96px;
}
.contact-winkel-block__address {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--color-body);
	font-size: 18px;
	line-height: 1.45;
	text-decoration: none;
	transition: color .2s ease;
}
.contact-winkel-block__address:hover,
.contact-winkel-block__address:focus-visible {
	color: var(--color-red);
}
.contact-winkel-block__address img {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	object-fit: contain;
}
.contact-winkel-block__hours {
	display: grid;
	gap: 5px;
	margin-top: 20px;
	padding-left: 29px;
}
.contact-winkel-block__hours p {
	display: flex;
	gap: 4px;
	margin: 0;
	color: var(--color-body);
	font-size: 16px;
	line-height: 1.45;
}
.contact-winkel-block__hours strong {
	font-weight: 700;
}
.contact-winkel-block__contact {
	display: grid;
	gap: 10px;
	margin-top: 26px;
}
.contact-winkel-block__contact a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-body);
	font-size: 16px;
	line-height: 1.35;
	text-decoration: none;
	transition: color .2s ease;
}
.contact-winkel-block__contact a:hover,
.contact-winkel-block__contact a:focus-visible {
	color: var(--color-red);
}
.contact-winkel-block__contact img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	filter: none;
}

.map-image-block {
	border-bottom: 5px solid var(--color-contrast);
	background: var(--color-light-grey);
}
.map-image-block__grid {
	display: grid;
	grid-template-columns: 912fr 528fr;
	width: 100%;
	height: 786px;
}
.map-image-block__map,
.map-image-block__image {
	min-width: 0;
	height: 100%;
	overflow: hidden;
}
.map-image-block__map iframe,
.map-image-block__image img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.map-image-block__map iframe {
	filter: grayscale(.35) saturate(.65) sepia(.08) contrast(.96);
}
.map-image-block__image img {
	object-fit: cover;
	object-position: center;
}

@media (max-width: 900px) {
	.contact-winkel-block {
		padding: 72px 0 84px;
	}
	.contact-winkel-block__grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	.contact-winkel-block__form .frm_form_fields {
		grid-template-columns: 1fr;
	}
	.contact-winkel-block__form .frm_half,
	.contact-winkel-block__form .frm_full,
	.contact-winkel-block__form .frm_submit {
		grid-column: 1;
	}
	.contact-winkel-block__shop {
		width: 100%;
		max-width: 440px;
	}
	.map-image-block__grid {
		grid-template-columns: 1fr;
		height: auto;
	}
	.map-image-block__map,
	.map-image-block__image {
		height: min(90vw, 430px);
	}
}

/* Contact page — Formidable structural grid correction. */
.contact-winkel-block__form .frm_forms,
.contact-winkel-block__form .frm_form_fields,
.contact-winkel-block__form .frm_fields_container {
	width: 100% !important;
	max-width: none !important;
}
.contact-winkel-block__form .frm_form_fields {
	display: block;
}
.contact-winkel-block__form .frm_fields_container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 24px 30px;
}
.contact-winkel-block__form .frm_form_field {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	clear: none !important;
	margin: 0 !important;
	grid-column: 1 / -1 !important;
}
.contact-winkel-block__form .frm_half,
.contact-winkel-block__form .frm6 {
	grid-column: span 1 !important;
}
.contact-winkel-block__form .frm_first.frm_half,
.contact-winkel-block__form .frm_first.frm6 {
	grid-column-start: 1 !important;
}
.contact-winkel-block__form .frm_full,
.contact-winkel-block__form .frm_submit,
.contact-winkel-block__form .frm_message,
.contact-winkel-block__form .frm_error_style {
	grid-column: 1 / -1 !important;
}
@media (max-width: 900px) {
	.contact-winkel-block__form .frm_fields_container {
		grid-template-columns: 1fr !important;
	}
	.contact-winkel-block__form .frm_form_field,
	.contact-winkel-block__form .frm_half,
	.contact-winkel-block__form .frm6,
	.contact-winkel-block__form .frm_full,
	.contact-winkel-block__form .frm_submit,
	.contact-winkel-block__form .frm_message,
	.contact-winkel-block__form .frm_error_style {
		grid-column: 1 !important;
	}
}
/* Contact page — Formidable button specificity. */
.contact-winkel-block__form .with_frm_style .frm_submit button.frm_button_submit,
.contact-winkel-block__form .frm_forms .frm_submit button.frm_button_submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 0;
	height: auto !important;
	margin: 0 !important;
	padding: 10px 20px !important;
	color: var(--color-black) !important;
	background: var(--color-contrast) !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	box-shadow: none !important;
	font-family: var(--font-body) !important;
	font-size: 18px !important;
	font-weight: 550 !important;
	line-height: normal !important;
}
.contact-winkel-block__form .with_frm_style .frm_submit button.frm_button_submit:hover,
.contact-winkel-block__form .with_frm_style .frm_submit button.frm_button_submit:focus-visible,
.contact-winkel-block__form .frm_forms .frm_submit button.frm_button_submit:hover,
.contact-winkel-block__form .frm_forms .frm_submit button.frm_button_submit:focus-visible {
	color: var(--color-white) !important;
	background: var(--color-red) !important;
}
/* Contact page — Formidable focus specificity. */
.contact-winkel-block__form .with_frm_style input[type="text"]:focus,
.contact-winkel-block__form .with_frm_style input[type="email"]:focus,
.contact-winkel-block__form .with_frm_style input[type="tel"]:focus,
.contact-winkel-block__form .with_frm_style input[type="url"]:focus,
.contact-winkel-block__form .with_frm_style input[type="number"]:focus,
.contact-winkel-block__form .with_frm_style select:focus,
.contact-winkel-block__form .with_frm_style textarea:focus {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid var(--color-red) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}
/* Map with Image — reliable Figma map treatment. */
.map-image-block__map {
	position: relative;
	background: #e9e7e1;
}
.map-image-block__map iframe {
	position: relative;
	z-index: 1;
	filter: none !important;
}
.map-image-block__map::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	background: rgba(250, 249, 245, .08);
	pointer-events: none;
}
/* Map with Image — exact Figma artwork. */
.map-image-block__map::after {
	display: none;
}
.map-image-block__map > a,
.map-image-block__map > img {
	display: block;
	width: 100%;
	height: 100%;
}
.map-image-block__map > a img,
.map-image-block__map > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Map with Image — interactive Google Map using the approved brand palette. */
.map-image-block__map::after {
	display: none !important;
}

.map-image-block__canvas,
.map-image-block__canvas > iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border: 0;
}

.map-image-block__canvas .gm-style {
	font-family: inherit;
}


/* Text Block with Image — Figma 141:2173 left-image desktop composition. */
@media (min-width: 901px) {
	.text-image-block--image-left .text-image-block__grid {
		grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr);
	}

	.text-image-block--image-left .text-image-block__content {
		width: 100%;
		max-width: none;
		margin-left: 0;
		padding-left: clamp(80px, 8.333vw, 120px);
	}

	.text-image-block--image-left .text-image-block__title,
	.text-image-block--image-left .text-image-block__body {
		max-width: 720px;
	}

	.text-image-block--image-left .text-image-block__visual {
		bottom: -40px;
		left: clamp(-540px, -37.5vw, -430px);
		width: min(86.08vw, 1239.488px);
		height: auto;
		aspect-ratio: 27 / 11;
		transform: rotate(-33.36deg) skewX(2.34deg);
		transform-origin: center;
	}

	.text-image-block--image-left .text-image-block__art {
		inset: -35%;
		background-size: 65% auto;
		transform: rotate(33.36deg) skewX(-2.34deg);
		transform-origin: center;
	}
}


@media (min-width: 901px) {
	.text-image-block--image-left .text-image-block__visual {
		left: clamp(-480px, -33vw, -380px);
	}

	.text-image-block--image-left .text-image-block__art {
		background-size: 82% auto;
		background-position: center 54%;
	}
}


/* Text Block with Image — preserve the full 3:2 photo without crop or scale zoom. */
.text-image-block__art,
.text-image-block--image-left .text-image-block__art {
	background-size: contain;
	background-position: center;
}


@media (min-width: 901px) {
	.text-image-block--image-right .text-image-block__art {
		background-size: contain;
		background-position: center;
		transform: rotate(58deg);
	}
}


/* Text Block with Image — right-side mask uses the same structure as Help Section. */
@media (min-width: 901px) {
	.text-image-block--image-right .text-image-block__visual {
		inset: 0;
		width: auto;
		height: auto;
		transform: none;
		pointer-events: none;
	}

	.text-image-block--image-right .text-image-block__mask {
		inset: auto;
		top: max(-215px, -13.4375vw);
		right: max(-460.847px, -28.803vw);
		width: min(1239.488px, 77.468vw);
		height: min(580px, 36.25vw);
		aspect-ratio: 27 / 11;
		transform: rotate(-62.4deg) skewX(0deg);
		transform-origin: center;
	}

	.text-image-block--image-right .text-image-block__art {
		inset: -34%;
		background-size: cover;
		background-position: center;
		transform: rotate(62.4deg) skewX(7.27deg);
		transform-origin: center;
	}
}

/* Winkel with Image — match the right-side Text Block with Image mask. */
@media (min-width: 901px) {
	.shop-image-block__visual {
		inset: 0;
		width: auto;
		height: auto;
		transform: none;
		pointer-events: none;
	}

	.shop-image-block__mask {
		inset: auto;
		top: -50px;
		right: -460.847px;
		width: 1239.488px;
		height: 580px;
		aspect-ratio: 27 / 11;
		transform: rotate(-62.4deg) skewX(0deg);
		transform-origin: center;
	}

	.shop-image-block__art {
		inset: -34%;
		background-size: cover;
		background-position: center;
		transform: rotate(62.4deg) skewX(7.27deg);
		transform-origin: center;
	}
}

/* Quote block — align mobile spacing with the other sections. */
@media (max-width: 900px) {
	.quote-block {
		margin-top: 0;
		padding: 72px 0 80px;
	}

	.quote-block__mark {
		top: -100px;
		left: 20px;
	}
}

/* Hero bottom-left SVG — mirror the working bottom-right placement on mobile. */
@media (max-width: 900px) {
	.hero--background-color.hero--icon-bottom-left .hero__shape {
		width: 135vw;
		height: auto;
		max-width: none;
		left: -34vw;
		top: auto;
		bottom: -8%;
	}
}
@media (max-width: 480px) {
	.hero--background-color.hero--icon-bottom-left .hero__shape {
		width: 140vw;
		left: -38vw;
		bottom: -5%;
	}
}

/* Right-side image blocks — controlled mobile mask placement. */
@media (max-width: 900px) {
	.text-image-block--image-right .text-image-block__visual,
	.shop-image-block__visual {
		position: relative;
		inset: auto;
		width: calc(100% + 120px);
		height: 360px;
		margin: 0 -100px -20px auto;
		transform: none;
	}

	.text-image-block--image-right .text-image-block__mask,
	.shop-image-block__mask {
		inset: 0;
		width: auto;
		height: auto;
		transform: rotate(-58deg);
		transform-origin: center;
	}

	.text-image-block--image-right .text-image-block__art,
	.shop-image-block__art {
		inset: -22%;
		background-size: cover;
		background-position: center;
		transform: rotate(58deg) scale(1.38);
		transform-origin: center;
	}
}

/* Verhaal — aligned desktop card rows across responsive widths. */
@media (min-width: 901px) {
	.story-block__card {
		height: 100%;
		gap: 20px;
		padding: 20px;
	}

	.story-block__copy {
		display: flex;
		min-height: 0;
		flex: 1 1 auto;
		flex-direction: column;
		padding: 0;
	}

	.story-block__text {
		max-width: none;
		margin-top: 60px;
	}

	.story-block__contacts {
		min-height: 40px;
		flex: 0 0 auto;
		margin-top: auto;
		padding-top: 30px;
	}

	.story-block__image {
		flex: 0 0 264px;
		margin: 0;
		max-width: 100%;
	}
}

/* Footer social links below the brand logo. */
.site-footer__socials {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
}

.site-footer__socials a {
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	color: var(--color-black);
	opacity: .6;
	transition: opacity .2s ease;
}

.site-footer__socials a:hover,
.site-footer__socials a:focus-visible {
	opacity: 1;
}

.site-footer__socials svg {
	display: block;
	width: 18px;
	height: 18px;
}

.site-footer__socials svg path {
	fill: var(--color-red);
}

@media (min-width: 901px) {
	.site-footer__col--brand {
		grid-template-rows: repeat(6, 40px);
	}

	.site-footer__socials {
		grid-row: 5;
		align-self: start;
		margin: 0 0 10px;
	}

	.site-footer__col--brand > p {
		grid-row: 6;
	}
}

/* Logo detail — damped hanging motion on first reveal. */
.site-header__logo-svg .logo-hanger,
.site-footer__logo-svg .logo-hanger {
	transform-box: fill-box;
	transform-origin: 50% 0%;
	animation: logo-hanger-swing 1.25s cubic-bezier(.22, .8, .32, 1) .15s both;
}

@keyframes logo-hanger-swing {
	0% { transform: rotate(-22deg); }
	28% { transform: rotate(15deg); }
	50% { transform: rotate(-9deg); }
	68% { transform: rotate(5deg); }
	82% { transform: rotate(-2.5deg); }
	100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.site-header__logo-svg .logo-hanger,
	.site-footer__logo-svg .logo-hanger {
		animation: none;
	}
}





/* Text Block with Image — left-side mobile containment and mirrored artwork. */
@media (max-width: 900px) {
	.text-image-block--image-left .text-image-block__grid {
		min-width: 0;
	}

	.text-image-block--image-left .text-image-block__content {
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	.text-image-block--image-left .text-image-block__title {
		max-width: 100%;
		font-size: 39px;
		line-height: 1.08;
		letter-spacing: .8px;
		overflow-wrap: anywhere;
	}

	.text-image-block--image-left .text-image-block__body {
		max-width: 100%;
		min-width: 0;
	}

	.text-image-block--image-left .text-image-block__visual {
		position: relative;
		inset: auto;
		grid-row: 2;
		width: calc(100% + 120px);
		height: 360px;
		margin: 0 auto -20px -100px;
		transform: none;
	}

	.text-image-block--image-left .text-image-block__mask {
		inset: 0;
		width: auto;
		height: auto;
		transform: rotate(58deg);
		transform-origin: center;
	}

	.text-image-block--image-left .text-image-block__art {
		inset: -14%;
		background-size: 115% auto;
		background-position: center;
		transform: rotate(-58deg);
		transform-origin: center;
	}
}


/* Text Block with Image — left mobile image clearance. */
@media (max-width: 900px) {
	.text-image-block--image-left .text-image-block__visual {
		margin-top: 96px;
	}
}
/* Footer: below 1440px, size the link/info columns to their content so the
   Oplossingen column no longer leaves a wide empty gap on the right. */
@media (min-width: 1101px) and (max-width: 1439px) {
	.site-footer__row {
		grid-template-columns: auto repeat(4, max-content);
		justify-content: space-between;
	}
}

/* Footer brand column: the mark stays pinned to the top; the logo, tagline
   and social icons are pushed to the bottom so they line up with the bottom
   of the other columns. Social icons sit below the tagline, at full opacity. */
@media (min-width: 901px) {
	.site-footer__col--brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		align-self: stretch;
		grid-template-rows: none;
		gap: 16px;
	}
	.site-footer__col--brand .site-footer__mark { order: 1; grid-row: auto; margin: 0; }
	.site-footer__col--brand .site-footer__brand-link { order: 2; grid-row: auto; margin-top: auto; }
	.site-footer__col--brand > p { order: 3; grid-row: auto; margin: 0; }
	.site-footer__col--brand .site-footer__socials { order: 4; grid-row: auto; margin: 0; }
	.site-footer__socials a { opacity: 1; }
}

/* Voordelen: exactly two items -> the two filled boxes span 80% (40% each)
   instead of 2/3, with the trailing blank column at 20%. Desktop only. */
@media (min-width: 901px) {
	.voordelen__grid:has(.voordelen__col:nth-child(2):last-child) {
		grid-template-columns: 4fr 4fr 2fr;
	}
}

/* Verhaal: title accent (trailing punctuation red), and two-card layout
   spans 80% (40% each) instead of 2/3. */
.story-block__title .accent { color: var(--color-red); }
@media (min-width: 901px) {
	.story-block__grid:has(.story-block__card:nth-child(2):last-child) {
		grid-template-columns: 4fr 4fr 2fr;
	}
}

/* Verhaal contact icons: authoritative assignment. The SVGs are already
   correctly coloured (mail = white, phone = red), so render each as a plain
   background image with no mask and no colour filter. Overrides the older
   position-based rules that swapped the icons and forced them white. */
.story-block__contacts a.story-block__contact--email::before,
.story-block__contacts a.story-block__contact--email:first-child::before {
	background-image: url("https://compu-tech.be/wp-content/uploads/2026/09/mail.svg");
	-webkit-mask-image: none;
	mask-image: none;
	background-color: transparent;
	filter: none;
}
.story-block__contacts a.story-block__contact--phone::before,
.story-block__contacts a.story-block__contact--phone:nth-child(2)::before {
	background-image: url("https://compu-tech.be/wp-content/uploads/2026/09/phone.svg");
	-webkit-mask-image: none;
	mask-image: none;
	background-color: transparent;
	filter: none;
}

/* Quote: keep the text clear of the absolutely-positioned mark on desktop.
   Cap the quote width so its auto left margin always leaves room for the
   mark (min(23vw,330px)) plus a 40px gap; stays right-aligned as designed. */
@media (min-width: 901px) {
	.quote-block__quote {
		width: min(894px, calc(100% - min(23vw, 330px) - 40px));
		margin-left: auto;
		margin-right: 0;
	}
}

/* CTA decor: smaller-desktop nudge (1440 and lower) — the SVG has a fixed
   width, so on narrower desktops it drifts left; push it further right/up. */
@media (min-width: 901px) and (max-width: 1440px) {
	.cta-band__decor {
		right: calc(-42% - (1440px - 100vw) * 0.6);
		top: -140%;
	}
}

/* Button hover on red-background sections (CTA, hero) — keep the inverted
   states readable: primary text stays white, outline fills white with red text. */
.cta-band .btn--outline:hover,
.cta-band .btn--outline:focus-visible,
.hero--home .btn--outline:hover,
.hero--home .btn--outline:focus-visible {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-red);
}

/* Hero image-overlay variant: red title dot (the default hero accent is black). */
.hero--background-image.hero--image-overlay .hero__heading .accent {
	color: var(--color-red);
}

/* Text-image image-right: cap the masked image width on <=1440 so it stays
   in the right column and doesn't overlap the text. */
@media (min-width: 901px) and (max-width: 1440px) {
	.text-image-block--image-right .text-image-block__mask {
		width: min(1239.488px, 68vw);
		height: min(580px, 31.8vw);
	}
}


/* Shared mobile heading hierarchy: every block uses the semantic level. */
@media (max-width: 900px) {
	body {
		--mobile-h1-size: 40px;
		--mobile-h2-size: 34px;
		--mobile-h3-size: 28px;
		--mobile-h4-size: 24px;
		--mobile-h5-size: 20px;
		--mobile-h6-size: 18px;
	}
	body h1 { font-size: var(--mobile-h1-size) !important; line-height: 1.12 !important; }
	body h2 { font-size: var(--mobile-h2-size) !important; line-height: 1.16 !important; }
	body h3 { font-size: var(--mobile-h3-size) !important; line-height: 1.2 !important; }
	body h4 { font-size: var(--mobile-h4-size) !important; line-height: 1.25 !important; }
	body h5 { font-size: var(--mobile-h5-size) !important; line-height: 1.3 !important; }
	body h6 { font-size: var(--mobile-h6-size) !important; line-height: 1.35 !important; }
	body :is(h1, h2, h3, h4, h5, h6) {
		letter-spacing: .02em !important;
		overflow-wrap: anywhere;
		min-width: 0;
	}
}

/* ---- Mobile heading hierarchy (consistent site-wide): H1 36 > H2 30 > H3 26 ---- */
@media (max-width: 600px) {
	/* H2 – primary section/block headings */
	.help-section__heading,
	.story-block__title,
	.shop-image-block__title,
	.contact-winkel-block__heading,
	.text-image-block__title,
	.text-image-block--image-left .text-image-block__title,
	.text-image-block--image-right .text-image-block__title {
		font-size: 30px;
		line-height: 1.13;
		letter-spacing: 0.6px;
	}

	.story-block__title { margin-bottom: 36px; }

	/* H3 – card / cell / panel sub-titles */
	.about-grid__cell-title,
	.card-grid__card-title,
	.help-section__text-box h3,
	.story-block__card h3,
	.shop-image-block__info-box h3,
	.contact-winkel-block__shop h2 {
		font-size: 26px;
		line-height: 1.18;
		letter-spacing: 0.4px;
	}

	.contact-winkel-block__shop h2 { margin-bottom: 40px; }
}


/* Footer brand column: match desktop ordering and social treatment on mobile. */
@media (max-width: 900px) {
	.site-footer__col--brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		grid-template-rows: none;
		gap: 16px;
	}
	.site-footer__col--brand .site-footer__mark { order: 1; grid-row: auto; margin: 0; }
	.site-footer__col--brand .site-footer__brand-link { order: 2; grid-row: auto; margin: 0; }
	.site-footer__col--brand > p { order: 3; grid-row: auto; margin: 0; }
	.site-footer__col--brand .site-footer__socials { order: 4; grid-row: auto; margin: 0; }
	.site-footer__col--brand .site-footer__socials a { opacity: 1; }
	.site-footer__col--brand .site-footer__socials svg path { fill: var(--color-red); }
}

/* Mobile non-hero photos: full-width rectangular images, no SVG mask. */
@media (max-width: 900px) {
	body .text-image-block .text-image-block__visual,
	body .help-section .help-section__image,
	body .shop-image-block .shop-image-block__visual {
		display: block;
		position: relative;
		inset: auto;
		grid-column: 1;
		grid-row: auto;
		order: 2;
		width: 100%;
		height: 300px;
		aspect-ratio: auto;
		min-height: 0;
		max-width: none;
		max-height: none;
		margin: 0;
		justify-self: stretch;
		align-self: start;
		transform: none;
		border-radius: 20px;
		overflow: hidden;
	}
	body .text-image-block .text-image-block__mask,
	body .help-section .help-section__image-mask,
	body .shop-image-block .shop-image-block__mask {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		transform: none;
		-webkit-mask: none;
		mask: none;
		clip-path: none;
		border-radius: 20px;
	}
	body .text-image-block .text-image-block__art,
	body .help-section .help-section__image-art,
	body .shop-image-block .shop-image-block__art {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		transform: none;
		background-size: cover;
		background-position: center;
	}
}

/* Mobile popup: full-row submenu toggle behind the text-only page link. */
@media (max-width: 1100px) {
	.nav > .nav__item > .nav__link,
	.nav .nav__contact {
		font-size: clamp(1.625rem, 6vw, 2.5rem);
	}
	.nav .menu-item-has-children > .nav__link {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		width: fit-content;
		position: relative;
		z-index: 2;
	}
	.nav .menu-item-has-children > .submenu-toggle {
		grid-column: 1 / -1;
		grid-row: 1;
		align-self: stretch;
		width: 100%;
		height: 100%;
		min-height: 48px;
		background-position: right 16px center;
		background-color: transparent;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
		filter: brightness(0) invert(1);
		transform: none;
		z-index: 1;
	}
	.nav .menu-item-has-children > .submenu-toggle[aria-expanded='true'] {
		transform: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 9L8 2L15 9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
	}
}


/* Mobile submenu links: no pressed background or native tap flash. */
@media (max-width: 1100px) {
	.nav .sub-menu a {
		-webkit-tap-highlight-color: transparent;
	}
	.nav .sub-menu a:active,
	.nav .sub-menu a:hover,
	.nav .sub-menu a:focus,
	.site-header--color .nav .sub-menu a:active,
	.site-header--color .nav .sub-menu a:hover,
	.site-header--color .nav .sub-menu a:focus {
		background: transparent;
	}
}


/* Green buttons on light content sections; hero and CTA keep their own hover. */
:is(.help-section, .text-image-block--bg-white, .text-image-block--bg-light-grey, .shop-image-block, .solutions-block, .about-grid, .content-section, .contact-winkel-block, .story-block, .quote-block, .card-grid) .btn--primary:is(:hover, :focus-visible) {
	background: var(--color-red);
	border-color: var(--color-red);
	color: var(--color-white);
}


/* The fixed 30px popup toggle has room for the icon only, also on tablets. */
@media (max-width: 1100px) {
	.site-header__menu-toggle-label { display: none; }
}


/* Homepage photo and cutout share one crop; the cutout can cross the SVG edge. */
.home .hero--has-custom-image.hero--image-mask .hero__media {
	background-image: url('https://compu-tech.be/wp-content/uploads/2026/09/ChatGPT-Image-6-aug-2026-16_10_45.jpg') !important;
	-webkit-mask-image: url('https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg');
	mask-image: url('https://compu-tech.be/wp-content/uploads/2026/09/Hero-Home-Icon.svg');
}
.home .hero--has-custom-image.hero--image-mask::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: url('https://compu-tech.be/wp-content/uploads/2026/10/home-page.webp') center 48% / cover no-repeat;
	/* Only the upper-right subject breaks out; keep the lower body inside the mask. */
	clip-path: inset(0 0 40% 50%);
}
@media (max-width: 900px) {
	.home .hero--has-custom-image.hero--image-mask::before {
		background-position: 58% center;
		z-index: 0;
	}
}


/* Winkel desktop: 40/60 image-content split and page-specific artwork offsets. */
@media (min-width: 901px) {
	.page-id-345 .help-section--image-left .help-section__grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}
	.page-id-345 .help-section--image-left .help-section__image-mask {
		top: -75px;
		left: -430px;
	}
}


/* Keep the homepage subject below the top edge; move both photo layers together. */
@media (min-width: 901px) {
	.home .hero--has-custom-image.hero--image-mask .hero__media,
	.home .hero--has-custom-image.hero--image-mask::before {
		background-size: max(1210px, calc(70.625vw + 25px)) auto;
		background-position: calc(100% + 25px) top;
	}
	.home .hero--has-custom-image.hero--image-mask::before {
		clip-path: inset(0 0 25% 50%);
	}
}


/* Header contact label and roomier desktop navigation. */
.site-header .site-header__contact {
	color: #000000;
	font-weight: 700;
}
.site-header .site-header__contact:hover,
.site-header .site-header__contact:focus-visible {
	color: var(--color-contrast);
}
@media (min-width: 1101px) {
	.site-header .nav { gap: 30px; }
}

/* Partner artwork: optical sizing for the five infrastructure wordmarks. */
.partners-block__item img[src*="DELL-LOGO.svg"] { height: 36px; }
.partners-block__item img[src*="HPE_Main_Logo.svg"] { height: 36px; }
.partners-block__item img[src*="VEEAM-LOGO.svg"] { height: 30px; }
.partners-block__item img[src*="Watchguard-LOGO.svg"] { height: 64px; }
.partners-block__item img[src*="N-able-LOGO.svg"] { height: 48px; }
@media (max-width: 600px) {
 .partners-block__item img[src*="DELL-LOGO.svg"],
 .partners-block__item img[src*="HPE_Main_Logo.svg"] { height: 28px; }
 .partners-block__item img[src*="VEEAM-LOGO.svg"] { height: 24px; }
 .partners-block__item img[src*="Watchguard-LOGO.svg"] { height: 48px; }
 .partners-block__item img[src*="N-able-LOGO.svg"] { height: 36px; }
}

/* Fit each infrastructure logo slot to its painted width, without rescaling it.
   The flex gap (including the repeat seam) is then the visible logo gap. */
.partners-block__item:has(img[src*="DELL-LOGO.svg"]),
.partners-block__item:has(img[src*="HPE_Main_Logo.svg"]),
.partners-block__item:has(img[src*="VEEAM-LOGO.svg"]),
.partners-block__item:has(img[src*="Watchguard-LOGO.svg"]),
.partners-block__item:has(img[src*="N-able-LOGO.svg"]) {
 --partner-slot: clamp(160px, 17vw, 300px);
 flex: 0 0 min(var(--partner-slot), var(--partner-painted-width));
 width: min(var(--partner-slot), var(--partner-painted-width));
 padding-inline: 0;
}
.partners-block__item:has(img[src*="DELL-LOGO.svg"]) { --partner-painted-width: 280.861px; }
.partners-block__item:has(img[src*="HPE_Main_Logo.svg"]) { --partner-painted-width: 108px; }
.partners-block__item:has(img[src*="VEEAM-LOGO.svg"]) { --partner-painted-width: 167.495px; }
.partners-block__item:has(img[src*="Watchguard-LOGO.svg"]) { --partner-painted-width: 222.779px; }
.partners-block__item:has(img[src*="N-able-LOGO.svg"]) { --partner-painted-width: 265.5px; }
@media (max-width: 900px) {
 .partners-block__item:has(img[src*="2026/10/"]) { --partner-slot: clamp(140px, 25vw, 210px); }
}
@media (max-width: 600px) {
 .partners-block__item:has(img[src*="2026/10/"]) { --partner-slot: clamp(128px, 42vw, 175px); }
 .partners-block__item:has(img[src*="DELL-LOGO.svg"]) { --partner-painted-width: 218.447px; }
 .partners-block__item:has(img[src*="HPE_Main_Logo.svg"]) { --partner-painted-width: 84px; }
 .partners-block__item:has(img[src*="VEEAM-LOGO.svg"]) { --partner-painted-width: 133.996px; }
 .partners-block__item:has(img[src*="Watchguard-LOGO.svg"]) { --partner-painted-width: 167.084px; }
 .partners-block__item:has(img[src*="N-able-LOGO.svg"]) { --partner-painted-width: 199.125px; }
}

/* Veeam: original green panel and white lettering; retain optical wordmark size. */
.partners-block__item img[src*="VEEAM-LOGO.svg"] { height: 60.594px; }
.partners-block__item:has(img[src*="VEEAM-LOGO.svg"]) { --partner-painted-width: 199.456px; }
@media (max-width: 600px) {
 .partners-block__item img[src*="VEEAM-LOGO.svg"] { height: 48.475px; }
 .partners-block__item:has(img[src*="VEEAM-LOGO.svg"]) { --partner-painted-width: 159.565px; }
}

/* Client-copy cards: use the full available text width. */
:is(.page-id-161, .page-id-164, .page-id-166, .page-id-167, .page-id-169, .page-id-351) .voordelen-block .about-grid__cell-desc,
.page-id-352 .about-grid .about-grid__cell-desc {
	max-width: none;
}



/* Cookiebot declaration — cookie policy page only. */
.page-id-427 .cookie-policy{padding:80px 0 100px;color:var(--color-body);background:var(--color-white)}
.page-id-427 .cookie-policy__title{margin:0 0 60px;color:var(--color-black);font-family:var(--font-heading);font-size:clamp(40px,5.14vw,74px);line-height:1.08;font-weight:800}
.page-id-427 .cookie-policy__declaration{min-width:0;font-family:var(--font-body);font-size:18px;line-height:1.6;overflow-wrap:anywhere}
.page-id-427 #CookieDeclaration{font-family:inherit;font-size:inherit;color:inherit}
.page-id-427 .CookieDeclarationType{border:1px solid #d4d4d4!important;border-radius:20px;padding:24px!important;margin:30px 0!important;overflow-x:auto}
.page-id-427 .CookieDeclarationTypeHeader{font-family:var(--font-heading);font-size:28px;line-height:1.2;color:var(--color-black);margin:0 0 20px}
.page-id-427 .CookieDeclarationTable{font-family:var(--font-body);font-size:16px;line-height:1.5;width:100%;border-collapse:collapse}
.page-id-427 .CookieDeclarationTable th,.page-id-427 .CookieDeclarationTable td{padding:12px 10px;text-align:left;border-bottom:1px solid #deddd9}
.page-id-427 .cookie-policy__declaration a{color:var(--color-red);text-decoration:underline;text-underline-offset:3px}
.page-id-427 .cookie-policy__declaration a:focus-visible{outline:2px solid var(--color-red);outline-offset:3px}
@media(max-width:900px){.page-id-427 .cookie-policy{padding:48px 0 64px}.page-id-427 .cookie-policy__title{font-size:40px;margin-bottom:32px}.page-id-427 .cookie-policy__declaration{font-size:18px}.page-id-427 .CookieDeclarationType{padding:20px!important;border-radius:20px}.page-id-427 .CookieDeclarationTable{min-width:600px}}