/* Elfcon widget styles */

/* Conventions
 * - Colours/type come from the kit: var( --e-global-color-<id>, #fallback ) and
 *   var( --e-global-typography-<id>-<prop>, fallback ) — ids in dev/docs/FIGMA-MAP.md.
 * - Design values live here, not in control defaults.
 * - Two-class selectors (.elfcon-w .x) for anything the kit or a reset can match.
 * - Breakpoints: tablet ≤1024px, mobile ≤767px. Repeat variant classes inside media queries.
 * - Figma gaps are used verbatim: .elfcon-trim emulates Figma's cap/baseline leading trim.
 */

/* Shared */

/* Leading trim: Figma measures text from cap height to baseline. Open Sans:
   cap 0.714em, ascent 1.069em, descent 0.293em → trim top = 0.5lh − 0.326em,
   bottom = 0.5lh − 0.388em. Follows any font-size/line-height change. */
.elfcon-w .elfcon-trim {
	margin-block: calc( 0.326em - 0.5lh ) calc( 0.388em - 0.5lh );
}

/* Type styles (kit Global Fonts) */
.elfcon-w .elfcon-type-h1,
.elfcon-w .elfcon-type-h2,
.elfcon-w .elfcon-type-h3,
.elfcon-w .elfcon-type-h4,
.elfcon-w .elfcon-type-body,
.elfcon-w .elfcon-type-label {
	font-family: var( --e-global-typography-text-font-family, "Open Sans" ), sans-serif;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.elfcon-w .elfcon-type-h1 {
	font-size: var( --e-global-typography-h1-font-size, 52px );
	line-height: var( --e-global-typography-h1-line-height, 64px );
}

.elfcon-w .elfcon-type-h2 {
	font-size: var( --e-global-typography-h2-font-size, 40px );
	line-height: var( --e-global-typography-h2-line-height, 52px );
}

.elfcon-w .elfcon-type-h3 {
	font-size: var( --e-global-typography-h3-font-size, 32px );
	line-height: var( --e-global-typography-h3-line-height, 40px );
}

.elfcon-w .elfcon-type-h4 {
	font-size: var( --e-global-typography-h4-font-size, 24px );
	line-height: var( --e-global-typography-h4-line-height, 32px );
}

.elfcon-w .elfcon-type-body {
	font-size: var( --e-global-typography-body-font-size, 16px );
	line-height: var( --e-global-typography-body-line-height, 24px );
}

.elfcon-w .elfcon-type-label {
	font-size: var( --e-global-typography-label-font-size, 16px );
	line-height: var( --e-global-typography-label-line-height, 24px );
	text-transform: var( --e-global-typography-label-text-transform, uppercase );
}

/* Long Swedish compounds break rather than overflow on narrow phones (320) */
@media (max-width: 767px) {
	.elfcon-w :is( .elfcon-type-h1, .elfcon-type-h2, .elfcon-type-h3, .elfcon-type-h4 ) {
		overflow-wrap: anywhere; /* unlike break-word, also shrinks a flex item's min-content */
	}
}

/* Rich text (WYSIWYG bodies) */
.elfcon-w .elfcon-rte > * {
	margin: 0;
}

.elfcon-w .elfcon-rte > * + * {
	margin-top: 10px; /* Figma paragraph spacing */
}

.elfcon-w .elfcon-rte ul,
.elfcon-w .elfcon-rte ol {
	padding-left: 24px;
}

/* Headings inside rich text: sections 40 apart, H4 → text 24 (Privacy Policy 36:206).
   Paragraph line boxes aren't trimmed inside the block, so their 6px/6.6px
   half-leading is taken off the Figma gaps here. */
.elfcon-w .elfcon-rte > :is( h2, h3, h4 ) {
	margin-top: calc( 40px - 6px + 0.326em - 0.5lh );
	margin-bottom: calc( 24px - 6.6px + 0.388em - 0.5lh );
}

.elfcon-w .elfcon-rte > :is( h2, h3, h4 ):first-child {
	margin-top: calc( 6.6px + 0.326em - 0.5lh );
}

.elfcon-w .elfcon-rte > :is( h2, h3, h4 ) + * {
	margin-top: 0;
}

/* Headings inside running text all look like H4 (Figma legal pages); the level is
   semantic — sections under the page's H1 are h2 */
.elfcon-w .elfcon-rte h2,
.elfcon-w .elfcon-rte h3,
.elfcon-w .elfcon-rte h4 {
	font-size: var( --e-global-typography-h4-font-size, 24px );
	line-height: var( --e-global-typography-h4-line-height, 32px );
	font-weight: 400;
}

.elfcon-w .elfcon-rte :is( h2, h3, h4 ) {
	color: var( --e-global-color-primary, #051428 ); /* Dark Blue */
}

.elfcon-w .elfcon-rte hr {
	height: 0;
	margin: calc( 40px - 6px ) 0 0;
	border: 0;
	border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 ); /* Medium Grey */
	background: none;
}

.elfcon-w .elfcon-rte a {
	color: inherit;
	text-decoration: underline;
}

.elfcon-w .elfcon-rte a:hover {
	color: var( --e-global-color-secondary, #d22828 ); /* Red */
}

/* Buttons — CTA_BOX themes, arrow link, text link */
.elfcon-w .elfcon-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var( --e-global-typography-button-font-family, "Open Sans" ), sans-serif;
	font-size: var( --e-global-typography-button-font-size, 16px );
	font-weight: var( --e-global-typography-button-font-weight, 600 );
	line-height: var( --e-global-typography-button-line-height, 24px );
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.elfcon-w .elfcon-btn--is-box {
	padding: 11px; /* Figma 12 with an inside stroke = 11 + 1px border → 35px tall */
	border: 1px solid var( --elfcon-btn-bd );
	background-color: var( --elfcon-btn-bg );
	color: var( --elfcon-btn-fg );
}

.elfcon-w a.elfcon-btn--is-box:hover,
.elfcon-w a.elfcon-btn--is-box:focus-visible,
.elfcon-w button.elfcon-btn--is-box:hover,
.elfcon-w button.elfcon-btn--is-box:focus-visible {
	border-color: var( --elfcon-btn-bd-h );
	background-color: var( --elfcon-btn-bg-h );
	color: var( --elfcon-btn-fg-h );
}

.elfcon-w .elfcon-btn--red-blue,
.elfcon-w .elfcon-btn--red-outline,
.elfcon-w .elfcon-btn--red-white {
	--elfcon-btn-bg: var( --e-global-color-secondary, #d22828 ); /* Red */
	--elfcon-btn-bd: var( --e-global-color-secondary, #d22828 );
	--elfcon-btn-fg: var( --e-global-color-white, #ffffff );
	--elfcon-btn-bg-h: transparent;
}

.elfcon-w .elfcon-btn--red-blue {
	--elfcon-btn-bd-h: var( --e-global-color-primary, #051428 ); /* Dark Blue */
	--elfcon-btn-fg-h: var( --e-global-color-primary, #051428 );
}

.elfcon-w .elfcon-btn--red-outline {
	--elfcon-btn-bd-h: var( --e-global-color-secondary, #d22828 );
	--elfcon-btn-fg-h: var( --e-global-color-secondary, #d22828 );
}

.elfcon-w .elfcon-btn--red-white {
	--elfcon-btn-bd-h: var( --e-global-color-white, #ffffff );
	--elfcon-btn-fg-h: var( --e-global-color-white, #ffffff );
}

.elfcon-w .elfcon-btn--white {
	--elfcon-btn-bg: var( --e-global-color-white, #ffffff );
	--elfcon-btn-bd: var( --e-global-color-white, #ffffff );
	--elfcon-btn-fg: var( --e-global-color-primary, #051428 );
	--elfcon-btn-bg-h: transparent;
	--elfcon-btn-bd-h: var( --e-global-color-white, #ffffff );
	--elfcon-btn-fg-h: var( --e-global-color-white, #ffffff );
}

.elfcon-w .elfcon-btn--white-outline {
	--elfcon-btn-bg: transparent;
	--elfcon-btn-bd: var( --e-global-color-white, #ffffff );
	--elfcon-btn-fg: var( --e-global-color-white, #ffffff );
	--elfcon-btn-bg-h: var( --e-global-color-white, #ffffff );
	--elfcon-btn-bd-h: var( --e-global-color-white, #ffffff );
	--elfcon-btn-fg-h: var( --e-global-color-primary, #051428 );
}

/* <button> in a button style (video opener): undo kit/reset button styles */
.elfcon-w button.elfcon-btn {
	margin: 0;
	border-radius: 0;
	text-transform: none;
	cursor: pointer;
}

/* Arrow link: hover lengthens the shaft 24 → 34px and turns red (CTA_ARROW Variant2) */
.elfcon-w .elfcon-btn--is-arrow {
	font-family: var( --e-global-typography-link-font-family, "Open Sans" ), sans-serif;
	font-size: var( --e-global-typography-link-font-size, 16px );
	font-weight: var( --e-global-typography-link-font-weight, 600 );
	line-height: var( --e-global-typography-link-line-height, 24px );
	letter-spacing: var( --e-global-typography-link-letter-spacing, 0.04em );
	color: var( --e-global-color-primary, #051428 ); /* Dark Blue */
}

/* White stays white on hover (the arrow growth is the cue) — beats the kit's `a:hover` red */
.elfcon-w .elfcon-btn--arrow-light,
.elfcon-w a.elfcon-btn--arrow-light,
.elfcon-w a.elfcon-btn--arrow-light:hover,
.elfcon-w a.elfcon-btn--arrow-light:focus-visible {
	color: var( --e-global-color-white, #ffffff );
}

.elfcon-w .elfcon-btn__icon {
	flex: none;
	width: 24px;
	height: 24px;
	transition: width 0.2s ease;
}

.elfcon-w .elfcon-btn__icon .elfcon-arrow {
	display: block;
	overflow: visible;
	fill: currentColor;
}

.elfcon-w .elfcon-arrow__shaft,
.elfcon-w .elfcon-arrow__head {
	transform-box: fill-box;
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.elfcon-w a.elfcon-btn--arrow:hover,
.elfcon-w a.elfcon-btn--arrow:focus-visible {
	color: var( --e-global-color-secondary, #d22828 ); /* Red */
}

.elfcon-w a.elfcon-btn--is-arrow:hover .elfcon-btn__icon,
.elfcon-w a.elfcon-btn--is-arrow:focus-visible .elfcon-btn__icon,
.elfcon-w .elfcon-is-hover-parent:hover .elfcon-btn__icon {
	width: 34px;
}

.elfcon-w a.elfcon-btn--is-arrow:hover .elfcon-arrow__shaft,
.elfcon-w a.elfcon-btn--is-arrow:focus-visible .elfcon-arrow__shaft,
.elfcon-w .elfcon-is-hover-parent:hover .elfcon-arrow__shaft {
	transform: scaleX( 1.8 ); /* 12.5 → 22.5 */
}

.elfcon-w a.elfcon-btn--is-arrow:hover .elfcon-arrow__head,
.elfcon-w a.elfcon-btn--is-arrow:focus-visible .elfcon-arrow__head,
.elfcon-w .elfcon-is-hover-parent:hover .elfcon-arrow__head {
	transform: translateX( 10px );
}

/* Text link: red, underlined (Kvalitet / Code of Conduct documents) */
.elfcon-w .elfcon-btn--text {
	font-family: var( --e-global-typography-body-font-family, "Open Sans" ), sans-serif;
	font-size: var( --e-global-typography-body-font-size, 16px );
	font-weight: var( --e-global-typography-body-font-weight, 400 );
	line-height: var( --e-global-typography-body-line-height, 24px );
	color: var( --e-global-color-secondary, #d22828 ); /* Red */
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Trimmed like Figma (11px tall) but keeps a 24px tap area */
.elfcon-w .elfcon-btn--text {
	padding-block: 6.3px;
	margin-block: -6.3px;
}

.elfcon-w a.elfcon-btn--text:hover,
.elfcon-w a.elfcon-btn--text:focus-visible {
	color: var( --e-global-color-primary, #051428 ); /* stand-in hover, not from Figma */
}

.elfcon-w .elfcon-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Section intro */
.elfcon-intro {
	display: grid;
	grid-template-columns: minmax( 0, 433fr ) minmax( 0, 773fr ); /* 433 | 134 | 773 of 1340 */
	column-gap: 10%;
	row-gap: 64px;
	align-items: start;
}

.elfcon-intro .elfcon-intro__label {
	grid-column: 1 / -1;
	color: var( --e-global-color-primary, #051428 ); /* Dark Blue */
}

.elfcon-intro .elfcon-intro__left {
	grid-column: 1;
}

.elfcon-intro .elfcon-intro__right {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	max-width: var( --elfcon-intro-right, 660px );
}

.elfcon-intro .elfcon-intro__heading,
.elfcon-intro .elfcon-intro__left-heading {
	color: var( --e-global-color-primary, #051428 );
	text-wrap: pretty;
}

.elfcon-intro .elfcon-intro__body {
	color: var( --e-global-color-text, #051428 );
}

/* H4 statement → text is 24 in Figma, H2/H3 → text 40 (the column gap) */
.elfcon-intro .elfcon-intro__right > .elfcon-type-h4 {
	margin-bottom: calc( 0.388em - 0.5lh - 16px );
}

.elfcon-intro .elfcon-intro__doc-list,
.elfcon-intro .elfcon-intro__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px; /* Figma: title → link and link → link 24 */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flex wrappers: an inline-flex link in a block box would add a line-height strut */
.elfcon-intro .elfcon-intro__cta,
.elfcon-intro .elfcon-intro__links > li {
	display: flex;
}

.elfcon-intro .elfcon-intro__links-title {
	font-weight: 700; /* Open Sans Bold — not a kit style (Code of Conduct 36:205) */
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-intro.elfcon-intro--light .elfcon-intro__label,
.elfcon-intro.elfcon-intro--light .elfcon-intro__heading,
.elfcon-intro.elfcon-intro--light .elfcon-intro__left-heading,
.elfcon-intro.elfcon-intro--light .elfcon-intro__body {
	color: var( --e-global-color-white, #ffffff );
}

/* Stays white on hover — red would vanish on the red band; the arrow growth is the cue */
.elfcon-intro.elfcon-intro--light .elfcon-btn--arrow,
.elfcon-intro.elfcon-intro--light a.elfcon-btn--arrow:hover,
.elfcon-intro.elfcon-intro--light a.elfcon-btn--arrow:focus-visible {
	color: var( --e-global-color-white, #ffffff );
}

/* Tablet + mobile: one column (tablet is ours — not designed); the body keeps its
   desktop measure on tablet */
@media (max-width: 1024px) {
	.elfcon-intro,
	.elfcon-intro.elfcon-intro--split,
	.elfcon-intro.elfcon-intro--stacked {
		grid-template-columns: minmax( 0, 1fr );
	}

	.elfcon-intro .elfcon-intro__left,
	.elfcon-intro .elfcon-intro__right {
		grid-column: 1;
	}

	.elfcon-intro.elfcon-intro--left-heading {
		row-gap: 40px;
	}

	.elfcon-intro.elfcon-intro--stacked .elfcon-intro__right {
		margin-top: -24px; /* heading → body 40 when stacked (mobile home 236:5274; Kundcase's 24 = drift, Q17) */
	}
}

@media (max-width: 767px) {
	.elfcon-intro .elfcon-intro__left,
	.elfcon-intro .elfcon-intro__right {
		max-width: none;
	}

	/* A small H4 lead-in above numbered rows (Speciallösningar, Kontakt) — smaller on phones
	   (ours, Filip Huddlekit #16; the kit has no 20 px style) */
	.elfcon-intro .elfcon-intro__left-heading.elfcon-type-h4 {
		font-size: 20px;
		line-height: 28px;
	}
}

/* Image band (Figma 1440×600 strips) */
.elfcon-image-band {
	height: var( --elfcon-ib-h, 600px );
	overflow: hidden;
}

.elfcon-image-band .elfcon-image-band__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Reveal (ours, Arqam 2026-10-10): opens from the centre to both sides once on screen and loaded
   (reveal.js, async), the photo settling from 112 % to 100 %. Closed state only with JS + motion
   allowed, and it is a 4 % slit, not 0: a photo with no visible area doesn't count as painted, which
   pushed mobile LCP from 2.7 to 6.0 s (applied slow 4G). */
.elfcon-image-band.elfcon-image-band--reveal {
	clip-path: inset( 0 ); /* open state; "none" wouldn't animate from inset() */
	transition: clip-path 1.2s cubic-bezier( 0.77, 0, 0.175, 1 );
}

.elfcon-image-band.elfcon-image-band--reveal .elfcon-image-band__img {
	transition: transform 1.8s cubic-bezier( 0.45, 0, 0.15, 1 ); /* settles as the band opens */
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.elfcon-image-band.elfcon-image-band--reveal:not(.is-revealed) {
		clip-path: inset( 0 48% );
	}

	.elfcon-image-band.elfcon-image-band--reveal:not(.is-revealed) .elfcon-image-band__img {
		transform: scale( 1.12 );
	}
}

.elfcon-image-band.elfcon-image-band--top .elfcon-image-band__img { object-position: center top; }
.elfcon-image-band.elfcon-image-band--bottom .elfcon-image-band__img { object-position: center bottom; }
.elfcon-image-band.elfcon-image-band--left .elfcon-image-band__img { object-position: left center; }
.elfcon-image-band.elfcon-image-band--right .elfcon-image-band__img { object-position: right center; }

@media (max-width: 1024px) {
	.elfcon-image-band {
		height: var( --elfcon-ib-h, 450px ); /* not designed — ours */
	}
}

@media (max-width: 767px) {
	.elfcon-image-band {
		height: var( --elfcon-ib-h, 300px ); /* not designed — ours */
	}
}

/* Text + image (433 | 134 | 773) */
.elfcon-ti {
	display: grid;
	grid-template-columns: minmax( 0, 433fr ) minmax( 0, 773fr );
	column-gap: 10%;
	align-items: center;
}

.elfcon-ti.elfcon-ti--top {
	align-items: start;
}

.elfcon-ti.elfcon-ti--image-left {
	grid-template-columns: minmax( 0, 773fr ) minmax( 0, 433fr );
}

.elfcon-ti.elfcon-ti--image-left .elfcon-ti__media {
	grid-column: 1;
	grid-row: 1;
}

.elfcon-ti.elfcon-ti--image-left .elfcon-ti__text {
	grid-column: 2;
}

.elfcon-ti.elfcon-ti--no-image {
	grid-template-columns: minmax( 0, 433px );
}

.elfcon-ti .elfcon-ti__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	min-width: 0;
}

.elfcon-ti .elfcon-ti__label {
	margin-bottom: calc( 0.388em - 0.5lh + 24px ); /* label → heading 64 */
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-ti .elfcon-ti__heading {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-ti .elfcon-ti__heading.elfcon-type-h4 {
	margin-bottom: calc( 0.388em - 0.5lh - 16px ); /* H4 → text 24 */
}

.elfcon-ti .elfcon-ti__body {
	color: var( --e-global-color-text, #051428 );
}

.elfcon-ti .elfcon-ti__cta {
	display: flex;
}

/* PUNKTLISTA (Figma 56:74): red dots, Medium Grey rules, 16 above/below each item */
.elfcon-ti .elfcon-ti__list-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px; /* list label → list: not measured, verify on Speciallösningar */
	align-self: stretch;
}

.elfcon-ti .elfcon-ti__list {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
	list-style: none;
}

.elfcon-ti .elfcon-ti__list > li {
	position: relative;
	margin: 0;
	padding: 16px 0 15px 24px; /* Figma: rule → cap 16, baseline → next rule 15 (the 1px rule sits above its y), text at +24 */
	border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
	color: var( --e-global-color-text, #051428 );
}

/* Red disc in the 24px indent, on the text baseline: 16 + cap 11.4 − (half-leading + ascent 18.2) */
.elfcon-ti .elfcon-ti__list > li::before {
	content: "\2022";
	position: absolute;
	top: 9.2px;
	left: 0;
	width: 24px;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: var( --e-global-color-secondary, #d22828 ); /* Red */
}

.elfcon-ti .elfcon-ti__list > li > span {
	display: block;
}

.elfcon-ti .elfcon-ti__media {
	height: calc( var( --elfcon-ti-h, 800 ) * 1px );
	overflow: hidden;
}

.elfcon-ti .elfcon-ti__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elfcon-ti .elfcon-ti__media--top .elfcon-ti__img { object-position: center top; }
.elfcon-ti .elfcon-ti__media--bottom .elfcon-ti__img { object-position: center bottom; }
.elfcon-ti .elfcon-ti__media--left .elfcon-ti__img { object-position: left center; }
.elfcon-ti .elfcon-ti__media--right .elfcon-ti__img { object-position: right center; }

/* Tablet + mobile (Figma 55:97 / 357:5495): stacked, image keeps its desktop proportion.
   Tablet (ours): text keeps its desktop measure, image capped at 600 tall. */
@media (max-width: 1024px) {
	.elfcon-ti,
	.elfcon-ti.elfcon-ti--image-left,
	.elfcon-ti.elfcon-ti--image-right {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 40px;
	}

	.elfcon-ti .elfcon-ti__text,
	.elfcon-ti.elfcon-ti--image-left .elfcon-ti__text,
	.elfcon-ti .elfcon-ti__media,
	.elfcon-ti.elfcon-ti--image-left .elfcon-ti__media {
		grid-column: 1;
		grid-row: auto;
	}

	.elfcon-ti.elfcon-ti--image-first .elfcon-ti__media,
	.elfcon-ti.elfcon-ti--image-left.elfcon-ti--image-first .elfcon-ti__media {
		order: -1;
	}

	.elfcon-ti.elfcon-ti--text-first {
		row-gap: 64px;
	}

	.elfcon-ti .elfcon-ti__media {
		width: 100%; /* an aspect-ratio grid item doesn't stretch */
		height: auto;
		max-height: 600px;
		aspect-ratio: 773 / var( --elfcon-ti-h, 800 );
	}

	.elfcon-ti .elfcon-ti__text {
		max-width: 660px;
	}
}

@media (max-width: 767px) {
	.elfcon-ti .elfcon-ti__media {
		max-height: none;
	}

	.elfcon-ti .elfcon-ti__text {
		max-width: none;
	}
}

/* Image pair (Figma BLOCK 37:88 + 37:76: 547 | 20 | 773, both 550 tall; text under the right photo) */
.elfcon-ip {
	display: grid;
	grid-template-columns: minmax( 0, 547fr ) minmax( 0, 773fr );
	column-gap: 20px;
	align-items: start;
}

.elfcon-ip .elfcon-ip__media {
	height: calc( var( --elfcon-ip-h, 550 ) * 1px );
	overflow: hidden;
}

.elfcon-ip .elfcon-ip__media--left {
	grid-column: 1;
	grid-row: 1;
}

.elfcon-ip .elfcon-ip__media--right {
	grid-column: 2;
	grid-row: 1;
}

.elfcon-ip .elfcon-ip__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elfcon-ip .elfcon-ip__media--focus-top .elfcon-ip__img { object-position: center top; }
.elfcon-ip .elfcon-ip__media--focus-bottom .elfcon-ip__img { object-position: center bottom; }
.elfcon-ip .elfcon-ip__media--focus-left .elfcon-ip__img { object-position: left center; }
.elfcon-ip .elfcon-ip__media--focus-right .elfcon-ip__img { object-position: right center; }

.elfcon-ip .elfcon-ip__body {
	grid-column: 2;
	max-width: 660px;
	margin-top: calc( 0.326em - 0.5lh + 64px ); /* photos → text 64 (Om Elfcon) */
	color: var( --e-global-color-text, #051428 );
}

.elfcon-ip.elfcon-ip--gap-80 .elfcon-ip__body {
	margin-top: calc( 0.326em - 0.5lh + 80px ); /* Speciallösningar, Nordic Bulkers */
}

/* Tablet — ours: side by side, both photos scale with the row (equal heights) */
@media (max-width: 1024px) {
	.elfcon-ip .elfcon-ip__media--left,
	.elfcon-ip .elfcon-ip__media--right {
		width: 100%; /* an aspect-ratio grid item doesn't stretch */
	}

	.elfcon-ip .elfcon-ip__media--left {
		height: auto;
		aspect-ratio: 547 / var( --elfcon-ip-h, 550 );
	}

	.elfcon-ip .elfcon-ip__media--right {
		height: auto;
		aspect-ratio: 773 / var( --elfcon-ip-h, 550 );
	}
}

/* Mobile — not designed (ours): stacked, 20 apart, each photo keeps its desktop proportion */
@media (max-width: 767px) {
	.elfcon-ip {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 20px;
	}

	.elfcon-ip .elfcon-ip__media--left,
	.elfcon-ip .elfcon-ip__media--right,
	.elfcon-ip .elfcon-ip__body {
		grid-column: 1;
		grid-row: auto;
	}

	.elfcon-ip .elfcon-ip__body,
	.elfcon-ip.elfcon-ip--gap-80 .elfcon-ip__body {
		max-width: none;
		margin-top: calc( 0.326em - 0.5lh + 20px ); /* + row gap 20 = 40 */
	}
}

/* Numbered rows (Figma 95:2666 / Service 151:1237: number 19 + 94 | text 547 | 247 | image 433×300;
   111:808: image 547×380 | 134 | text 546 | 94 | number 19). Medium Grey rule above each row,
   content 40 below it, rows 380 apart (the 1px rule sits above its Figma y, so 39 + 1 + 40). */
.elfcon-nr .elfcon-nr__row {
	display: grid;
	grid-template-columns: minmax( 0, 113fr ) minmax( 0, 547fr ) minmax( 0, 247fr ) minmax( 0, 433fr );
	align-items: start;
	padding-top: 40px;
	border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 ); /* Medium Grey */
}

.elfcon-nr .elfcon-nr__row + .elfcon-nr__row {
	margin-top: 39px;
}

.elfcon-nr.elfcon-nr--closing-rule .elfcon-nr__row:last-child {
	padding-bottom: 39px;
	border-bottom: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
}

.elfcon-nr .elfcon-nr__num {
	grid-column: 1;
	grid-row: 1;
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-nr.elfcon-nr--num-red .elfcon-nr__num {
	color: var( --e-global-color-secondary, #d22828 ); /* Red */
}

.elfcon-nr .elfcon-nr__text {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	min-width: 0;
}

.elfcon-nr .elfcon-nr__title {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-nr .elfcon-nr__body {
	color: var( --e-global-color-text, #051428 );
}

.elfcon-nr .elfcon-nr__cta {
	display: flex;
}

.elfcon-nr .elfcon-nr__media {
	grid-column: 4;
	grid-row: 1;
	height: calc( var( --elfcon-nr-h, 300 ) * 1px );
	overflow: hidden;
}

.elfcon-nr .elfcon-nr__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elfcon-nr .elfcon-nr__media--top .elfcon-nr__img { object-position: center top; }
.elfcon-nr .elfcon-nr__media--bottom .elfcon-nr__img { object-position: center bottom; }
.elfcon-nr .elfcon-nr__media--left .elfcon-nr__img { object-position: left center; }
.elfcon-nr .elfcon-nr__media--right .elfcon-nr__img { object-position: right center; }

/* Image left: 547 | 134 | 546 | 94 | 19, number right-aligned at the far edge */
.elfcon-nr.elfcon-nr--image-left .elfcon-nr__row {
	grid-template-columns: minmax( 0, 547fr ) minmax( 0, 134fr ) minmax( 0, 546fr ) minmax( 0, 94fr ) minmax( 0, 19fr );
}

.elfcon-nr.elfcon-nr--image-left .elfcon-nr__media {
	grid-column: 1;
	height: calc( var( --elfcon-nr-h, 380 ) * 1px );
}

.elfcon-nr.elfcon-nr--image-left .elfcon-nr__text {
	grid-column: 3;
}

.elfcon-nr.elfcon-nr--image-left .elfcon-nr__num {
	grid-column: 4 / 6;
	justify-self: end;
}

/* Facility rows (Kontakt 122:833): region label → 64 → title; after the text 40 → a rule
   across the text column → 40 → phone / e-mail | address (from x 226). The rule sits
   above its Figma y like the others (39 + 1). */
.elfcon-nr .elfcon-nr__label {
	margin-bottom: calc( 0.388em - 0.5lh + 24px ); /* label → title 64 */
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-nr .elfcon-nr__contact {
	display: grid;
	grid-template-columns: 226px minmax( 0, 1fr );
	align-self: stretch;
	margin-top: -1px; /* rule 39 below the text, contact 40 below the rule */
	padding-top: 40px;
	border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
	color: var( --e-global-color-text, #051428 );
}

.elfcon-nr .elfcon-nr__contact a,
.elfcon-cd .elfcon-cd__person-text a {
	color: inherit;
	text-decoration: none;
}

.elfcon-nr .elfcon-nr__contact a:hover,
.elfcon-cd .elfcon-cd__person-text a:hover {
	color: var( --e-global-color-secondary, #d22828 ); /* ours — no hover in Figma */
}

/* Tablet — ours: text | image in two equal columns, image at its desktop proportion.
   Image right: the number sits 64 above the title. Image left: it stays top right of
   the text column. Contact block in one column. */
@media (max-width: 1024px) {
	.elfcon-nr .elfcon-nr__row,
	.elfcon-nr.elfcon-nr--image-left .elfcon-nr__row {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		column-gap: 40px;
	}

	.elfcon-nr .elfcon-nr__num {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: calc( 0.388em - 0.5lh + 64px );
	}

	.elfcon-nr .elfcon-nr__text {
		grid-column: 1;
		grid-row: 2;
	}

	.elfcon-nr .elfcon-nr__media {
		grid-column: 2;
		grid-row: 1 / 3;
		width: 100%; /* an aspect-ratio grid item doesn't stretch */
		height: auto;
		aspect-ratio: 433 / var( --elfcon-nr-h, 300 );
	}

	.elfcon-nr.elfcon-nr--image-left .elfcon-nr__media {
		grid-column: 1;
		height: auto;
		aspect-ratio: 547 / var( --elfcon-nr-h, 380 );
	}

	.elfcon-nr.elfcon-nr--image-left .elfcon-nr__num {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		margin-bottom: calc( 0.388em - 0.5lh );
	}

	.elfcon-nr.elfcon-nr--image-left .elfcon-nr__text {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.elfcon-nr.elfcon-nr--image-left .elfcon-nr__text > :first-child {
		padding-right: 48px; /* clear of the number */
	}

	.elfcon-nr .elfcon-nr__contact {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 24px;
	}
}

/* Mobile (Figma 55:20): image 350×250 → 40 → number → 64 → title → 40 → text;
   the rule moves below each row, 40 under the content */
@media (max-width: 767px) {
	.elfcon-nr .elfcon-nr__row,
	.elfcon-nr.elfcon-nr--image-left .elfcon-nr__row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		padding-top: 0;
		padding-bottom: 39px;
		border-top: 0;
		border-bottom: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
	}

	.elfcon-nr .elfcon-nr__row + .elfcon-nr__row {
		margin-top: 40px;
	}

	.elfcon-nr .elfcon-nr__media,
	.elfcon-nr.elfcon-nr--image-left .elfcon-nr__media {
		order: -1;
		height: auto;
		aspect-ratio: 350 / 250;
	}

	.elfcon-nr .elfcon-nr__num,
	.elfcon-nr.elfcon-nr--image-left .elfcon-nr__num {
		justify-self: auto;
		margin-bottom: calc( 0.388em - 0.5lh + 24px ); /* number → title 64 */
	}

	.elfcon-nr.elfcon-nr--image-left .elfcon-nr__text > :first-child {
		padding-right: 0;
	}
}

/* Card grid (Figma CARD 151:9581: 433×500, padding 24, label → 40 → H4, arrow pinned to the
   bottom; hover variant "z" 540 tall + longer arrow). Three in a row, 20 apart. Optional
   label (→ 64) + H3 and a Medium Grey rule 40 above the cards (Lastbärande utrustning 95:2570). */
.elfcon-cg .elfcon-cg__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 64px; /* label → heading */
}

.elfcon-cg .elfcon-cg__label,
.elfcon-cg .elfcon-cg__heading {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-cg .elfcon-cg__header + .elfcon-cg__grid {
	margin-top: 40px;
}

/* The 1px rule sits above its Figma y: 39 + 1 + 40 */
.elfcon-cg.elfcon-cg--rule .elfcon-cg__header + .elfcon-cg__grid {
	margin-top: 39px;
}

.elfcon-cg.elfcon-cg--rule .elfcon-cg__grid {
	padding-top: 40px;
	border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 ); /* Medium Grey */
}

.elfcon-cg .elfcon-cg__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 20px;
}

/* The item keeps the row height; the card grows 40 into the space below on hover */
.elfcon-cg .elfcon-cg__item {
	position: relative;
	height: var( --elfcon-cg-h, 500px );
}

.elfcon-cg .elfcon-cg__card {
	position: absolute;
	inset: 0 0 auto;
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
	height: 100%;
	padding: 24px;
	overflow: hidden;
	isolation: isolate;
	background: var( --e-global-color-primary, #051428 ); /* behind the photo: white text stays readable if it fails to load */
	color: var( --e-global-color-white, #ffffff );
	text-decoration: none;
	transition: height 0.3s ease;
}

.elfcon-cg .elfcon-cg__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.elfcon-cg .elfcon-cg__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.1 ); /* Figma instance overlay 10 % */
}

.elfcon-cg .elfcon-cg__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elfcon-cg .elfcon-cg__media--top .elfcon-cg__img { object-position: center top; }
.elfcon-cg .elfcon-cg__media--bottom .elfcon-cg__img { object-position: center bottom; }
.elfcon-cg .elfcon-cg__media--left .elfcon-cg__img { object-position: left center; }
.elfcon-cg .elfcon-cg__media--right .elfcon-cg__img { object-position: right center; }

.elfcon-cg .elfcon-cg__text {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 40px;
	min-height: 0;
}

.elfcon-cg .elfcon-cg__card-label,
.elfcon-cg .elfcon-cg__card-title {
	display: block;
	color: var( --e-global-color-white, #ffffff );
}

.elfcon-cg .elfcon-cg__cta {
	display: flex;
}

.elfcon-cg a.elfcon-cg__card:focus-visible {
	outline: 2px solid var( --e-global-color-primary, #051428 );
	outline-offset: 3px;
}

@media (hover: hover) {
	.elfcon-cg a.elfcon-cg__card:hover,
	.elfcon-cg a.elfcon-cg__card:focus-visible {
		height: calc( 100% + 40px );
		z-index: 1;
	}
}

/* Tablet keeps three in a row (Filip, Huddlekit #20: not 2 + 1; fits down to 768 in both languages).
   Mobile (Figma home 390): 350×420, stacked 20 apart */
@media (max-width: 767px) {
	.elfcon-cg .elfcon-cg__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.elfcon-cg .elfcon-cg__item {
		height: var( --elfcon-cg-h, 420px );
		transition: height 0.3s ease;
	}
}

/* Stacked cards: the item grows instead, so the cards below move with it (Filip, Huddlekit #14) */
@media (hover: hover) and (max-width: 767px) {
	.elfcon-cg .elfcon-cg__item:has( a.elfcon-cg__card:hover ),
	.elfcon-cg .elfcon-cg__item:has( a.elfcon-cg__card:focus-visible ) {
		height: calc( var( --elfcon-cg-h, 420px ) + 40px );
	}

	.elfcon-cg a.elfcon-cg__card:hover,
	.elfcon-cg a.elfcon-cg__card:focus-visible {
		height: 100%;
	}
}

/* Case cards — Kundcase listing (Figma 36:191): two per row (597 | 146 | 597), card =
   text 288.5 | 20 | image 288.5×350; Medium Grey rule above each row and below the last,
   content 40 from the rule (the 1px rule sits above its Figma y: 39 + 1 + 40). */
.elfcon-cc .elfcon-cc__row {
	display: grid;
	grid-template-columns: minmax( 0, 597fr ) minmax( 0, 597fr );
	column-gap: 10.896%; /* 146 of 1340 */
	padding-top: 40px;
	border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 ); /* Medium Grey */
}

.elfcon-cc .elfcon-cc__row + .elfcon-cc__row {
	margin-top: 39px;
}

.elfcon-cc .elfcon-cc__row:last-child {
	padding-bottom: 39px;
	border-bottom: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
}

.elfcon-cc .elfcon-cc__card {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	column-gap: 20px;
	color: var( --e-global-color-primary, #051428 );
	text-decoration: none;
}

.elfcon-cc .elfcon-cc__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	min-height: 350px;
}

.elfcon-cc .elfcon-cc__head {
	display: flex;
	flex-direction: column;
	gap: 40px; /* client → title */
}

.elfcon-cc .elfcon-cc__client,
.elfcon-cc .elfcon-cc__title {
	display: block;
	color: var( --e-global-color-primary, #051428 ); /* Dark Blue */
}

.elfcon-cc .elfcon-cc__cta {
	display: flex;
}

.elfcon-cc .elfcon-cc__media {
	display: block;
	height: 350px;
	overflow: hidden;
}

.elfcon-cc .elfcon-cc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elfcon-cc a.elfcon-cc__card:focus-visible {
	outline: 2px solid var( --e-global-color-primary, #051428 );
	outline-offset: 4px;
}

/* Tablet + mobile — not designed (ours): one card per row; on mobile the image goes above the text */
@media (max-width: 1024px) {
	.elfcon-cc .elfcon-cc__row {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 80px;
	}
}

@media (max-width: 767px) {
	.elfcon-cc .elfcon-cc__card {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 40px;
	}

	.elfcon-cc .elfcon-cc__media {
		order: -1;
		height: auto;
		aspect-ratio: 350 / 250;
	}

	.elfcon-cc .elfcon-cc__text {
		min-height: 0;
	}
}

/* Case cards — carousel (Figma CARD_2 151:9716, home 95:1819): 547×400 cards 20 apart,
   20 % overlay, padding 24; label top, H4 bottom-left, white arrow bottom-right (gap 40).
   Track starts on the column and bleeds through the right gutter; 30 px end spacer.
   Mobile 276×400 (358:5508). Rule above: 39 + 1 + 40. */
.elfcon-cc.elfcon-cc--rule {
	padding-top: 40px;
	border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
}

.elfcon-cc .elfcon-cc__track {
	display: flex;
	gap: 20px;
	margin-right: calc( -1 * var( --elfcon-gutter, 50px ) );
	padding-right: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.elfcon-cc .elfcon-cc__track::-webkit-scrollbar {
	display: none;
}

/* Mouse drag (carousel.js, ours): snapping off while dragging, so the row follows the pointer */
@media (hover: hover) {
	.elfcon-cc .elfcon-cc__track {
		cursor: grab;
	}
}

/* Progress bar (ours, Arqam 2026-10-10): 2 px, column wide, 40 below the cards; the thumb is the
   visible share of the row (carousel.js). Hidden until the script shows it (row overflows). */
.elfcon-cc .elfcon-cc__progress {
	position: relative;
	height: 2px;
	margin-top: 40px;
	overflow: hidden;
	background: rgba( 5, 20, 40, 0.12 ); /* Dark Blue 12 % */
}

.elfcon-cc .elfcon-cc__progress[hidden] {
	display: none;
}

.elfcon-cc .elfcon-cc__progress-thumb {
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	background: var( --e-global-color-secondary, #d22828 ); /* Red (Arqam 2026-10-10) */
	will-change: transform;
}

.elfcon-cc .elfcon-cc__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.elfcon-cc .elfcon-cc__slide {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: space-between;
	width: 547px;
	height: 400px;
	padding: 24px;
	overflow: hidden;
	background: var( --e-global-color-primary, #051428 ); /* behind the photo, as on the card grid */
	color: var( --e-global-color-white, #ffffff );
	text-decoration: none;
	scroll-snap-align: start;
}

.elfcon-cc .elfcon-cc__slide-media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.elfcon-cc .elfcon-cc__slide-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.2 );
}

.elfcon-cc .elfcon-cc__slide-media .elfcon-cc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elfcon-cc .elfcon-cc__slide-client,
.elfcon-cc .elfcon-cc__slide-title {
	display: block;
	color: var( --e-global-color-white, #ffffff );
}

.elfcon-cc .elfcon-cc__slide-foot {
	display: flex;
	align-items: flex-end;
	gap: 40px;
}

.elfcon-cc .elfcon-cc__slide-title {
	flex: 1;
	min-width: 0;
}

.elfcon-cc a.elfcon-cc__slide:focus-visible {
	outline: 2px solid var( --e-global-color-primary, #051428 );
	outline-offset: -4px;
}

@media (max-width: 767px) {
	.elfcon-cc .elfcon-cc__slide {
		width: 276px;
	}

	/* no rule above the carousel on mobile (358:5499) */
	.elfcon-cc.elfcon-cc--rule {
		padding-top: 0;
		border-top: 0;
	}

	.elfcon-cc .elfcon-cc__progress {
		margin-top: 24px;
	}

	.elfcon-cc .elfcon-cc__slide-foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px; /* ours: the arrow moves under the title in 228 px */
	}
}

/* Map (Figma MAP 151:1587, home 151:7564): dots 1149×863 starting 454 into the column
   (33.88 %, 85.75 % wide), bleeding right — the widget sits in a full-width container and
   clips. Text 407 wide, 40 below the map top. Pins = red rings over the grey ones; hover,
   tap or focus fills the pin and opens its red card (radius 6, 12/16/16/16, anchor 40 →
   12 → name 14/20 → 12 → address 12/16). Hidden on mobile (design).
   Desktop size is ours (Arqam 2026-10-10: the map dominated): 75 % of Figma, 862×647, ending
   on the column's right edge instead of bleeding. Pin rings scale with the layer (cq units).
   Crop (Filip, Huddlekit #3): the canvas is a window onto a layer 1.2× its size (dots at 90 % of
   Figma), the dots cut 71.4 % across (east of Finland) and centred in the window; the edges fade.
   Spotlight (Filip #4, motion ours): a filled copy of the dots shows through a soft circle that
   eases after the pointer (map.js). Pin hit area 44 px (Filip #5) around the same ring. */
.elfcon-map {
	overflow-x: clip; /* the layer bleeds right; vertical clip cut the label's umlauts (Filip #15) */
}

.elfcon-map .elfcon-map__inner {
	display: grid;
	width: 100%;
	max-width: calc( 1340px + 2 * var( --elfcon-gutter, 50px ) );
	margin-inline: auto;
	padding-inline: var( --elfcon-gutter, 50px );
}

.elfcon-map .elfcon-map__text,
.elfcon-map .elfcon-map__canvas {
	grid-area: 1 / 1;
}

.elfcon-map .elfcon-map__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 64px;
	align-self: start;
	max-width: 407px;
	padding-top: 40px;
}

.elfcon-map .elfcon-map__main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.elfcon-map .elfcon-map__label,
.elfcon-map .elfcon-map__heading {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-map .elfcon-map__body {
	color: var( --e-global-color-text, #051428 );
}

.elfcon-map .elfcon-map__cta {
	display: flex;
}

.elfcon-map .elfcon-map__canvas {
	--elfcon-map-zoom: 1.2;
	--elfcon-map-cut: 71.37%; /* x 820 of the 1149 map */
	position: relative;
	width: 64.33%; /* 862 of 1340 (Figma 1149 × 0.75) */
	margin-left: 35.67%; /* right edge on the column */
	aspect-ratio: 1149 / 863;
}

.elfcon-map .elfcon-map__layer {
	position: absolute;
	pointer-events: none; /* overhangs the window invisibly (masked) — pins opt back in */
	top: calc( ( 1 - var( --elfcon-map-zoom ) ) * 50% );
	left: calc( ( 100% - var( --elfcon-map-cut ) * var( --elfcon-map-zoom ) ) / 2 );
	container-type: inline-size;
	width: calc( var( --elfcon-map-zoom ) * 100% );
	height: calc( var( --elfcon-map-zoom ) * 100% );
}

/* Fades: right at the cut, top and bottom where the window ends (8.33 % = 0.1 / 1.2) */
.elfcon-map .elfcon-map__dots {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	-webkit-mask-image: linear-gradient( to right, #000 calc( var( --elfcon-map-cut ) - 8% ), transparent var( --elfcon-map-cut ) ), linear-gradient( transparent 8.33%, #000 16%, #000 84%, transparent 91.67% );
	mask-image: linear-gradient( to right, #000 calc( var( --elfcon-map-cut ) - 8% ), transparent var( --elfcon-map-cut ) ), linear-gradient( transparent 8.33%, #000 16%, #000 84%, transparent 91.67% );
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.elfcon-map .elfcon-map__spot {
	opacity: 0;
	-webkit-mask-image: radial-gradient( circle 72px at var( --elfcon-spot-x, -999px ) var( --elfcon-spot-y, -999px ), #000 35%, transparent ), linear-gradient( to right, #000 calc( var( --elfcon-map-cut ) - 8% ), transparent var( --elfcon-map-cut ) ), linear-gradient( transparent 8.33%, #000 16%, #000 84%, transparent 91.67% );
	mask-image: radial-gradient( circle 72px at var( --elfcon-spot-x, -999px ) var( --elfcon-spot-y, -999px ), #000 35%, transparent ), linear-gradient( to right, #000 calc( var( --elfcon-map-cut ) - 8% ), transparent var( --elfcon-map-cut ) ), linear-gradient( transparent 8.33%, #000 16%, #000 84%, transparent 91.67% );
	-webkit-mask-composite: source-in, source-in;
	mask-composite: intersect;
	transition: opacity 0.4s cubic-bezier( 0.4, 0, 0.2, 1 );
	pointer-events: none;
}

.elfcon-map .elfcon-map__layer.is-spot .elfcon-map__spot {
	opacity: 1;
}

.elfcon-map .elfcon-map__pin-wrap {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: auto;
}

.elfcon-w .elfcon-map__pin {
	position: absolute;
	top: -22px;
	left: -22px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.elfcon-w .elfcon-map__pin::before {
	content: "";
	position: absolute;
	top: calc( 22px - 12.78cqw / 22.98 );
	left: calc( 22px - 12.78cqw / 22.98 );
	width: calc( 12.78cqw / 11.49 ); /* = a dot: r 5.89 + 0.5 stroke of the 1149 map */
	height: calc( 12.78cqw / 11.49 );
	border: 1px solid var( --e-global-color-secondary, #d22828 ); /* Red ring */
	border-radius: 50%;
	background: transparent;
	transition: background-color 0.2s ease;
}

.elfcon-map .elfcon-map__pin-name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.elfcon-map .elfcon-map__pin-wrap:hover .elfcon-map__pin::before,
.elfcon-map .elfcon-map__pin:focus-visible::before,
.elfcon-map .elfcon-map__pin:focus::before {
	background: var( --e-global-color-secondary, #d22828 );
}

.elfcon-w .elfcon-map__pin:focus-visible {
	outline: 2px solid var( --e-global-color-primary, #051428 );
	outline-offset: -8px; /* hugs the ring, not the 44 px hit area */
}

.elfcon-map .elfcon-map__card {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: max-content;
	max-width: 260px;
	padding: 12px 16px 16px;
	border-radius: 6px;
	background: var( --e-global-color-secondary, #d22828 );
	color: var( --e-global-color-white, #ffffff );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.elfcon-map .elfcon-map__pin-wrap:hover .elfcon-map__card,
.elfcon-map .elfcon-map__pin:focus + .elfcon-map__card {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease, visibility 0s;
}

.elfcon-map .elfcon-map__card--up-right { bottom: 8px; left: 8px; }
.elfcon-map .elfcon-map__card--down-right { top: 8px; left: 8px; }
.elfcon-map .elfcon-map__card--up-left { bottom: 8px; right: 8px; }
.elfcon-map .elfcon-map__card--down-left { top: 8px; right: 8px; }

.elfcon-map .elfcon-map__card-icon svg {
	display: block;
	width: 40px;
	height: 40px;
}

.elfcon-map .elfcon-map__card-icon path {
	fill: var( --e-global-color-white, #ffffff );
}

.elfcon-map .elfcon-map__card-name {
	display: block;
	font-size: 14px; /* Body/Small — not a kit style */
	line-height: 20px;
}

.elfcon-map .elfcon-map__card-address {
	display: block;
	font-size: 12px; /* Caption/Default */
	line-height: 16px;
}

/* Tablet — ours: the whole map under the text */
@media (max-width: 1024px) {
	.elfcon-map .elfcon-map__text {
		max-width: 660px;
		padding-top: 0;
	}

	.elfcon-map .elfcon-map__canvas {
		grid-area: 2 / 1;
		width: 100%;
		margin: 64px 0 0;
	}
}

@media (max-width: 767px) {
	.elfcon-map .elfcon-map__canvas {
		display: none;
	}

	.elfcon-map .elfcon-map__text {
		max-width: none;
	}
}

/* Case facts (Figma Nordic Bulkers 290:5520: rule, image 547×380 | 134 | facts 546;
   Wallenius 290:5545: text 630 | 40 | rule | 40 | facts 630, text 546 wide) */
.elfcon-cf {
	display: grid;
	grid-template-columns: minmax( 0, 547fr ) minmax( 0, 659fr );
	column-gap: 10%; /* 134 of 1340 */
	align-items: start;
}

.elfcon-cf.elfcon-cf--rule {
	padding-top: 40px;
	border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
}

.elfcon-cf .elfcon-cf__media {
	height: calc( var( --elfcon-cf-h, 380 ) * 1px );
	overflow: hidden;
}

.elfcon-cf .elfcon-cf__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elfcon-cf .elfcon-cf__media--top .elfcon-cf__img { object-position: center top; }
.elfcon-cf .elfcon-cf__media--bottom .elfcon-cf__img { object-position: center bottom; }
.elfcon-cf .elfcon-cf__media--left .elfcon-cf__img { object-position: left center; }
.elfcon-cf .elfcon-cf__media--right .elfcon-cf__img { object-position: right center; }

.elfcon-cf .elfcon-cf__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	min-width: 0;
}

.elfcon-cf .elfcon-cf__col > * {
	max-width: 546px;
}

.elfcon-cf .elfcon-cf__heading {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-cf .elfcon-cf__text {
	color: var( --e-global-color-text, #051428 );
}

.elfcon-cf .elfcon-cf__text strong {
	font-weight: 700; /* Open Sans Bold — keys */
}

.elfcon-cf.elfcon-cf--text {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	column-gap: 80px; /* 40 | rule (at x 670) | 40 */
	align-items: stretch;
}

.elfcon-cf.elfcon-cf--text .elfcon-cf__facts {
	position: relative;
}

.elfcon-cf.elfcon-cf--text .elfcon-cf__facts::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40px;
	border-left: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
}

/* Tablet + mobile — not designed (ours): stacked; the divider turns horizontal */
@media (max-width: 1024px) {
	.elfcon-cf,
	.elfcon-cf.elfcon-cf--text {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 40px;
	}

	.elfcon-cf .elfcon-cf__media {
		width: 100%;
		height: auto;
		max-height: 600px;
		aspect-ratio: 547 / var( --elfcon-cf-h, 380 );
	}

	.elfcon-cf.elfcon-cf--text .elfcon-cf__facts {
		padding-top: 40px;
		border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
	}

	.elfcon-cf.elfcon-cf--text .elfcon-cf__facts::before {
		content: none;
	}
}

/* Quote (Figma Nordic Bulkers 436:5585): red mark 80×36 | 35 | H3 quote → attribution.
   Block 1060 wide, 113 into the column. Attribution: Figma sets "– " in 32px and the
   name in H4; its box starts at the dash's cap, so the H4 cap sits 30 below the quote. */
/* Offset as padding: Elementor zeroes figure margins at (0,4,1) */
.elfcon-quote {
	display: grid;
	grid-template-columns: 80px minmax( 0, 945px );
	column-gap: 35px;
	align-items: start;
	padding-left: 8.433%; /* 113 of 1340 */
}

.elfcon-quote .elfcon-quote__mark {
	display: block;
	width: 80px;
	height: 36px;
	fill: var( --e-global-color-secondary, #d22828 ); /* Red */
}

.elfcon-quote .elfcon-quote__body {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.elfcon-quote .elfcon-quote__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.elfcon-quote .elfcon-quote__text,
.elfcon-quote .elfcon-quote__by {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-quote .elfcon-quote__dash {
	font-size: 32px;
	line-height: 0;
}

@media (max-width: 767px) {
	.elfcon-quote {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 24px;
		padding-left: 0;
	}
}

/* Scroll features (Figma home 95:1629): label top-left; items (icon 40 | 32 | H2 ≤331 + text
   314) each centred in an 800 slot, scrolling with the page; ONE photo 773×800 at x 617
   (282:5332) stays put beside them (CSS sticky). Motion ours (Arqam 2026-10-22, ref. Terminal):
   as an item rises its heading, then its text, fill from light grey to Dark Blue in reading
   order, led by a short Red band — done when the item's centre meets the photo's centre;
   eased (scroll-features.js sets --elfcon-sf-p 0 → 1 per heading/paragraph). */
.elfcon-sf .elfcon-sf__panel {
	display: grid;
	grid-template-columns: minmax( 0, 567fr ) minmax( 0, 773fr );
	align-items: start;
}

.elfcon-sf .elfcon-sf__label {
	position: relative;
	z-index: 1;
	grid-area: 1 / 1;
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-sf .elfcon-sf__window {
	grid-area: 1 / 1;
}

.elfcon-sf .elfcon-sf__track {
	display: flex;
	flex-direction: column;
}

/* Grid, not flex: the row is centred in the slot while the icon stays on the heading's top */
.elfcon-sf .elfcon-sf__item {
	display: grid;
	grid-template-columns: 40px minmax( 0, 331px );
	column-gap: 32px;
	align-content: center;
	align-items: start;
	height: 800px;
}

.elfcon-sf .elfcon-sf__item--no-icon {
	grid-template-columns: minmax( 0, 331px );
}

.elfcon-sf .elfcon-sf__icon {
	width: 40px;
	height: 40px;
}

.elfcon-sf .elfcon-sf__icon svg {
	width: 40px;
	height: 40px;
}

.elfcon-sf .elfcon-sf__text {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

.elfcon-sf .elfcon-sf__title {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-sf .elfcon-sf__body {
	max-width: 314px;
	color: var( --e-global-color-text, #051428 );
}

.elfcon-sf .elfcon-sf__media {
	position: sticky;
	top: max( 100px, calc( 50vh - 400px ) ); /* below the 100 header, centred on tall screens */
	grid-area: 1 / 2;
	height: 800px;
	overflow: hidden;
}

.elfcon-sf .elfcon-sf__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Text fill. An inline background runs across the line breaks as one strip, so a horizontal
   gradient clipped to the text fills line by line. --elfcon-sf-p: 0 grey … 1 Dark Blue. */
.elfcon-sf .elfcon-sf__fill {
	--elfcon-sf-head: calc( var( --elfcon-sf-p, 1 ) * ( 100% + 160px ) );
	background-image: linear-gradient( 90deg,
		var( --e-global-color-primary, #051428 ) calc( var( --elfcon-sf-head ) - 160px ),
		var( --e-global-color-secondary, #d22828 ) calc( var( --elfcon-sf-head ) - 80px ),
		rgba( 5, 20, 40, 0.18 ) var( --elfcon-sf-head ) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Tablet + mobile (Figma 345:5525): first photo 350×300 → 64 → label → 64 → items, 40 | rule | 40
   between them; icon gap 34; headings H4. Tablet uses the static list too (ours). */
@media (max-width: 1024px) {
	.elfcon-sf .elfcon-sf__panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.elfcon-sf .elfcon-sf__window,
	.elfcon-sf .elfcon-sf__track {
		display: contents;
	}

	.elfcon-sf .elfcon-sf__media {
		position: static;
		order: -1;
		width: 100%;
		height: auto;
		max-height: 600px; /* tablet */
		aspect-ratio: 350 / 300;
		margin-bottom: 64px;
	}

	.elfcon-sf .elfcon-sf__label {
		margin-bottom: calc( 0.388em - 0.5lh + 64px );
	}

	.elfcon-sf .elfcon-sf__item {
		display: flex;
		align-items: flex-start;
		gap: 34px;
		height: auto;
	}

	.elfcon-sf .elfcon-sf__icon {
		flex: none;
	}

	.elfcon-sf .elfcon-sf__item + .elfcon-sf__item {
		margin-top: 40px;
		padding-top: 40px;
		border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
	}

	.elfcon-sf .elfcon-sf__text {
		width: auto;
		flex: 1;
	}

	.elfcon-sf .elfcon-sf__title {
		font-size: var( --e-global-typography-h4-font-size, 24px );
		line-height: var( --e-global-typography-h4-line-height, 32px );
	}

	.elfcon-sf .elfcon-sf__body {
		max-width: none;
	}
}

/* Timeline (Figma Om Elfcon 213:3223 + 211:3173): text 433 left, 81 from the band top;
   window 773×750 at x 617 — line 2px red at x 113, rings 32 at x 98 (r15, 2px red, light
   grey fill) with a 12px red dot, year → 40 → H3 from x 226, items 600 apart from y 240
   (year cap 41 above the ring), track 2 549 for four. .is-scroll (JS ≥1025): the band
   sticks, the window clips with Figma's fade, the track moves with the scroll. */
.elfcon-tl .elfcon-tl__panel {
	display: grid;
	grid-template-columns: minmax( 0, 567fr ) minmax( 0, 773fr );
	align-items: start;
}

.elfcon-tl .elfcon-tl__text {
	display: flex;
	flex-direction: column;
	gap: 64px;
	max-width: 433px;
	padding-top: 81px;
}

.elfcon-tl .elfcon-tl__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.elfcon-tl .elfcon-tl__label,
.elfcon-tl .elfcon-tl__heading,
.elfcon-tl .elfcon-tl__year,
.elfcon-tl .elfcon-tl__statement {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-tl .elfcon-tl__body {
	color: var( --e-global-color-text, #051428 );
}

.elfcon-tl .elfcon-tl__window {
	grid-column: 2;
	position: relative;
}

.elfcon-tl .elfcon-tl__track {
	position: relative;
	height: calc( 240px + ( var( --elfcon-tl-n, 4 ) - 1 ) * 600px + 509px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.elfcon-tl .elfcon-tl__track::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 113px;
	width: 2px;
	background: var( --e-global-color-secondary, #d22828 ); /* Red */
}

.elfcon-tl .elfcon-tl__item {
	position: absolute;
	top: calc( 199px + var( --elfcon-tl-i, 0 ) * 600px );
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-left: 226px;
}

.elfcon-tl .elfcon-tl__item > p {
	max-width: 320px;
}

.elfcon-tl .elfcon-tl__marker {
	position: absolute;
	top: 41px;
	left: 98px;
	width: 32px;
	height: 32px;
	border: 2px solid var( --e-global-color-secondary, #d22828 );
	border-radius: 50%;
	background: var( --e-global-color-lightgrey, #f0f0f0 );
}

.elfcon-tl .elfcon-tl__marker::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var( --e-global-color-secondary, #d22828 );
}

.elfcon-tl.is-scroll .elfcon-tl__panel {
	position: sticky;
	top: max( 100px, calc( 50vh - 375px ) );
	height: 750px;
}

.elfcon-tl.is-scroll .elfcon-tl__window {
	height: 750px;
	overflow: hidden;
}

.elfcon-tl.is-scroll .elfcon-tl__track {
	will-change: transform;
}

.elfcon-tl.is-scroll .elfcon-tl__window::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, var( --e-global-color-lightgrey, #f0f0f0 ) 0%, rgba( 240, 240, 240, 0 ) 15%, rgba( 240, 240, 240, 0 ) 75%, var( --e-global-color-lightgrey, #f0f0f0 ) 100% );
	pointer-events: none;
}

/* Tablet + mobile — not designed (ours): text, then the list with the line on the left */
@media (max-width: 1024px) {
	.elfcon-tl .elfcon-tl__panel {
		display: flex;
		flex-direction: column;
		gap: 64px;
	}

	.elfcon-tl .elfcon-tl__text {
		max-width: none;
		padding-top: 0;
	}

	.elfcon-tl .elfcon-tl__track {
		display: flex;
		flex-direction: column;
		gap: 64px;
		height: auto;
		padding: 0 0 8px;
	}

	.elfcon-tl .elfcon-tl__track::before {
		left: 15px;
		background: linear-gradient( rgba( 210, 40, 40, 0 ), var( --e-global-color-secondary, #d22828 ) 64px, var( --e-global-color-secondary, #d22828 ) calc( 100% - 64px ), rgba( 210, 40, 40, 0 ) ); /* fades out at both ends (Filip, Huddlekit #18) */
	}

	.elfcon-tl .elfcon-tl__item {
		position: relative;
		top: auto;
		padding-left: 56px;
	}

	.elfcon-tl .elfcon-tl__marker {
		left: 0;
	}
}

/* Mobile: statements at H4 size (Filip, Huddlekit #17) */
@media (max-width: 767px) {
	.elfcon-tl .elfcon-tl__statement {
		font-size: var( --e-global-typography-h4-font-size, 24px );
		line-height: var( --e-global-typography-h4-line-height, 32px );
	}
}

/* Contact directory (Figma Kontakt 236:7667): H4 → rule 40 below → groups: site label in a
   340 column | people 3 × 320 (20 / 64 apart); 40 | rule | 40 between groups. Person:
   red icon 64 → 24 → role (caps) + name → 10 → phone / e-mail. */
.elfcon-cd .elfcon-cd__heading {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-cd .elfcon-cd__group {
	display: grid;
	grid-template-columns: minmax( 0, 340fr ) minmax( 0, 1000fr );
	align-items: start;
	margin-top: 39px;
	padding-top: 40px;
	border-top: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 );
}

.elfcon-cd .elfcon-cd__site {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-cd .elfcon-cd__people {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 64px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elfcon-cd .elfcon-cd__person {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.elfcon-cd .elfcon-cd__icon svg {
	display: block;
	width: 64px;
	height: 64px;
}

.elfcon-cd .elfcon-cd__person-text {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-cd .elfcon-cd__role {
	text-transform: uppercase;
}

/* Tablet + mobile — not designed (ours): site label above, people two per row (tablet)
   or one (mobile) */
@media (max-width: 1024px) {
	.elfcon-cd .elfcon-cd__group {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 40px;
	}

	.elfcon-cd .elfcon-cd__people {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media (max-width: 767px) {

	.elfcon-cd .elfcon-cd__people {
		grid-template-columns: minmax( 0, 1fr );
		gap: 40px;
	}
}

/* 404 (Figma 36:207): 113 | text 433 | 322 | icon 434×434 | 38 of 1340; the text starts
   143 below the icon's top. Mobile (ours): icon 160 above the text. */
.elfcon-nf {
	display: grid;
	grid-template-columns: minmax( 0, 113fr ) minmax( 0, 433fr ) minmax( 0, 322fr ) minmax( 0, 434fr ) minmax( 0, 38fr );
	align-items: start;
}

.elfcon-nf .elfcon-nf__text {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	margin-top: 143px;
}

.elfcon-nf .elfcon-nf__heading {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-nf .elfcon-nf__body {
	color: var( --e-global-color-text, #051428 );
}

.elfcon-nf .elfcon-nf__cta {
	display: flex;
}

.elfcon-nf .elfcon-nf__icon {
	grid-column: 4;
	grid-row: 1;
	aspect-ratio: 1;
}

.elfcon-nf .elfcon-nf__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 1024px) {
	.elfcon-nf {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 64px;
	}

	.elfcon-nf .elfcon-nf__text,
	.elfcon-nf .elfcon-nf__icon {
		grid-column: 1;
		grid-row: auto;
	}

	.elfcon-nf .elfcon-nf__icon {
		order: -1;
		width: 160px;
	}

	.elfcon-nf .elfcon-nf__text {
		margin-top: 0;
	}
}

/* Feature band (Figma 151:1185 + 151:1186: 1440×750, text 433 at the gutter, centred;
   mobile 356:5493: 700, text top 170, extra flat overlay) */
.elfcon-fb {
	position: relative;
	isolation: isolate;
	display: flex;
	min-height: var( --elfcon-fb-h, 750px );
	overflow: hidden;
	background: var( --e-global-color-primary, #051428 ); /* behind the photo while it loads */
	color: var( --e-global-color-white, #ffffff );
}

.elfcon-fb .elfcon-fb__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.elfcon-fb .elfcon-fb__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Background video: over the photo (its poster), under the overlay; fades in once playing */
.elfcon-fb .elfcon-fb__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.elfcon-fb.is-video-playing .elfcon-fb__video {
	opacity: 1;
}

.elfcon-fb .elfcon-fb__media--top .elfcon-fb__video { object-position: center top; }
.elfcon-fb .elfcon-fb__media--bottom .elfcon-fb__video { object-position: center bottom; }
.elfcon-fb .elfcon-fb__media--left .elfcon-fb__video { object-position: left center; }
.elfcon-fb .elfcon-fb__media--right .elfcon-fb__video { object-position: right center; }

/* Pause / play (ours — WCAG 2.2.2: moving content longer than 5 s can be stopped) */
.elfcon-w button.elfcon-fb__pause {
	position: absolute;
	right: var( --elfcon-gutter, 50px );
	bottom: 32px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.6 );
	border-radius: 50%;
	background: rgba( 5, 20, 40, 0.35 ); /* Dark Blue, translucent */
	color: var( --e-global-color-white, #ffffff );
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.elfcon-w button.elfcon-fb__pause[hidden] {
	display: none;
}

/* Hidden until focused (Arqam 2026-10-23: no visible button). Keyboard users still reach it —
   WCAG 2.2.2 needs a way to pause video that plays > 5 s; reduced motion gets no video at all. */
.elfcon-w button.elfcon-fb__pause:not(:focus-visible) {
	opacity: 0;
	pointer-events: none;
}

.elfcon-w button.elfcon-fb__pause:hover,
.elfcon-w button.elfcon-fb__pause:focus-visible {
	background: rgba( 5, 20, 40, 0.7 );
}

.elfcon-w button.elfcon-fb__pause:focus-visible {
	outline: 2px solid var( --e-global-color-white, #ffffff );
	outline-offset: 3px;
}

.elfcon-fb .elfcon-fb__pause-icon,
.elfcon-contact .elfcon-fb__pause-icon {
	display: block;
	fill: currentColor;
}

.elfcon-fb .elfcon-fb__icon-play,
.elfcon-fb.is-video-paused .elfcon-fb__icon-pause,
.elfcon-contact .elfcon-fb__icon-play,
.elfcon-contact.is-video-paused .elfcon-fb__icon-pause {
	display: none;
}

.elfcon-fb.is-video-paused .elfcon-fb__icon-play,
.elfcon-contact.is-video-paused .elfcon-fb__icon-play {
	display: inline;
}

@media (max-width: 767px) {
	.elfcon-w button.elfcon-fb__pause {
		bottom: 20px;
	}
}

.elfcon-fb .elfcon-fb__media--top .elfcon-fb__img { object-position: center top; }
.elfcon-fb .elfcon-fb__media--bottom .elfcon-fb__img { object-position: center bottom; }
.elfcon-fb .elfcon-fb__media--left .elfcon-fb__img { object-position: left center; }
.elfcon-fb .elfcon-fb__media--right .elfcon-fb__img { object-position: right center; }

.elfcon-fb.elfcon-fb--overlay-gradient .elfcon-fb__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to right, rgba( 0, 0, 0, 0.7 ), rgba( 0, 0, 0, 0.2 ) );
}

/* Text lines up with the boxed content column (kit content width 1340) */
.elfcon-fb .elfcon-fb__inner {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: calc( 1340px + 2 * var( --elfcon-gutter, 50px ) );
	margin-inline: auto;
	padding: 80px var( --elfcon-gutter, 50px ); /* only matters when the text outgrows the band */
}

.elfcon-fb .elfcon-fb__content {
	display: flex;
	flex-direction: column;
	gap: 64px; /* label → heading */
	width: 100%;
	max-width: 433px;
}

.elfcon-fb .elfcon-fb__main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px; /* heading → text → buttons */
}

.elfcon-fb .elfcon-fb__label,
.elfcon-fb .elfcon-fb__heading,
.elfcon-fb .elfcon-fb__body {
	color: var( --e-global-color-white, #ffffff );
}

.elfcon-fb .elfcon-fb__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px; /* hero pair, mobile 354:5511 */
}

@media (max-width: 767px) {
	.elfcon-fb {
		min-height: var( --elfcon-fb-h, 700px );
	}

	/* Video band (Om Elfcon film): never taller than the phone's screen under the bar (Filip, Huddlekit #19) */
	.elfcon-fb.elfcon-fb--band.elfcon-fb--bg-video {
		min-height: min( 560px, calc( 100svh - 68px ) );
	}

	/* Mobile adds a flat "Contrast overlay" rgba(3,8,13,.26) over the gradient */
	.elfcon-fb.elfcon-fb--overlay-gradient .elfcon-fb__media::after {
		background:
			linear-gradient( rgba( 3, 8, 13, 0.26 ), rgba( 3, 8, 13, 0.26 ) ),
			linear-gradient( to right, rgba( 0, 0, 0, 0.7 ), rgba( 0, 0, 0, 0.2 ) );
	}

	.elfcon-fb .elfcon-fb__inner {
		align-items: flex-start;
		padding-block: 170px 80px;
	}

	.elfcon-fb .elfcon-fb__content {
		max-width: none;
	}
}

/* Hero preset (Figma home 20:5): 900 tall (m 760), text 1000 wide from y 243 (m 150),
   plain-case label → 64 → H1 → 40 → text 568 → 64 → buttons. Overlay = Figma's rotated
   radial gradient (exported SVG, 80 %). Figma blends it "multiply", but black × anything = black,
   so normal blending gives the same pixels — and a blend layer over a GPU video layer can be
   dropped on screen (seen in Brave, 2026-10-10). */
.elfcon-fb.elfcon-fb--hero {
	min-height: var( --elfcon-fb-h, 900px );
}

.elfcon-fb.elfcon-fb--hero .elfcon-fb__inner {
	align-items: flex-start;
	padding-top: 243px;
}

.elfcon-fb.elfcon-fb--hero .elfcon-fb__content {
	max-width: 1000px;
}

.elfcon-fb.elfcon-fb--hero .elfcon-fb__label {
	text-transform: none; /* Body/Default in Figma */
}

.elfcon-fb.elfcon-fb--hero .elfcon-fb__body {
	max-width: 568px;
}

.elfcon-fb.elfcon-fb--hero .elfcon-fb__ctas {
	margin-top: 24px; /* text → buttons 64 */
}

.elfcon-fb.elfcon-fb--overlay-radial .elfcon-fb__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 900' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.800000011920929'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-108.15 76.1 -121.76 -173.04 1081.5 139)'><stop stop-color='rgba(0,0,0,0)' offset='0'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
	background-size: 100% 100%;
}

@media (max-width: 767px) {
	.elfcon-fb.elfcon-fb--hero {
		min-height: var( --elfcon-fb-h, 760px );
	}

	.elfcon-fb.elfcon-fb--hero .elfcon-fb__inner {
		padding-top: 150px;
	}

	/* Figma mobile hero 354:5490: its own radial gradient for the 390×760 frame (80 %)
	   plus a flat "Hero overlay" 354:5492 rgba(5,13,20,.38) on top (normal blend → ::before
	   above the photo/video and the gradient layer). The band's flat veil isn't used here. */
	.elfcon-fb.elfcon-fb--overlay-radial .elfcon-fb__media::after {
		background-color: transparent;
		background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 390 760' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.800000011920929'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-29.291 64.262 -32.977 -146.12 292.91 117.38)'><stop stop-color='rgba(0,0,0,0)' offset='0'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
	}

	.elfcon-fb.elfcon-fb--hero.elfcon-fb--overlay-radial .elfcon-fb__media::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: rgba( 5, 13, 20, 0.38 );
		opacity: 1; /* outranks the desktop video veil rule further down */
	}

	/* + the 20 % Dark Blue while the video plays, merged into one layer (0.38 then 0.2 = 0.504) */
	.elfcon-fb.elfcon-fb--hero.elfcon-fb--overlay-radial.is-video-playing .elfcon-fb__media::before {
		background: rgba( 5, 16, 28, 0.504 );
	}
}

/* Hero video: 20 % Dark Blue while it plays (Arqam, option B 2026-10-09) — the video's frames are
   brighter than Figma's poster; the poster itself keeps Figma's exact overlay */
.elfcon-fb.elfcon-fb--hero .elfcon-fb__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba( 5, 20, 40, 0.2 ); /* Dark Blue 20 % */
	opacity: 0;
	transition: opacity 0.6s ease, background-color 0.6s ease;
}

.elfcon-fb.elfcon-fb--hero.is-video-playing .elfcon-fb__media::before {
	opacity: 1;
}

/* Video dialog (feature band video mode) — not designed (ours): dark backdrop, 16:9 player */
.elfcon-fb dialog.elfcon-video {
	width: min( 1200px, calc( 100vw - 2 * var( --elfcon-gutter, 50px ) ) );
	max-width: none;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.elfcon-fb dialog.elfcon-video::backdrop {
	background: rgba( 5, 20, 40, 0.85 ); /* Dark Blue */
}

.elfcon-fb .elfcon-video__frame {
	aspect-ratio: 16 / 9;
	background: #000000;
}

.elfcon-fb .elfcon-video__frame > iframe,
.elfcon-fb .elfcon-video__frame > video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.elfcon-w button.elfcon-video__close {
	position: absolute;
	right: 0;
	bottom: calc( 100% + 12px );
	margin: 0;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --e-global-color-white, #ffffff );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Header (Figma Meny 192:3438 light, 88:41 over photo) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.elfcon-nav {
	--elfcon-nav-fg: var( --e-global-color-primary, #051428 ); /* Dark Blue */
	--elfcon-nav-logo: var( --e-global-color-secondary, #d22828 ); /* Red */
	--elfcon-nav-bg: linear-gradient( rgba( 255, 255, 255, 0.98 ), rgba( 255, 255, 255, 0 ) );
	position: relative;
	color: var( --elfcon-nav-fg );
}

.elfcon-nav .elfcon-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var( --elfcon-nav-h, 100px );
	padding-inline: max( var( --elfcon-gutter, 50px ), calc( ( 100% - 1340px ) / 2 ) ); /* the content column on wide screens */
	background: var( --elfcon-nav-bg );
	transition: background-color 0.2s ease, box-shadow 0.2s ease, height 0.35s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.elfcon-nav .elfcon-nav__logo {
	display: block;
	flex: none;
	width: 150px;
	color: var( --elfcon-nav-logo );
	line-height: 0;
}

/* Logos keep their colour on hover (Filip, Huddlekit #8) — beats the kit's a:hover. */
.elfcon-nav a.elfcon-nav__logo:hover {
	color: var( --elfcon-nav-logo );
}

.elfcon-nav .elfcon-nav__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.elfcon-nav .elfcon-nav__list {
	display: flex;
	align-items: center;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elfcon-nav .elfcon-nav__link {
	display: block;
	font-family: var( --e-global-typography-body-font-family, "Open Sans" ), sans-serif;
	font-size: var( --e-global-typography-body-font-size, 16px );
	font-weight: 400;
	line-height: 24px;
	color: var( --elfcon-nav-fg );
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.elfcon-nav .elfcon-nav__item.is-current > .elfcon-nav__link,
.elfcon-nav a.elfcon-nav__link:hover,
.elfcon-nav a.elfcon-nav__link:focus-visible {
	color: var( --e-global-color-secondary, #d22828 ); /* Red — hover is ours, active is Figma */
}

.elfcon-nav .elfcon-nav__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 24px;
}

.elfcon-nav .elfcon-nav__lang {
	position: relative;
	display: flex;
}

/* Trigger = Figma's flag 16 + 12 + arrow 10; the dropdown is ours (not designed) */
.elfcon-w button.elfcon-nav__lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 0;
	border: 0;
	background: none;
	color: var( --elfcon-nav-fg );
	cursor: pointer;
}

.elfcon-w button.elfcon-nav__lang-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.elfcon-nav .elfcon-nav__lang-toggle[aria-expanded="true"] .elfcon-nav__caret {
	transform: rotate( 180deg );
}

.elfcon-nav .elfcon-nav__caret {
	transition: transform 0.2s ease;
}

.elfcon-nav .elfcon-nav__flag {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	overflow: hidden;
	border-radius: 50%;
	line-height: 0;
}

.elfcon-nav .elfcon-nav__flag svg {
	display: block;
	width: 16px;
	height: 16px;
}

.elfcon-nav .elfcon-nav__lang-list {
	position: absolute;
	top: calc( 100% + 12px );
	right: 0;
	z-index: 3;
	min-width: 160px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var( --e-global-color-white, #ffffff );
	box-shadow: 0 8px 24px rgba( 5, 20, 40, 0.12 );
}

.elfcon-nav .elfcon-nav__lang-list[hidden] {
	display: none;
}

.elfcon-nav .elfcon-nav__lang-list .elfcon-nav__lang-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	color: var( --e-global-color-primary, #051428 );
	text-decoration: none;
	white-space: nowrap;
}

.elfcon-nav a.elfcon-nav__lang-link:hover,
.elfcon-nav a.elfcon-nav__lang-link:focus-visible {
	color: var( --e-global-color-secondary, #d22828 );
}

.elfcon-nav a.elfcon-nav__lang-link[aria-current] {
	font-weight: 600;
}

/* Mobile/tablet panel: languages under the button */
.elfcon-nav .elfcon-nav__panel-lang {
	display: flex;
	gap: 24px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.elfcon-nav .elfcon-nav__panel-lang .elfcon-nav__lang-link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var( --e-global-color-primary, #051428 );
	text-decoration: none;
}

.elfcon-nav .elfcon-nav__caret {
	fill: currentColor;
}

.elfcon-nav .elfcon-nav__toggle {
	display: none;
	position: relative;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var( --elfcon-nav-fg );
	cursor: pointer;
}

.elfcon-nav .elfcon-nav__toggle-lines,
.elfcon-nav .elfcon-nav__toggle-lines::before,
.elfcon-nav .elfcon-nav__toggle-lines::after {
	position: absolute;
	left: 4px;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.elfcon-nav .elfcon-nav__toggle-lines {
	top: 15px;
}

.elfcon-nav .elfcon-nav__toggle-lines::before,
.elfcon-nav .elfcon-nav__toggle-lines::after {
	content: "";
	left: 0;
}

.elfcon-nav .elfcon-nav__toggle-lines::before {
	top: -7px;
}

.elfcon-nav .elfcon-nav__toggle-lines::after {
	top: 7px;
}

.elfcon-nav.is-open .elfcon-nav__toggle-lines {
	background: transparent;
}

.elfcon-nav.is-open .elfcon-nav__toggle-lines::before {
	transform: translateY( 7px ) rotate( 45deg );
}

.elfcon-nav.is-open .elfcon-nav__toggle-lines::after {
	transform: translateY( -7px ) rotate( -45deg );
}

/* Mobile menu panel — not designed in Figma (ours, flagged PM Q10) */
.elfcon-nav .elfcon-nav__panel {
	position: fixed;
	inset: calc( var( --elfcon-nav-h, 100px ) + var( --wp-admin--admin-bar--height, 0px ) ) 0 0;
	z-index: 1;
	overflow-y: auto;
	padding: 40px var( --elfcon-gutter, 20px ) 64px;
	background: var( --e-global-color-white, #ffffff );
}

.elfcon-nav .elfcon-nav__panel[hidden],
.elementor-sticky__spacer .elfcon-nav .elfcon-nav__panel {
	display: none; /* the sticky spacer is a hidden clone of the header — re-cloned while open */
}

.elfcon-nav .elfcon-nav__panel-list,
.elfcon-nav .elfcon-nav__panel-list .elfcon-nav__sub {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elfcon-nav .elfcon-nav__panel-list > li > .elfcon-nav__link {
	font-size: var( --e-global-typography-h4-font-size, 24px );
	line-height: var( --e-global-typography-h4-line-height, 32px );
	white-space: normal;
}

.elfcon-nav .elfcon-nav__panel-list .elfcon-nav__sub {
	gap: 16px;
	margin-top: 16px;
	padding-left: 16px;
}

.elfcon-nav .elfcon-nav__panel-cta {
	margin-top: 40px;
}

.elfcon-nav .elfcon-nav__assign {
	color: inherit;
	font-size: 14px;
}

/* Over-photo look: page setting "Header över bild" (body.elfcon-header-overlay) */
.elfcon-header-overlay .elementor-location-header {
	position: absolute;
	top: var( --wp-admin--admin-bar--height, 0px );
	right: 0;
	left: 0;
	z-index: 99;
}

.elfcon-header-overlay .elfcon-nav {
	--elfcon-nav-fg: var( --e-global-color-white, #ffffff );
	--elfcon-nav-logo: var( --e-global-color-white, #ffffff );
	--elfcon-nav-bg: linear-gradient( rgba( 0, 0, 0, 0.2 ), rgba( 0, 0, 0, 0 ) ); /* Figma 88:41 */
}

.elfcon-header-overlay .elfcon-nav .elfcon-nav__item.is-current > .elfcon-nav__link,
.elfcon-header-overlay .elfcon-nav a.elfcon-nav__link:hover,
.elfcon-header-overlay .elfcon-nav a.elfcon-nav__link:focus-visible {
	color: var( --e-global-color-white, #ffffff );
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* CTA: red outline on light, white outline over the photo */
.elfcon-header-overlay .elfcon-nav .elfcon-btn--red-outline.elfcon-nav__cta {
	--elfcon-btn-bg: transparent;
	--elfcon-btn-bd: var( --e-global-color-white, #ffffff );
	--elfcon-btn-fg: var( --e-global-color-white, #ffffff );
	--elfcon-btn-bg-h: var( --e-global-color-white, #ffffff );
	--elfcon-btn-bd-h: var( --e-global-color-white, #ffffff );
	--elfcon-btn-fg-h: var( --e-global-color-primary, #051428 );
}

/* Scrolled (Elementor sticky effects) or menu open: solid white, light colours — ours */
.elementor-sticky--effects .elfcon-nav,
.elfcon-nav.is-open,
.elfcon-header-overlay .elementor-sticky--effects .elfcon-nav,
.elfcon-header-overlay .elfcon-nav.is-open {
	--elfcon-nav-fg: var( --e-global-color-primary, #051428 );
	--elfcon-nav-logo: var( --e-global-color-secondary, #d22828 );
	--elfcon-nav-bg: var( --e-global-color-white, #ffffff );
}

.elementor-sticky--effects .elfcon-nav .elfcon-nav__bar,
.elfcon-nav.is-open .elfcon-nav__bar {
	box-shadow: 0 1px 0 var( --e-global-color-mediumgrey, #e3e3e2 );
}

/* Scrolled: the bar eases from 100 to 70 (Arqam 2026-10-23 — ours; Figma only has 100). The
   sticky spacer keeps 100, so nothing below moves. Phones stay 68 (below). */
.elementor-sticky--effects .elfcon-nav {
	--elfcon-nav-h: 70px;
}

.elfcon-header-overlay .elementor-sticky--effects .elfcon-nav .elfcon-nav__item.is-current > .elfcon-nav__link,
.elfcon-header-overlay .elementor-sticky--effects .elfcon-nav a.elfcon-nav__link:hover,
.elfcon-header-overlay .elfcon-nav.is-open a.elfcon-nav__link:hover {
	color: var( --e-global-color-secondary, #d22828 );
	text-decoration: none;
}

.elfcon-header-overlay .elementor-sticky--effects .elfcon-nav .elfcon-btn--red-outline.elfcon-nav__cta {
	--elfcon-btn-bg: var( --e-global-color-secondary, #d22828 );
	--elfcon-btn-bd: var( --e-global-color-secondary, #d22828 );
	--elfcon-btn-fg: var( --e-global-color-white, #ffffff );
	--elfcon-btn-bg-h: transparent;
	--elfcon-btn-bd-h: var( --e-global-color-secondary, #d22828 );
	--elfcon-btn-fg-h: var( --e-global-color-secondary, #d22828 );
}

.elfcon-nav-open,
.elfcon-nav-open body {
	overflow: hidden;
}

@media (max-width: 1024px) {
	.elfcon-nav .elfcon-nav__menu,
	.elfcon-nav .elfcon-nav__actions .elfcon-nav__cta,
	.elfcon-nav .elfcon-nav__lang {
		display: none;
	}

	.elfcon-nav .elfcon-nav__toggle {
		display: block;
	}
}

/* Mobile bar 68 (Figma 354:5493): logo 100×20 and 32px menu icon, centred in the bar —
   equal space above and below (Arqam 2026-10-10; Figma top-aligned them at 28) */
@media (max-width: 767px) {
	.elfcon-nav,
	.elementor-sticky--effects .elfcon-nav {
		--elfcon-nav-h: 68px;
	}

	.elfcon-nav .elfcon-nav__bar {
		align-items: center;
	}

	.elfcon-nav .elfcon-nav__logo {
		width: 100px;
	}

}

/* Footer (Figma 122:1370, mobile 362:7549) */
.elfcon-footer {
	display: flex;
	flex-direction: column;
	min-height: 600px;
	padding: 64px max( var( --elfcon-gutter, 50px ), calc( ( 100% - 1340px ) / 2 ) ) 0; /* the content column on wide screens */
	background: var( --e-global-color-secondary, #d22828 ); /* Red */
	color: var( --e-global-color-white, #ffffff );
}

.elfcon-footer .elfcon-footer__top,
.elfcon-footer .elfcon-footer__bottom {
	display: grid;
	grid-template-columns: minmax( 0, 433fr ) minmax( 0, 773fr );
	column-gap: 10%;
}

.elfcon-footer .elfcon-footer__logo {
	display: block;
	width: 150px;
	color: var( --e-global-color-white, #ffffff );
	line-height: 0;
}

.elfcon-footer a.elfcon-footer__logo:hover {
	color: var( --e-global-color-white, #ffffff );
}

.elfcon-footer .elfcon-footer__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.elfcon-footer .elfcon-footer__cols {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.elfcon-footer .elfcon-footer__col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.elfcon-footer .elfcon-footer__col--sites {
	width: 207px;
}

.elfcon-footer .elfcon-footer__list,
.elfcon-footer .elfcon-footer__sub,
.elfcon-footer .elfcon-footer__legal-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elfcon-footer .elfcon-footer__sub {
	gap: 16px;
	margin-top: 16px;
	padding-left: 1.04em; /* Figma indents with four spaces */
}

.elfcon-footer .elfcon-footer__link,
.elfcon-footer .elfcon-footer__muted {
	display: block;
	margin-block: calc( 0.326em - 0.5lh ) calc( 0.388em - 0.5lh ); /* leading trim */
	font-family: var( --e-global-typography-body-font-family, "Open Sans" ), sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var( --e-global-color-white, #ffffff );
	text-decoration: none;
}

.elfcon-footer a.elfcon-footer__link:hover,
.elfcon-footer a.elfcon-footer__link:focus-visible,
.elfcon-footer .elfcon-footer__muted a:hover {
	color: var( --e-global-color-white, #ffffff );
	text-decoration: underline; /* ours — no hover in Figma */
	text-underline-offset: 4px;
}

.elfcon-footer .elfcon-footer__muted,
.elfcon-footer .elfcon-footer__muted a {
	color: var( --e-global-color-white92, rgba( 255, 255, 255, 0.92 ) ); /* White 92% — Figma's 60 % failed WCAG AA (2.66:1); 92 % is the lowest that passes (4.56:1) */
	text-decoration: none;
}

/* Address blocks are fixed 72px boxes in Figma (not trimmed), 12 apart */
.elfcon-footer .elfcon-footer__sites {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.elfcon-footer .elfcon-footer__sites .elfcon-footer__muted {
	margin: 0;
}

.elfcon-footer .elfcon-footer__bottom {
	margin-top: auto;
	padding: 20px 0 28px;
	border-top: 1px solid var( --e-global-color-white60, rgba( 255, 255, 255, 0.6 ) );
}

.elfcon-footer .elfcon-footer__legal {
	grid-column: 1 / -1;
	grid-row: 1;
	justify-self: center; /* centred on the page (Arqam 2026-10-10; Figma aligned them with the menu columns) */
}

.elfcon-footer .elfcon-footer__legal-list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 24px;
}

.elfcon-footer .elfcon-footer__legal .elfcon-footer__link,
.elfcon-footer .elfcon-footer__copy {
	font-size: var( --e-global-typography-caption-font-size, 12px );
	line-height: var( --e-global-typography-caption-line-height, 16px );
}

.elfcon-footer .elfcon-footer__copy {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	position: relative;
	top: 4px; /* Figma: 4px below the legal links, without growing the row */
	margin-block: calc( 0.326em - 0.5lh ) calc( 0.388em - 0.5lh );
	font-family: var( --e-global-typography-caption-font-family, "Open Sans" ), sans-serif;
	color: var( --e-global-color-white, #ffffff );
}

@media (max-width: 1024px) {
	.elfcon-footer .elfcon-footer__top {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 64px;
	}

	/* Tablet — ours: content height, the four columns as two rows of two */
	.elfcon-footer {
		min-height: 0;
	}

	.elfcon-footer .elfcon-footer__cols {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 50px 24px;
	}

	.elfcon-footer .elfcon-footer__bottom {
		grid-template-columns: minmax( 0, 1fr ) auto;
		margin-top: 64px;
	}

}

@media (max-width: 767px) {
	.elfcon-footer {
		min-height: 0;
	}

	.elfcon-footer .elfcon-footer__logo {
		width: 100px;
	}

	.elfcon-footer .elfcon-footer__cols {
		display: flex;
		flex-direction: column;
		gap: 50px;
	}

	.elfcon-footer .elfcon-footer__top {
		row-gap: 66px;
	}

	.elfcon-footer .elfcon-footer__bottom {
		grid-template-columns: minmax( 0, 1fr );
		margin-top: 40px; /* Figma: last column → divider 40 */
		padding: 35px 0 71px;
	}

	.elfcon-footer .elfcon-footer__legal {
		justify-self: start;
	}

	.elfcon-footer .elfcon-footer__legal-list {
		gap: 16px; /* Figma 24 — tightened (Arqam 2026-10-10) */
	}

	.elfcon-footer .elfcon-footer__copy {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		top: 0;
		margin-top: calc( 55px - 8.6px + 0.326em - 0.5lh ); /* legal cap-top → © cap-top 55 */
	}
}

/* Contact band (Figma Formulär 95:1833 form 750, teaser 151:1351 600) */
.elfcon-contact {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var( --e-global-color-white, #ffffff );
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-contact .elfcon-contact__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.elfcon-contact .elfcon-contact__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* White veil: solved from the Figma export, 96 % on all three channels */
.elfcon-contact .elfcon-contact__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 255, 255, 255, 0.96 );
}

/* Background video (client 2026-10-26, "Water_BG_FADE_TOP"): already pale, so no veil — instead the
   white page fades into it at the top. The video and its poster (first frame) are anchored to the
   top so the video's own fade is never cropped; the 120px CSS fade makes the very top exact white. */
.elfcon-contact.elfcon-contact--bg-video .elfcon-contact__bg::after {
	inset: 0 0 auto;
	height: 120px;
	background: linear-gradient( 180deg, var( --e-global-color-white, #ffffff ), rgba( 255, 255, 255, 0 ) );
}

.elfcon-contact.elfcon-contact--bg-video .elfcon-contact__bg img,
.elfcon-contact .elfcon-contact__video {
	object-position: center top;
}

.elfcon-contact .elfcon-contact__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.elfcon-contact.is-video-playing .elfcon-contact__video {
	opacity: 1;
}

.elfcon-contact .elfcon-contact__inner {
	display: grid;
	grid-template-columns: minmax( 0, 433fr ) minmax( 0, 248fr ) minmax( 0, 545fr ) minmax( 0, 114fr ); /* x 50 | 731 panel | 164 margin */
	align-items: start;
	min-height: 750px;
	padding-inline: max( var( --elfcon-gutter, 50px ), calc( ( 100% - 1340px ) / 2 ) ); /* the content column on wide screens */
}

.elfcon-contact.elfcon-contact--teaser .elfcon-contact__inner {
	min-height: 600px;
}

.elfcon-contact .elfcon-contact__intro {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	padding-top: 170px;
}

.elfcon-contact.elfcon-contact--teaser .elfcon-contact__intro {
	padding-top: 80px;
}

.elfcon-contact .elfcon-contact__label {
	margin-bottom: calc( 0.388em - 0.5lh + 24px ); /* label → heading 64 */
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-contact .elfcon-contact__text {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.elfcon-contact .elfcon-contact__heading,
.elfcon-contact .elfcon-contact__city {
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-contact .elfcon-contact__body,
.elfcon-contact .elfcon-contact__lines {
	color: var( --e-global-color-text, #051428 );
}

.elfcon-contact .elfcon-contact__lines a {
	color: inherit;
	text-decoration: none;
}

.elfcon-contact .elfcon-contact__lines a:hover {
	color: var( --e-global-color-secondary, #d22828 );
}

.elfcon-contact.elfcon-contact--offices .elfcon-contact__intro {
	gap: 64px;
}

.elfcon-contact .elfcon-contact__office {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.elfcon-contact .elfcon-contact__cta {
	display: flex;
}

.elfcon-contact .elfcon-contact__panel {
	grid-column: 3;
	align-self: stretch; /* Figma 730 of 750; Filip (Huddlekit #7/#12): runs to the band's bottom */
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 730px;
	padding: 64px 64px 84px; /* +20: the form stays where Figma's 730 panel centred it */
	background: rgba( 255, 255, 255, 0.8 ); /* White 80 % — not a kit token */
}

/* Gravity Forms — GF stylesheets are off (dev/bin/forms.php); this is the whole look */
.elfcon-contact .gform_wrapper .gform_heading,
.elfcon-contact .gform_wrapper .gform_validation_container,
.elfcon-contact .gform_wrapper .gform_validation_errors,
.elfcon-contact .gform_wrapper .gfield--type-honeypot,
.elfcon-contact .gform_wrapper .gform_hidden,
.elfcon-contact .gform_wrapper .gfield_visibility_hidden {
	display: none !important; /* GF's own CSS would hide these; it is disabled */
}

.elfcon-contact .gform_wrapper .hidden_label > .gfield_label,
.elfcon-contact .gform_wrapper .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.elfcon-contact .gform_wrapper form,
.elfcon-contact .gform_wrapper .gform_body {
	margin: 0;
}

.elfcon-contact .gform_wrapper .gform_fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	margin: 0;
	padding: 0;
}

.elfcon-contact .gform_wrapper .gfield {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.elfcon-contact .gform_wrapper .gfield_label {
	display: flex;
	margin: calc( 0.326em - 0.5lh ) 0 calc( 0.388em - 0.5lh ); /* label baseline → field box 0 (Figma) */
	padding: 0;
	font-family: var( --e-global-typography-body-font-family, "Open Sans" ), sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-contact .gform_wrapper .gfield_required {
	color: inherit;
}

.elfcon-contact .gform_wrapper .gfield input[type="text"],
.elfcon-contact .gform_wrapper .gfield input[type="email"],
.elfcon-contact .gform_wrapper .gfield input[type="tel"],
.elfcon-contact .gform_wrapper .gfield textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 44px; /* Figma: 16 + cap + 16, bottom rule */
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var( --e-global-color-mediumgrey, #e3e3e2 ); /* Medium Grey */
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var( --e-global-typography-body-font-family, "Open Sans" ), sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var( --e-global-color-primary, #051428 );
}

.elfcon-contact .gform_wrapper .gfield textarea {
	height: 68px; /* Figma: pt16 + cap + pb40 */
	min-height: 68px;
	padding: 9.4px 0 0;
	resize: vertical;
}

.elfcon-contact .gform_wrapper .gfield input::placeholder,
.elfcon-contact .gform_wrapper .gfield textarea::placeholder {
	color: rgba( 5, 20, 40, 0.6 ); /* Dark Blue 60 % — PM ruling (Figma Medium Grey failed contrast) */
	opacity: 1;
}

.elfcon-contact .gform_wrapper .gfield input:focus,
.elfcon-contact .gform_wrapper .gfield textarea:focus {
	outline: none;
	border-bottom-color: var( --e-global-color-primary, #051428 );
	box-shadow: 0 1px 0 var( --e-global-color-primary, #051428 ); /* focus = ours */
}

/* Consent + submit share the last row (submit is GF "inline") */
.elfcon-contact .gform_wrapper .gfield--type-consent {
	flex: 1 1 auto;
	width: auto;
}

.elfcon-contact .gform_wrapper .gfield--type-submit {
	flex: 0 0 auto;
	margin-left: auto;
}

.elfcon-contact .gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.elfcon-contact .gform_wrapper .ginput_container_consent input[type="checkbox"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid var( --e-global-color-secondary, #d22828 ); /* Red */
	border-radius: 0;
	background: transparent no-repeat center / 12px 12px;
	appearance: none;
	cursor: pointer;
}

.elfcon-contact .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked {
	background-color: var( --e-global-color-secondary, #d22828 );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3.2' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E" ); /* ours */
}

.elfcon-contact .gform_wrapper .ginput_container_consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --e-global-color-primary, #051428 );
	outline-offset: 2px;
}

.elfcon-contact .gform_wrapper .gfield_consent_label {
	max-width: 175px; /* Figma wraps the consent text at 175 */
	margin: calc( 0.326em - 0.5lh ) 0 calc( 0.388em - 0.5lh );
	font-size: 16px;
	line-height: 24px;
	color: var( --e-global-color-primary, #051428 ); /* Figma #000 was a slip (PM) */
}

.elfcon-contact .gform_wrapper .gfield_consent_label .gfield_required,
.elfcon-contact .gform_wrapper .gfield_consent_label + .gfield_required {
	display: none;
}

.elfcon-contact .gform_wrapper .gfield_consent_label a {
	color: inherit;
	text-decoration: underline;
}

/* Submit = CTA_BOX "Red to Dark Blue"; a <button> can't be trimmed, so the 35px box is set directly */
.elfcon-contact .gform_wrapper .gform_button,
.elfcon-contact .gform_wrapper button[type="submit"] {
	box-sizing: border-box;
	height: 35.4px;
	margin: 0;
	padding: 0 11px;
	border: 1px solid var( --e-global-color-secondary, #d22828 );
	border-radius: 0;
	background: var( --e-global-color-secondary, #d22828 );
	font-family: var( --e-global-typography-button-font-family, "Open Sans" ), sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 33.4px;
	color: var( --e-global-color-white, #ffffff );
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.elfcon-contact .gform_wrapper .gform_button:hover,
.elfcon-contact .gform_wrapper .gform_button:focus-visible,
.elfcon-contact .gform_wrapper button[type="submit"]:hover {
	border-color: var( --e-global-color-primary, #051428 );
	background: transparent;
	color: var( --e-global-color-primary, #051428 );
}

/* Validation + confirmation — not designed (ours) */
.elfcon-contact .gform_wrapper .gfield_error input,
.elfcon-contact .gform_wrapper .gfield_error textarea {
	border-bottom-color: var( --e-global-color-secondary, #d22828 );
}

.elfcon-contact .gform_wrapper .validation_message,
.elfcon-contact .gform_wrapper .gfield_validation_message {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 12px;
	line-height: 16px;
	color: var( --e-global-color-secondary, #d22828 );
}

.elfcon-contact .gform_confirmation_message {
	font-size: 16px;
	line-height: 24px;
	color: var( --e-global-color-primary, #051428 );
}

@media (max-width: 1024px) {
	.elfcon-contact .elfcon-contact__inner,
	.elfcon-contact.elfcon-contact--teaser .elfcon-contact__inner {
		grid-template-columns: minmax( 0, 1fr );
		min-height: 0;
		padding-block: 80px;
	}

	.elfcon-contact .elfcon-contact__intro,
	.elfcon-contact.elfcon-contact--teaser .elfcon-contact__intro {
		padding-top: 0;
	}

	.elfcon-contact .elfcon-contact__panel {
		grid-column: 1;
		max-width: 660px; /* tablet: the text measure */
		min-height: 0;
		margin-top: 40px;
		padding-bottom: 64px;
	}
}

/* Tablet: the panel also ends on the band's bottom edge (phones have no panel) */
@media (min-width: 768px) and (max-width: 1024px) {
	.elfcon-contact.elfcon-contact--form .elfcon-contact__inner {
		padding-bottom: 0;
	}
}

/* Mobile (Figma 361:7544): panel dropped, fields straight on the band */
@media (max-width: 767px) {
	.elfcon-contact .elfcon-contact__inner {
		padding-block: 48px 120px;
	}

	.elfcon-contact.elfcon-contact--teaser .elfcon-contact__inner {
		padding-block: 80px;
	}

	.elfcon-contact .elfcon-contact__panel {
		margin-top: 13px; /* Figma 361:7553: link → first field label 13 */
		padding: 0;
		background: none;
	}

	/* Figma's mobile row (16 + 20 + 175 + 150) is 11px wider than the column: the
	   checkbox gap shrinks 20 → 12 so the text keeps Figma's two lines (needs 164) */
	.elfcon-contact .gform_wrapper .gform_fields {
		column-gap: 0;
	}

	.elfcon-contact .gform_wrapper .gfield--type-consent {
		flex: 1 1 calc( 100% - 150px ); /* own line, shared with the button */
	}

	.elfcon-contact .gform_wrapper .ginput_container_consent {
		gap: 12px;
	}

	.elfcon-contact .gform_wrapper .gfield_consent_label {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elfcon-w .elfcon-btn,
	.elfcon-w .elfcon-btn__icon,
	.elfcon-w .elfcon-arrow__shaft,
	.elfcon-w .elfcon-arrow__head,
	.elfcon-nav .elfcon-nav__bar,
	.elfcon-nav .elfcon-nav__link,
	.elfcon-nav .elfcon-nav__toggle-lines,
	.elfcon-nav .elfcon-nav__toggle-lines::before,
	.elfcon-nav .elfcon-nav__toggle-lines::after,
	.elfcon-contact .gform_wrapper .gform_button,
	.elfcon-cg .elfcon-cg__card,
	.elfcon-cg .elfcon-cg__item,
	.elfcon-sf.is-scroll .elfcon-sf__item,
	.elfcon-sf.is-scroll .elfcon-sf__media,
	.elfcon-map .elfcon-map__card,
	.elfcon-fb .elfcon-fb__video {
		transition: none;
	}
}

/* Scroll motion (ours, Filip — Huddlekit #1 #9 #10; assets/js/motion.js). The script only marks
   what starts below the first screen, and does nothing under reduced motion. */
.elfcon-pre {
	transition: opacity 0.9s cubic-bezier( 0.16, 1, 0.3, 1 ), translate 0.9s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.elfcon-pre.elfcon-pre--picture {
	transition-duration: 1.2s;
}

.elfcon-pre:not(.is-in) {
	opacity: 0;
	translate: 0 24px;
}

.elfcon-pre.elfcon-pre--picture:not(.is-in) {
	translate: 0 64px;
}

/* Parallax: the photo layer is taller than the band by the drift range on both sides */
.elfcon-fb.has-parallax .elfcon-fb__media {
	inset: calc( -1 * var( --elfcon-px-range, 0px ) ) 0;
	translate: 0 var( --elfcon-px, 0px );
	will-change: translate;
}

.elfcon-image-band.has-parallax .elfcon-image-band__img {
	height: calc( 100% + 2 * var( --elfcon-px-range, 0px ) );
	margin-top: calc( -1 * var( --elfcon-px-range, 0px ) );
	translate: 0 var( --elfcon-px, 0px );
	will-change: translate;
}

@media print {
	.elfcon-pre:not(.is-in) {
		opacity: 1;
		translate: none;
	}
}