.dpi-career-test {
	position: relative;
	background: var(--dpi-lime);
	padding: 100px 150px 64px 180px;
	min-height: 692px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Floating decor: first question shows a fixed 7-image scatter, later questions show 2 slots whose image career-test.js swaps at random per step (decor-config.php). */
.dpi-career-test__decor {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow-x: clip;
	overflow-y: visible;
}

/* Safari < 16 and Firefox < 81 drop overflow-x: clip; a negative-inset clip path cuts the same two edges. */
@supports not ( overflow-x: clip ) {
	.dpi-career-test__decor {
		clip-path: inset( -100vh 0 -100vh 0 );
	}
}

.dpi-career-test__decor--intro {
	display: block;
}

.dpi-career-test.is-mid .dpi-career-test__decor--intro,
.dpi-career-test.is-results .dpi-career-test__decor--intro {
	display: none;
}

/* Results (is-results) no longer uses this section-level layer — its 2 decor images render inside .dct-cards instead, see below, so they can be positioned against the cards row rather than the whole section. */
.dpi-career-test.is-mid .dpi-career-test__decor--q {
	display: block;
}

/* Generic art-size compensation: source files are 887x887 squares with transparent padding, so a slot's --dct-art (desired ART width) is converted to a canvas width plus negative margins that cancel the padding — see decor-config.php for how rx/pt/pr/pb/pl were measured per image. */
.dpi-career-test__decor-img {
	position: absolute;
	height: auto;
	width: calc( var( --dct-art ) / var( --dct-rx ) );
	margin-top: calc( var( --dct-pt ) * var( --dct-art ) / var( --dct-rx ) * -1 );
	margin-right: calc( var( --dct-pr ) * var( --dct-art ) / var( --dct-rx ) * -1 );
	margin-bottom: calc( var( --dct-pb ) * var( --dct-art ) / var( --dct-rx ) * -1 );
	margin-left: calc( var( --dct-pl ) * var( --dct-art ) / var( --dct-rx ) * -1 );
	transform: rotate( calc( var( --dct-rot, 0deg ) * var( --dct-rot-allow, 0 ) ) );
}

/* Per-image alpha-bbox ratios + rotation opt-in (0/1), measured once from career-test-images/*.webp. */
.dct-img--chemical-flask {
	--dct-rx: 0.5727;
	--dct-pt: 0.1060;
	--dct-pr: 0.2368;
	--dct-pb: 0.0755;
	--dct-pl: 0.1905;
	--dct-rot-allow: 1;
}

.dct-img--electrical-repair {
	--dct-rx: 0.7260;
	--dct-pt: 0.1522;
	--dct-pr: 0.1590;
	--dct-pb: 0.1229;
	--dct-pl: 0.1150;
	--dct-rot-allow: 1;
}

.dct-img--maintenance-icon {
	--dct-rx: 0.7486;
	--dct-pt: 0.1770;
	--dct-pr: 0.1488;
	--dct-pb: 0.1477;
	--dct-pl: 0.1026;
	--dct-rot-allow: 0;
}

.dct-img--industrial-roll {
	--dct-rx: 0.7948;
	--dct-pt: 0.1375;
	--dct-pr: 0.1263;
	--dct-pb: 0.1071;
	--dct-pl: 0.0789;
	--dct-rot-allow: 0;
}

.dct-img--kiosk-machine {
	--dct-rx: 0.5885;
	--dct-pt: 0.1229;
	--dct-pr: 0.2289;
	--dct-pb: 0.0936;
	--dct-pl: 0.1826;
	--dct-rot-allow: 0;
}

.dct-img--tissue-roll {
	--dct-rx: 0.5344;
	--dct-pt: 0.1556;
	--dct-pr: 0.2559;
	--dct-pb: 0.1263;
	--dct-pl: 0.2097;
	--dct-rot-allow: 1;
}

.dct-img--warehouse-logistics {
	--dct-rx: 0.8083;
	--dct-pt: 0.1003;
	--dct-pr: 0.1195;
	--dct-pb: 0.0710;
	--dct-pl: 0.0722;
	--dct-rot-allow: 0;
}

/* Question 1 scatter: 7 fixed slots, positions unchanged from the previous Elementor settings. */
.dpi-career-test__decor-img--1 {
	--dct-art: clamp( 131px, calc( 61.45px + 7.0968vw ), 175px );
	left: -24px;
	top: 37%;
}

.dpi-career-test__decor-img--2 {
	--dct-art: clamp( 139px, calc( 66.29px + 7.4194vw ), 185px );
	right: 3%;
	bottom: 5%;
}

.dpi-career-test__decor-img--3 {
	--dct-art: clamp( 142px, calc( 66.13px + 7.7419vw ), 190px );
	left: 41.5%;
	bottom: -75px;
}

.dpi-career-test__decor-img--4 {
	--dct-art: clamp( 86px, calc( 40.16px + 4.6774vw ), 115px );
	left: 13%;
	bottom: 20px;
}

.dpi-career-test__decor-img--5 {
	--dct-art: clamp( 86px, calc( 40.16px + 4.6774vw ), 115px );
	right: -50px;
	top: 20%;
}

.dpi-career-test__decor-img--6 {
	--dct-art: clamp( 101px, calc( 47.26px + 5.4839vw ), 135px );
	right: 25%;
	top: -25px;
}

.dpi-career-test__decor-img--7 {
	--dct-art: clamp( 116px, calc( 54.35px + 6.2903vw ), 155px );
	left: 6%;
	top: -25px;
	--dct-rot: 90deg;
}

/* Question 2+: 2 shared slots, image swapped at random per step by career-test.js (must stay one 'db' left / one 'dt' right image, see decor-config.php). */
.dpi-career-test__decor-img--q-left {
	--dct-art: clamp( 262px, calc( 122.9px + 14.1935vw ), 350px );
	left: -70px;
	bottom: -120px;
	--dct-rot: 25deg;
}

.dpi-career-test__decor-img--q-right {
	--dct-art: clamp( 375px, calc( 177.42px + 20.1613vw ), 500px );
	right: -41px;
	top: -99px;
}

/* Per-image --q-right overrides (client-requested sizes) — the shared 500px default now only applies to industrial-roll/warehouse-logistics. Each override targets just that image/slot pairing, not the image's other appearances (e.g. tissue-roll/kiosk-machine's own dedicated intro slots, --decor-img--4/--6, are untouched by these selectors). */
.dpi-career-test__decor-img--q-right.dct-img--tissue-roll {
	--dct-art: clamp( 262px, calc( 122.9px + 14.1935vw ), 350px );
}

.dpi-career-test__decor-img--q-right.dct-img--kiosk-machine {
	--dct-art: clamp( 300px, calc( 141.94px + 16.129vw ), 400px );
}

@media ( max-width: 980px ) {
	/* Unlike the old "hidden below 980px" behaviour, decor stays visible on mobile — no rotation, smaller/repositioned (image-naming-convention.md), and only 4 of the 7 intro images to avoid crowding the copy. No display override needed here: the base .dpi-career-test__decor/--intro/--q rules above already show exactly one layer per is-mid/is-results state on every viewport — forcing display:block here would show --q permanently, bypassing that state toggle. */

	.dpi-career-test__decor-img--2,
	.dpi-career-test__decor-img--6,
	.dpi-career-test__decor-img--7 {
		display: none;
	}

	/* Bled above/below the section (negative top/bottom, into the neighbouring black spacer) — the title, fieldset and "Weiter" button occupy nearly the full mobile width, so any decor inside the section's own height would sit on top of them. Measured against .dct-title/.dct-fieldset/[data-action=next] on this section's own layout, not guessed. */
	.dpi-career-test__decor-img--1 {
		--dct-art: clamp( 48px, calc( -96.0px + 40.0vw ), 60px );
		left: -10px;
		top: -30px;
		right: auto;
		bottom: auto;
	}

	.dpi-career-test__decor-img--3 {
		--dct-art: clamp( 48px, calc( -96.0px + 40.0vw ), 60px );
		left: 6%;
		bottom: -40px;
		right: auto;
		top: auto;
	}

	.dpi-career-test__decor-img--4 {
		--dct-art: clamp( 56px, calc( -112.0px + 46.6667vw ), 70px );
		right: 4%;
		top: 10%;
		left: auto;
		bottom: auto;
	}

	.dpi-career-test__decor-img--5 {
		--dct-art: clamp( 44px, calc( -88.0px + 36.6667vw ), 55px );
		right: 5%;
		bottom: -48px;
		left: auto;
		top: auto;
	}

	/* Bled below the section (negative bottom) — "zurück"/"weiter" span nearly the full width at the bottom, so any on-section placement sits on top of them; measured against [data-action=back] on this section's own layout. Kept close enough to the section edge that most of the image still sits on the green background (previously -70px bled it entirely into the black area below, floating disconnected). */
	.dpi-career-test__decor-img--q-left {
		--dct-art: clamp( 40px, calc( -80.0px + 33.3333vw ), 50px );
		left: 4%;
		bottom: -35px;
		--dct-rot: 0deg;
	}

	.dpi-career-test__decor-img--q-right {
		--dct-art: clamp( 64px, calc( -128.0px + 53.3333vw ), 80px );
		right: 4%;
		top: 4%;
	}

	/* The desktop-only per-image --q-right overrides above (tissue-roll/kiosk-machine) have higher specificity (2 classes) than the mobile rule just above, so without this they'd leak into mobile and win the cascade there too — reset both back to the same mobile clamp every other 'dt' image in this slot uses. */
	.dpi-career-test__decor-img--q-right.dct-img--tissue-roll,
	.dpi-career-test__decor-img--q-right.dct-img--kiosk-machine {
		--dct-art: clamp( 64px, calc( -128.0px + 53.3333vw ), 80px );
	}
}

.dpi-career-test__inner {
	position: relative;
	z-index: 1;
	max-width: 1140px;
	width: 100%;
	margin: 0 auto;
	display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    gap: 40px;
    align-items: start;
}

.dpi-career-test__main {
	justify-self: end;
	width: 100%;
}

/* Keeps progress/question/options centered even once .main stretches to the full width. */
.dct-narrow {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
}

/* Wraps long compounds; all typography (color/font/size/weight/line-height) lives in Elementor Style-tab controls, not here. */
.dct-title,
.dct-description,
.dct-heading,
.dct-hint,
.dct-opt-text,
.dct-btn,
.dct-results-title,
.dct-card__score,
.dct-card__name,
.dct-card__meta,
.dct-card__distance,
.dct-card__tags span {
	overflow-wrap: break-word;
}

/* ---- left column: title + description ------------------------------ */
/* Corner brackets come from the shared `dasformat` utility classes (Elementor Kit Custom CSS) — extend those, don't reimplement here. */
.dct-title {
	width: fit-content !important;
	margin: 0 0 64px;
}

.dct-description {
	max-width: 32ch;
	margin: 0;
}

/* ---- progress bar ------------------------------------------------ */
.dct-prog {
	display: flex;
	gap: 8px;
	margin: 0 0 80px;
}

.dct-prog i {
	flex: 1;
	height: 9px;
	background: var(--dpi-lime-fg);
	opacity: 0.22;
	border-radius: 1px;
}

.dct-prog i.is-done {
	opacity: 1;
	background: var(--dpi-orange);
}

.dct-prog i.is-now {
	opacity: 1;
	background: var(--dpi-lime-fg);
}

/* ---- question ------------------------------------------------------ */
/* Not shown visually (only the progress bar is) — screen-reader only, hidden via the standard clip technique. */
.dct-qnum {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.dct-heading {
	margin: 0 0 24px;
}

.dct-hint {
	margin: 0 0 20px;
}

.dct-fieldset {
	border: 0;
	padding: 0;
	max-width: 330px;
    margin-bottom: 30px;
}

/* Only the first-question state gets pushed right; the state lives on .dpi-career-test (toggled by career-test.js). */
.dpi-career-test:not(.is-mid):not(.is-results) .dct-fieldset {
	margin-left: auto;
}

.dct-opts {
	display: grid;
	gap: 22px;
	margin: 0 0 28px;
	list-style: none;
	padding: 0;
}

.dct-opt {
	display: flex;
	align-items: center;
	gap: 17px;
	cursor: pointer;
}

.dct-opt input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.dct-dot {
	flex: none;
	width: 43px;
	height: 43px;
	border-radius: 50%;
	border: 2.89px solid var(--dpi-blue);
	background: #fdeee6;
	transition: background-color 0.15s ease;
}

.dct-opt input:checked + .dct-dot {
	background: var(--dpi-blue);
}

.dct-opt input:focus-visible + .dct-dot {
	outline: 3px solid var(--dpi-dark);
	outline-offset: 3px;
}

.dct-opt.is-sel .dct-opt-text {
	font-weight: 700 !important;
	text-decoration: underline;
}

/* ---- nav buttons (shared by question + results) --------------------- */
.dct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	min-height: 55px;
	padding: 10px 28px;
	cursor: pointer;
	text-decoration: none;
}

.dct-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.dct-nav {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---- results + mid-test (question 2 onward) --------------------------- */
/* Only the very first question keeps the two-column layout; everything after drops to one column. */
.dpi-career-test.is-results .dpi-career-test__inner,
.dpi-career-test.is-mid .dpi-career-test__inner {
	grid-template-columns: 1fr;
}

.dpi-career-test.is-results .dpi-career-test__aside,
.dpi-career-test.is-mid .dpi-career-test__aside {
	display: none;
}

.dpi-career-test.is-results .dpi-career-test__main,
.dpi-career-test.is-mid .dpi-career-test__main {
	justify-self: stretch;
}

.dct-results-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 40px;
}

.dct-results-title {
	margin: 0;
}

.dct-results-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: stretch;
}

