.flex-layout.hero_primary_werkenbij {
	--hero-su: var(--su);
	--hero-photo-scale: .85;
	--layout-spacing-top: 0;
	--layout-spacing-bottom: 0;
	--text-color: var(--white-100);
	position: relative;
	display: grid;
	height: auto;
	min-height: max(600px, calc(100dvh - var(--nova-header-flow-height, var(--pk-header-height))));
	overflow: hidden;
	--hero-gradient: radial-gradient(126.97% 181.6% at 137.1% 185.48%, var(--support-1) 0%, transparent 100%);
	--hero-gradient-origin: 100% 100%;
	background: var(--hero-gradient), var(--primary-100);
}

.flex-layout.hero_primary_werkenbij .hero-collage,
.flex-layout.hero_primary_werkenbij .hero-content {
	position: absolute;
	inset: 0;
}

.flex-layout.hero_primary_werkenbij .hero-collage {
	z-index: 2;
}

.flex-layout.hero_primary_werkenbij .hero-content {
	z-index: 3;
	width: 100%;
	max-width: none;
	margin: 0;
	pointer-events: none;
}

.flex-layout.hero_primary_werkenbij > .nova-cursor {
	z-index: 1;
}

.flex-layout.hero_primary_werkenbij .hero-photo {
	position: absolute;
	overflow: hidden;
	will-change: transform;
}

.flex-layout.hero_primary_werkenbij .hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	will-change: transform;
}

.flex-layout.hero_primary_werkenbij .photo-top {
	top: 0;
	left: 20.83%;
	width: 11.81%;
	aspect-ratio: 210 / 157;
}

.flex-layout.hero_primary_werkenbij .photo-team {
	top: 16.5%;
	left: 52.08%;
	width: 25%;
	aspect-ratio: 445 / 315;
}

.flex-layout.hero_primary_werkenbij .photo-workspace {
	top: 39%;
	left: 5.21%;
	z-index: -1;
	width: 17.77%;
	aspect-ratio: 316 / 225;
	pointer-events: auto;
}

.flex-layout.hero_primary_werkenbij .photo-collaboration {
	top: 56%;
	left: 42.71%;
	width: 11.81%;
	aspect-ratio: 1;
}

.flex-layout.hero_primary_werkenbij .photo-conversation {
	top: 53%;
	right: 5.21%;
	width: 17.77%;
	aspect-ratio: 1;
}

.flex-layout.hero_primary_werkenbij .hero-heading {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	font-family: var(--pk-heading-font-family);
	font-size: max(4rem, calc(8.75 * var(--hero-su)));
	font-weight: var(--pk-heading-font-weight);
	line-height: 1.1;
	color: var(--white-100);
	pointer-events: none;
}

.flex-layout.hero_primary_werkenbij .hero-heading > span {
	position: absolute;
	display: block;
	white-space: nowrap;
}

.flex-layout.hero_primary_werkenbij .heading-top {
	top: 11.91%;
	left: 11.97%;
}

.flex-layout.hero_primary_werkenbij .heading-bottom {
	right: 11.51%;
	top: 72.51%;
	text-align: right;
}

.flex-layout.hero_primary_werkenbij .cursor-anchor {
	position: absolute;
	top: 59.88%;
	left: 63.49%;
	width: 0;
	height: 0;
}

.flex-layout.hero_primary_werkenbij .copy-col {
	position: absolute;
	top: 73.42%;
	left: 4.63%;
	z-index: 2;
	width: 34%;
	max-width: none;
	pointer-events: auto;
}

.flex-layout.hero_primary_werkenbij .copy-col .pk-text {
	max-width: max(26.625rem, calc(26.625 * var(--su)));
	color: var(--white-100);
	font-size: var(--body-s-regular);
}

.flex-layout.hero_primary_werkenbij .copy-col .pk-button-group {
	flex-wrap: nowrap;
	width: max-content;
}

/* Desktop: ontwerp is 1512 breed. Content op het grid, foto's vrij in su-eenheden
   (design-px / 16), boven- en onderkant elk aan hun eigen rand verankerd. */
