/**
 * 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-display', '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-weight: 550;
	font-size: 1.125rem;
	line-height: normal;
	text-decoration: none;
	border: 1px solid transparent;
	transition: opacity 0.15s ease;
}

.btn:hover {
	opacity: 0.85;
}

.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: 760px;
	line-height: 1.02;
	letter-spacing: 0.05em;
}

.hero__subtext {
	opacity: 0.8;
	max-width: 850px;
	font-size: 1.4375rem;
	line-height: 1.48;
	margin: 30px 0;
}

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

.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://computech.mentall.studio/wp-content/uploads/2026/09/Hero-Home-Icon.svg');
	mask-image: url('https://computech.mentall.studio/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: 0.3;
	transform: rotate(167deg);
}

.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.02em;
	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://computech.mentall.studio/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://computech.mentall.studio/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: 34px;
}

.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;
	min-height: clamp(280px, 24vw, 362px);
	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-body);
	font-size: clamp(1.125rem, 1.8vw, 1.625rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

.solutions-block__title {
	font-size: clamp(2.625rem, 4.17vw, 4rem);
	font-weight: 650;
	line-height: 1.05;
	letter-spacing: -0.04em;
}

.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://computech.mentall.studio/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat;
	mask: url("https://computech.mentall.studio/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: repeat(2, minmax(0, 1fr));
		row-gap: 28px;
	}

	.help-section__icon-box {
		padding: 8px 14px;
	}

	.help-section__icon-box:nth-child(2n) {
		border-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://computech.mentall.studio/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat;
	mask: url("https://computech.mentall.studio/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-body);
	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(36px, 10vw, 46px); line-height: 1.08; 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: 0;
	}
	.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: clamp(64px, 7vw, 112px);
}

.card-grid__card {
	grid-column: var(--card-column);
	grid-row: var(--card-row);
	display: flex;
	min-width: 0;
	min-height: 430px;
	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: 48px;
	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(38px, 7vw, 51px);
		line-height: 1.12;
	}

	.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(28px, 3vw, 56px);
	padding-right: clamp(28px, 3vw, 56px);
}

.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__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: 14px;
  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://computech.mentall.studio/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat;
  mask: url("https://computech.mentall.studio/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://computech.mentall.studio/wp-content/uploads/2026/09/Hero-Home-Icon.svg") center / contain no-repeat; mask: url("https://computech.mentall.studio/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://computech.mentall.studio/wp-content/uploads/2026/09/phone.svg");
}
.story-block__contacts a:nth-child(2)::before {
	content: "";
	width: 13px;
	height: 13px;
	background-image: url("https://computech.mentall.studio/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://computech.mentall.studio/wp-content/uploads/2026/09/mail.svg");
	mask-image: url("https://computech.mentall.studio/wp-content/uploads/2026/09/mail.svg");
}
.story-block__contacts .story-block__contact--phone {
	color: var(--color-red);
}
.story-block__contacts .story-block__contact--phone::before {
	-webkit-mask-image: url("https://computech.mentall.studio/wp-content/uploads/2026/09/phone.svg");
	mask-image: url("https://computech.mentall.studio/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: min(100%, 620px);
	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: 14px;
	margin-top: 58px;
}
.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: 70px 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: min(100%, 600px);
	}
	.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: 160px 0 190px;
}
.contact-winkel-block__grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr);
	align-items: start;
	gap: clamp(50px, 6vw, 90px);
}
.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: 12px;
}
.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;
}
.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: -215px;
		right: -460.847px;
		width: 1239.488px;
		height: 580px;
		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: 120px;
	}

	.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;
	}
}