.dct-cards {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* No overflow-x: clip here, unlike .dpi-career-test__decor — the whole point of these 2 images is to bleed mostly OUTSIDE .dct-cards' own edges (see the "result-left"/"result-right" rule below); clipping them to this box would hide exactly that. .dct-cards sits well inside the section's own padding, so this bleed never reaches the page edge and needs no page-level scrollbar guard, unlike the section-wide decor layer. */

/* Results decor: same .dpi-career-test__decor-img base (art-size compensation + rotation), but positioned against .dct-cards instead of the whole section. Fixed images, not randomized (career-test.js: kiosk-machine left, industrial-roll right — client request). Left sits behind the cards (negative z-index, top-left corner); right overlaps in front of them (positive z-index, bottom-right corner). */
.dpi-career-test__decor-img--result-left,
.dpi-career-test__decor-img--result-right {
	pointer-events: none;
	transform: rotate( calc( var( --dct-rot, 0deg ) * var( --dct-rot-allow, 0 ) ) );
}

.dpi-career-test__decor-img--result-left {
	--dct-art: clamp( 64px, calc( 30.81px + 3.3871vw ), 85px );
	top: -20px;
	left: -70px;
	z-index: -1;
}

.dpi-career-test__decor-img--result-right {
	--dct-art: clamp( 71px, calc( 33.06px + 3.871vw ), 95px );
	bottom: -20px;
	right: -70px;
	z-index: 1;
}

/* .dct-cards is one flex row on desktop but stacks the 3 cards into a single column on mobile — "bottom-anchored, flanking the row" no longer has a row to flank, it would just land on the last card's text. Hidden here rather than repositioned, same call already made for 3 of the 7 intro images and both question-step slots on narrow viewports. */
@media ( max-width: 980px ) {
	.dpi-career-test__decor-img--result-left,
	.dpi-career-test__decor-img--result-right {
		display: none;
	}
}

.dct-postcode {
	display: grid;
	gap: 8px;
	max-width: 360px;
	margin: 0 0 24px;
}

.dct-postcode__controls {
	display: flex;
	gap: 8px;
}

.dct-postcode input {
	min-width: 0;
	padding: 10px 14px;
	border: 2px solid var(--dpi-blue);
	border-radius: 0;
}

.dct-postcode__message {
	min-height: 1.4em;
	margin: 0;
}

.dct-card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	min-height: 250px;
	color: #eeeeed;
	background: var(--dpi-orange);
}