@media screen and (min-width: 992px) {

	.flex-layout.hero_primary_werkenbij {
		--layout-spacing-bottom: max(5rem, calc(7.5 * var(--hero-su)));
	}

	.flex-layout.hero_primary_werkenbij .hero-collage {
		inset: 0;
		width: 100%;
		max-width: calc(94.5 * var(--hero-su));
		margin-inline: auto;
	}

	.flex-layout.hero_primary_werkenbij .hero-content {
		position: relative;
		inset: auto;
		grid-area: 1 / 1;
		grid-template-rows: 1fr auto;
		max-width: calc(86.5 * var(--hero-su));
		padding-block: 0;
		margin-inline: auto;
		--pk-column-gap: calc(1.5 * var(--hero-su));
	}

	.flex-layout.hero_primary_werkenbij .hero-heading {
		position: static;
		display: grid;
		grid-column: 1 / -1;
		grid-row: 1 / -1;
		grid-template-columns: subgrid;
		grid-template-rows: subgrid;
	}

	.flex-layout.hero_primary_werkenbij .hero-heading > span {
		position: static;
	}

	.flex-layout.hero_primary_werkenbij .heading-top {
		grid-column: 2 / -1;
		grid-row: 1;
		align-self: start;
		margin-top: max(10rem, calc(10.0625 * var(--hero-su)));
	}

	.flex-layout.hero_primary_werkenbij .heading-bottom {
		grid-column: 6 / 12;
		grid-row: 2;
		justify-self: end;
		align-self: end;
		margin-bottom: calc(-0.9375 * var(--hero-su));
	}

	.flex-layout.hero_primary_werkenbij .copy-col {
		position: static;
		grid-column: 1 / span 4;
		grid-row: 2;
		align-self: end;
		width: auto;
	}

	.flex-layout.hero_primary_werkenbij .photo-top {
		top: 0;
		left: calc((18.6875 + 13.125 * (1 - var(--hero-photo-scale)) / 2) * var(--hero-su));
		width: calc(13.125 * var(--hero-photo-scale) * var(--hero-su));
	}

	.flex-layout.hero_primary_werkenbij .photo-team {
		top: 15.38%;
		left: calc((49.25 + 27.8125 * (1 - var(--hero-photo-scale)) / 2) * var(--hero-su));
		width: calc(27.8125 * var(--hero-photo-scale) * var(--hero-su));
	}

	/* In het grid: links uitgelijnd met de tekst, 5rem erboven. */
	.flex-layout.hero_primary_werkenbij .photo-workspace {
		position: relative;
		top: auto;
		left: auto;
		grid-column: 1 / span 4;
		grid-row: 1;
		align-self: end;
		justify-self: start;
		margin-bottom: 5rem;
		width: calc(19.75 * var(--hero-photo-scale) * var(--hero-su));
	}

	.flex-layout.hero_primary_werkenbij .photo-collaboration {
		top: auto;
		bottom: 24.03%;
		left: calc((35.4375 + 13.125 * (1 - var(--hero-photo-scale)) / 2) * var(--hero-su));
		width: calc(13.125 * var(--hero-photo-scale) * var(--hero-su));
	}

	.flex-layout.hero_primary_werkenbij .photo-conversation {
		top: auto;
		right: auto;
		bottom: 16.8%;
		left: calc((72.5625 + 17.9375 * (1 - var(--hero-photo-scale))) * var(--hero-su));
		width: calc(17.9375 * var(--hero-photo-scale) * var(--hero-su));
	}
}

@media screen and (max-width: 991px) {

	.flex-layout.hero_primary_werkenbij {
		--layout-spacing-bottom: max(4rem, calc(6 * var(--su)));
		display: grid;
		height: auto;
		min-height: calc(100svh - var(--nova-header-flow-height, var(--pk-header-height)));
		--hero-gradient: radial-gradient(119.16% 178% at 96.2% 162.32%, var(--support-1) 0%, transparent 96.33%);
		--hero-gradient-origin: 96.2% 100%;
	}

	.flex-layout.hero_primary_werkenbij .hero-collage {
		position: absolute;
		inset: 0;
		display: block;
		margin: 0;
	}

	.flex-layout.hero_primary_werkenbij .hero-photo {
		position: absolute;
	}

	.flex-layout.hero_primary_werkenbij .photo-top {
		display: none;
	}

	.flex-layout.hero_primary_werkenbij .photo-team {
		top: 11%;
		right: -7%;
		left: auto;
		width: 43%;
		aspect-ratio: 445 / 315;
	}

	.flex-layout.hero_primary_werkenbij .photo-workspace {
		top: 31%;
		left: -9%;
		width: 34%;
		aspect-ratio: 316 / 225;
	}

	.flex-layout.hero_primary_werkenbij .photo-collaboration {
		top: 47%;
		left: 43%;
		width: 22%;
		aspect-ratio: 1;
	}

	.flex-layout.hero_primary_werkenbij .photo-conversation {
		top: 51%;
		right: -7%;
		left: auto;
		width: 31%;
		aspect-ratio: 1;
	}

	/* Content in de flow, onderaan uitgelijnd: kop boven de tekst, zoals hero_primary. */
	/* Static, zodat de foto in de content aan de hero verankerd blijft. */
	.flex-layout.hero_primary_werkenbij .hero-content {
		position: static;
		inset: auto;
		grid-area: 1 / 1;
		grid-template-rows: 1fr auto auto;
		padding-block: 0;
		margin-inline: auto;
		pointer-events: none;
		gap: 0;
	}

	/* Kop loopt als één zin door: de twee delen zijn inline. */
	.flex-layout.hero_primary_werkenbij .hero-heading {
		position: static;
		grid-column: 1 / -1;
		grid-row: 2;
		margin-bottom: 1rem;
		padding-top: calc(var(--pk-header-height) + 2rem);
	}

	.flex-layout.hero_primary_werkenbij .hero-heading > span {
		position: static;
		display: inline;
		white-space: normal;
	}

	.flex-layout.hero_primary_werkenbij .cursor-anchor {
		top: 50%;
		left: 50%;
	}

	.flex-layout.hero_primary_werkenbij .copy-col {
		position: static;
		grid-column: 1 / -1;
		grid-row: 3;
		width: auto;
		max-width: 32rem;
		margin: 0;
		pointer-events: auto;
	}
}

@media screen and (max-width: 767px) {

	.flex-layout.hero_primary_werkenbij .photo-team {
		top: 12%;
		right: -15%;
		width: 55%;
	}

	.flex-layout.hero_primary_werkenbij .photo-workspace {
		top: 34%;
		left: -15%;
		width: 43%;
	}

	.flex-layout.hero_primary_werkenbij .photo-collaboration {
		display: none;
	}

	.flex-layout.hero_primary_werkenbij .photo-conversation {
		top: 52%;
		right: -14%;
		width: 39%;
	}

	.flex-layout.hero_primary_werkenbij .copy-col {
		max-width: 25rem;
	}

	.flex-layout.hero_primary_werkenbij .copy-col .pk-button-group {
		flex-wrap: wrap;
		width: 100%;
	}

	.flex-layout.hero_primary_werkenbij .nova-cursor {
		display: none;
	}
}

@media screen and (max-width: 767px) and (max-height: 720px) {

	.flex-layout.hero_primary_werkenbij .photo-conversation {
		top: 46%;
	}
}