.dct-card__link {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 330px;
	padding: 20px;
	color: inherit;
	text-decoration: none;
}

.dct-card__link:hover,
.dct-card__link:focus {
	color: inherit;
}

/* Beat Elementor kit link colours (.elementor-kit-* a) inside result cards. */
.dct-cards .dct-card a,
.dct-cards .dct-card a:hover,
.dct-cards .dct-card a:focus {
	color: #eeeeed;
}

.dct-card__tags {
	position: absolute;
	top: 18px;
	left: 18px;
	right: 52px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Same shared bookmark implementation as Career Grid: data-dpi-save-item + is-saved read/toggled by dpi-saved-items.js, icon from the Merken-Icon Elementor controls (see career-test.php). */
.dct-card .dct-save {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: 16px;
	cursor: pointer;
}

.dct-card .dct-save:hover,
.dct-card .dct-save:focus {
	color: inherit;
	background: transparent;
}

.dct-card .dct-save i {
	width: auto;
	height: auto;
	max-height: none;
	font-size: 27px;
	line-height: 1;
}

.dct-card .dct-save svg {
	width: 21px;
	height: 27px;
	max-height: 27px;
	fill: currentColor;
}

.dct-card .dct-save-icon--filled {
	display: none;
}

.dct-card .dct-save.is-saved .dct-save-icon:not(.dct-save-icon--filled) {
	display: none;
}

.dct-card .dct-save.is-saved .dct-save-icon--filled {
	display: block;
}

.dct-card .dct-save.is-saved .dct-save-icon svg,
.dct-card .dct-save.is-saved .dct-save-icon svg path {
	fill: currentColor !important;
	stroke: currentColor !important;
}

.dct-card__score {
	margin: 0 0 6px;
}

.dct-card__name {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.dct-card__meta,
.dct-card__distance {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.35;
}

.dct-card__distance:empty {
	display: none;
}

.dct-empty {
	margin: 0;
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.dct-card {
		flex-basis: calc( ( 100% - 12px ) / 2 );
	}
}

@media ( max-width: 767px ) {
	.dct-card {
		flex-basis: 100%;
	}
}

/* ---- responsive: single column below the point the two columns pinch --- */
@media ( max-width: 980px ) {
	.dpi-career-test__inner {
		grid-template-columns: 1fr;
	}

	.dpi-career-test__main {
		justify-self: stretch;
	}

	.dct-description {
		max-width: none;
	}

	/* Unlike desktop, mobile keeps the title/description visible above every question. */
	.dpi-career-test.is-mid .dpi-career-test__aside {
		display: block;
	}

	/* Undo the desktop-only right-push for the first-question fieldset. */
	.dpi-career-test:not(.is-mid):not(.is-results) .dct-fieldset {
		margin-left: 0;
	}

	.dct-prog {
		margin-bottom: 55px;
	}

	.dct-opts {
		gap: 15px;
	}

	.dct-dot {
		width: 27px;
		height: 27px;
	}
}

@media ( max-width: 700px ) {
	.dpi-career-test {
		padding: 60px 50px;
	}

	.dct-nav,
	.dct-results-actions {
		width: 100%;
	}

	.dct-results-actions {
		margin-top: 20px;
	}

	.dct-btn {
		flex: 1;
	}

	.dct-postcode__controls {
		flex-wrap: wrap;
	}
}