/* ==========================================================================
   Udenco Core — behaviour styles and plugin-rendered blocks.
   Page layout and typography live in Elementor (global variables/classes);
   this file covers what Elementor can't express: header states, menu
   panels, expanding cards, sticky columns and the data-driven widgets.
   ========================================================================== */

:root {
	--ud-navy: #151d26;
	--ud-slate: #2e3a46;
	--ud-slate-2: #414f5d;
	--ud-green: #79b834;
	--ud-green-soft: #def0cb;
	--ud-grey-100: #f5f5f5;
	--ud-grey-200: #e6e6e6;
	--ud-grey-400: #a6a6a6;
	--ud-grey-600: #515151;
	--ud-white: #fff;
	--ud-font-head: "Chakra Petch", sans-serif;
	--ud-font-body: "Sora", sans-serif;
	--ud-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
	--ud-header-h: 104px;
}

@media (max-width: 1024px) {
	:root { --ud-header-h: 80px; }
}

body {
	overflow-x: clip;
	background: var(--ud-white);
	color: var(--ud-navy);
	font-family: var(--ud-font-body);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
}

::selection {
	background: var(--ud-green-soft);
	color: var(--ud-navy);
}

/* --------------------------------------------------------------------------
   Page grid (from the 1440 Figma): two containers.
   - Wide:   56px side margins at 1440 (content 1328), content max 1400px.
   - Narrow: 168px side margins at 1440 (content 1104), content max 1176px.
   Up to the max the layout is fluid; beyond it only the margins grow, so
   content stays centred while backgrounds keep running edge to edge.
   --space-gutter (the Elementor kit variable used by most sections) is the
   wide margin. Change the two max values here to retune the whole site.
   -------------------------------------------------------------------------- */
html:root {
	--grid-wide-max: 1400px;
	--grid-wide: max(clamp(20px, calc(20px + 36 * ((100vw - 360px) / 1080)), 56px), calc((100vw - var(--grid-wide-max)) / 2));
	/* One grid everywhere (decision 2026-10-22): narrow = wide. Kept as a
	   separate variable so a narrower container can be reintroduced. */
	--grid-narrow: var(--grid-wide);
	/* Extra inset for a narrow block that sits inside a wide section. */
	--grid-inset: calc(var(--grid-narrow) - var(--grid-wide));
	--space-gutter: var(--grid-wide);
}

/* --------------------------------------------------------------------------
   Header: fixed, transparent over the hero, solid elsewhere.
   Elements inside use var(--ud-header-fg) etc. so they follow the state.
   -------------------------------------------------------------------------- */

.ud-header {
	--ud-header-fg: var(--ud-navy);
	--ud-header-solid: #f9f9f9;
	--ud-header-bg: var(--ud-header-solid);
	--ud-header-border: var(--ud-grey-200);
	--ud-header-logo-light: 0;
	--ud-header-logo-dark: 1;
	position: fixed !important;
	inset: 0 0 auto 0;
	z-index: 1000 !important;
	/* Background on a layer (::after), not on the header itself: an element
	   with backdrop-filter would stop children from blurring the page. */
	background-color: transparent !important;
	border-bottom: 1px solid var(--ud-header-border);
	color: var(--ud-header-fg);
	transition: border-color 0.35s var(--ud-ease), color 0s linear 0.15s;
}

.ud-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--ud-header-bg);
	/* Blur always on: under the solid #F9F9F9 it is invisible, and switching
	   it off made the photo flash sharp when the dropdown opened. */
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	pointer-events: none;
	transition: background-color 0.35s var(--ud-ease);
}

/* Header text and icons switch colour in one step at the midpoint of the
   background fade (0.15s), when both navy and white still read well on
   the mid-grey. Fading them together made the text vanish for a moment
   (text and background passed through the same grey). Buttons keep their
   own hover transitions. */
.ud-header :is(p, span, svg, path):not(.btn *) {
	transition: color 0s linear 0.15s, stroke 0s linear 0.15s, fill 0s linear 0.15s;
}

/* On top of a page with a hero image: frosted glass, white text, no border.
   Everywhere else (past the hero, pages without one, dropdown open): solid
   #F9F9F9 with a grey bottom border. */
html:not(.ud-menu-open):has(.ud-hero) .ud-header:not(.is-solid):not(.has-mega-open) {
	--ud-header-fg: var(--ud-white);
	--ud-header-bg: rgba(10, 20, 22, 0.18);
	--ud-header-border: transparent;
	--ud-header-logo-light: 1;
	--ud-header-logo-dark: 0;
}

/* The mobile menu always uses the light theme. */
html.ud-menu-open .ud-header.ud-header {
	--ud-header-fg: var(--ud-navy);
	--ud-header-bg: var(--ud-grey-100);
	--ud-header-border: var(--ud-grey-400);
	--ud-header-logo-light: 0;
	--ud-header-logo-dark: 1;
}

.ud-header .ud-logo-light { opacity: var(--ud-header-logo-light); transition: opacity 0s linear 0.15s; }
.ud-header .ud-logo-dark { opacity: var(--ud-header-logo-dark); transition: opacity 0s linear 0.15s; }

/* Line icons: Elementor's SVG widget sets fill="currentColor" on the <svg>,
   which would fill stroke-only icons. Keep them outlined and let the stroke
   follow the element's text colour (so icons are recoloured like text). */
.e-svg-base svg path[stroke]:not([fill]),
.e-svg-base svg line,
.e-svg-base svg polyline {
	fill: none;
}

.e-svg-base svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

/* Pages without a hero start below the header. */
body:not(:has(.ud-hero)) {
	padding-top: var(--ud-header-h);
}

body.elementor-editor-active,
body.elementor-editor-preview {
	padding-top: 0;
}

.elementor-editor-active .ud-header {
	position: relative !important;
}

.ud-hero {
	position: relative;
}

.ud-hero-sentinel {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* Menu items that open a panel. */
[class*="ud-open-"] {
	cursor: pointer;
}

[class*="ud-open-"] svg {
	transition: transform 0.3s var(--ud-ease);
}

[class*="ud-open-"].is-active svg {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Desktop mega-menu panels (inside the header, below its bottom edge).
   -------------------------------------------------------------------------- */

.ud-header [class*="ud-mega-"] {
	position: absolute !important;
	top: 100%;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-10px);
	transition: opacity 0.3s var(--ud-ease), transform 0.4s var(--ud-ease), visibility 0s linear 0.4s;
	/* Same solid background as the header bar. */
	background-color: #f9f9f9 !important;
	border-bottom: 1px solid var(--ud-grey-200);
}

/* Cards in the dropdown: a small shadow lifts them off the glass. */
.ud-header [class*="ud-mega-"] .ud-menu-card {
	box-shadow: 0 2px 12px rgba(21, 29, 38, 0.06);
}

.ud-header [class*="ud-mega-"].is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity 0.3s var(--ud-ease), transform 0.4s var(--ud-ease), visibility 0s;
}

/* Panel content sits on the page grid (same side margins as the sections). */
.ud-header [class*="ud-mega-"] {
	padding-left: var(--space-gutter, 56px) !important;
	padding-right: var(--space-gutter, 56px) !important;
}

/* Cards inside the panel arrive slightly staggered. */
.ud-header [class*="ud-mega-"] .ud-menu-card {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s var(--ud-ease), transform 0.45s var(--ud-ease);
}

.ud-header [class*="ud-mega-"].is-open .ud-menu-card {
	opacity: 1;
	transform: none;
}

.ud-header [class*="ud-mega-"].is-open .ud-menu-card:nth-child(2) { transition-delay: 0.05s; }
.ud-header [class*="ud-mega-"].is-open .ud-menu-card:nth-child(3) { transition-delay: 0.1s; }

.ud-menu-card {
	transition: box-shadow 0.3s var(--ud-ease), transform 0.3s var(--ud-ease);
}

.ud-menu-card:hover {
	box-shadow: 0 8px 32px rgba(21, 29, 38, 0.08);
}

@media (max-width: 1024px) {
	.ud-header [class*="ud-mega-"] {
		display: none !important;
	}
}

/* In the editor, panels sit in the flow so they can be edited. */
.elementor-editor-active .ud-header {
	flex-wrap: wrap;
	height: auto !important;
}

.elementor-editor-active .ud-header [class*="ud-mega-"],
.elementor-editor-active .ud-header [class*="ud-mega-"] .ud-menu-card {
	position: relative !important;
	top: auto;
	flex-basis: 100%;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

/* Arrow buttons: the arrow nudges forward on hover. */
.btn-group svg {
	transition: transform 0.3s var(--ud-ease);
}

.btn-group:hover svg {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Mobile menu: full screen below the header row; sub-screens slide in.
   -------------------------------------------------------------------------- */

.ud-burger {
	position: relative;
	flex: 0 0 auto;
	width: 32px !important;
	min-width: 0 !important;
	height: 32px !important;
	padding: 0 !important;
	cursor: pointer;
	color: var(--ud-header-fg, var(--ud-navy));
}

.ud-burger,
.ud-burger:hover,
.ud-burger:focus,
.ud-burger:active {
	background: transparent !important;
	border: 0 !important;
	color: var(--ud-header-fg, var(--ud-navy)) !important;
}

.ud-burger:focus-visible {
	outline: 2px solid var(--ud-green);
	outline-offset: 2px;
}

/* Three lines (injected by JS) → ✕, 32px box and 1.5px strokes like the Figma xmark. */
.ud-burger__line {
	position: absolute;
	left: 6px;
	right: 6px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.4s var(--ud-ease), opacity 0.2s var(--ud-ease);
}

.ud-burger__line:nth-child(1) { top: 9.25px; }
.ud-burger__line:nth-child(2) { top: 15.25px; }
.ud-burger__line:nth-child(3) { top: 21.25px; }

.ud-burger.is-active .ud-burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ud-burger.is-active .ud-burger__line:nth-child(2) { opacity: 0; }
.ud-burger.is-active .ud-burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.ud-mobile-menu {
	position: fixed !important;
	top: var(--ud-header-h) !important;
	left: 0;
	right: 0;
	width: 100% !important;
	height: calc(100vh - var(--ud-header-h)) !important;
	height: calc(100dvh - var(--ud-header-h)) !important;
	overflow-y: auto;
	background: var(--ud-grey-100);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity 0.3s var(--ud-ease), transform 0.4s var(--ud-ease), visibility 0s linear 0.4s;
	z-index: 999;
}

.ud-mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s var(--ud-ease), transform 0.4s var(--ud-ease), visibility 0s;
}

.ud-mobile-menu [class*="ud-msub-"] {
	position: absolute !important;
	inset: 0;
	overflow-y: auto;
	background: var(--ud-grey-100);
	transform: translateX(100%);
	transition: transform 0.45s var(--ud-ease);
	z-index: 2;
}

.ud-mobile-menu [class*="ud-msub-"].is-open {
	transform: none;
}

html.ud-menu-open,
html.ud-menu-open body {
	overflow: hidden;
}

@media (min-width: 1025px) {
	.ud-burger,
	.ud-mobile-menu {
		display: none !important;
	}
}

/* Show the mobile menu in the editor so it can be edited. */
.elementor-editor-active .ud-mobile-menu,
.elementor-editor-active .ud-mobile-menu [class*="ud-msub-"] {
	position: relative !important;
	top: 0;
	height: auto;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* --------------------------------------------------------------------------
   Expanding cards (e.g. "Three ways to bring your product to market").
   -------------------------------------------------------------------------- */

.ud-expand-row {
	display: flex !important;
}

.ud-expand-card {
	flex: 1 1 0 !important;
	min-width: 0;
	overflow: hidden;
	/* !important: Elementor's .e-con transition (background/border/…) would replace it. */
	transition: flex-grow 1.2s var(--ud-ease) !important;
}

.ud-expand-card.is-active {
	flex-grow: 3.4 !important;
}

/* The text block grows smoothly (so the title glides up instead of
   jumping), then the text fades in. */
.ud-expand-card .ud-expand-detail {
	opacity: 0;
	max-height: 0;
	transform: translateY(8px);
	transition: opacity 0.3s var(--ud-ease), transform 0.4s var(--ud-ease), max-height 0.6s var(--ud-ease);
}

.ud-expand-card.is-active .ud-expand-detail {
	opacity: 1;
	max-height: 10em;
	transform: none;
	transition: max-height 1s var(--ud-ease) 0.2s, opacity 0.8s var(--ud-ease) 0.6s, transform 0.9s var(--ud-ease) 0.6s;
}

.ud-expand-card img {
	transition: transform 1.4s var(--ud-ease);
}

.ud-expand-card .ud-expand-title {
	/* One line in every state: wrapping while the card is still narrow made
	   the title jump up and back down. */
	white-space: nowrap;
	transition: font-size 0.9s var(--ud-ease);
}

.ud-expand-card:not(.is-active) .ud-expand-title {
	font-size: var(--fs-h5, 24px) !important;
	white-space: nowrap;
}

.ud-expand-card .ud-expand-detail {
	overflow: hidden;
}

.ud-expand-card.is-active img {
	transform: scale(1.03);
}

@media (max-width: 1024px) {
	.ud-expand-row {
		flex-direction: column !important;
	}

	.ud-expand-card,
	.ud-expand-card.is-active {
		flex: none !important;
	}

	.ud-expand-card .ud-expand-detail {
		opacity: 1;
		max-height: none;
		transform: none;
	}
}

/* Typewriter: a caret while typing, placed where the typed text ends
   (in front of the hidden rest). */
.ud-typewriter .is-typing .ud-tw-rest::before,
.ud-typewriter.is-typing .ud-tw-rest::before {
	visibility: visible;
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 1em;
	margin-left: 2px;
	margin-right: -0.5em;
	vertical-align: -0.12em;
	background: var(--ud-green);
	animation: ud-caret 0.8s steps(1) infinite;
}

@keyframes ud-caret {
	50% { opacity: 0; }
}

/* Scroll reveal text: unrevealed characters are muted. */
.ud-reveal.is-split .ud-word {
	white-space: nowrap;
}

.ud-reveal.is-split .ud-ch {
	color: var(--ud-reveal-muted, var(--ud-grey-400));
	transition: color 0.25s linear;
}

.ud-reveal.is-split .ud-ch.is-on {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Sticky column ("Why it's different").
   -------------------------------------------------------------------------- */

.ud-sticky {
	position: sticky !important;
	top: calc(var(--ud-header-h) + 32px);
	align-self: flex-start;
}

@media (max-width: 767px) {
	.ud-sticky {
		position: relative !important;
		top: 0;
	}
}

/* --------------------------------------------------------------------------
   Dot pattern (replaces Figma's 2,400-path halftone SVG with a CSS grid of
   dots: 22.8px pitch, ~1.8px dots). Colour per surface via --ud-dots-color.
   -------------------------------------------------------------------------- */

.ud-dots {
	--ud-dots-color: #87c742;
	background-image: radial-gradient(circle at center, var(--ud-dots-color) 0, var(--ud-dots-color) 1.6px, transparent 2.1px) !important;
	background-size: 22.8px 22.8px !important;
	background-position: center !important;
}

.ud-dots-grey {
	--ud-dots-color: #e6e6e6;
}

.ud-dots-slate {
	--ud-dots-color: #3a4855;
}

.ud-dots-soft {
	--ud-dots-color: #def0cb;
}

/* Decorative dot areas fade out towards the content. */
.ud-fade-right {
	-webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 95%);
	mask-image: linear-gradient(90deg, #000 30%, transparent 95%);
	pointer-events: none;
}

.ud-fade-radial {
	-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
	pointer-events: none;
}

/* Frosted glass panel (hero intro text). */
.ud-glass {
	background-color: rgba(255, 255, 255, 0.06) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

/* --------------------------------------------------------------------------
   Shared bits for plugin-rendered markup.
   -------------------------------------------------------------------------- */

.ud-icon {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.ud-icon svg {
	display: block;
}

.ud-tag {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 4px;
	background: var(--ud-white);
	color: var(--ud-navy);
	font: 500 10px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Partner logos marquee (Udenco Partner Logos widget).
   -------------------------------------------------------------------------- */

.ud-logos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.ud-logos__label {
	margin: 0;
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
	text-align: center;
}

.ud-logos--dark .ud-logos__label {
	color: var(--ud-grey-200);
}

.ud-logos__viewport {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ud-logos__track {
	display: flex;
	width: max-content;
	animation: ud-marquee var(--ud-logos-speed, 40s) linear infinite;
}

.ud-logos:hover .ud-logos__track {
	animation-play-state: paused;
}

.ud-logos__set {
	display: flex;
	align-items: center;
	gap: 92px;
	padding-right: 92px;
}

.ud-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 144px;
	height: 56px;
	opacity: 0.85;
	transition: opacity 0.3s var(--ud-ease);
}

.ud-logos__item:hover {
	opacity: 1;
}

.ud-logos__img {
	width: auto !important;
	/* !important: Elementor's img max-width: 100% would otherwise let wide logos fill the 144px item. */
	max-width: min(124px, 100%) !important;
	height: auto !important;
	max-height: 36px;
	object-fit: contain;
}

.ud-logos--dark .ud-logos__img {
	filter: brightness(0) invert(1);
	opacity: 0.8;
}

@keyframes ud-marquee {
	to { transform: translateX(-50%); }
}

@media (max-width: 767px) {
	.ud-logos__set {
		gap: 40px;
		padding-right: 40px;
	}

	.ud-logos__item {
		width: 112px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ud-logos__track {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Stats (Udenco Stats widget).
   -------------------------------------------------------------------------- */

.ud-stats {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	margin: 0;
}

.ud-stats__item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.ud-stats--row .ud-stats__item {
	flex: 0 1 188px;
}

.ud-stats--row .ud-stats__item:first-child {
	flex-basis: auto;
}

.ud-stats__number {
	margin: 0;
	color: var(--ud-navy);
	font: 600 var(--fs-h2, 48px)/1.1 var(--ud-font-head);
}

.ud-stats__label {
	margin: 0;
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-stats--light .ud-stats__number {
	color: var(--ud-white);
}

.ud-stats--light .ud-stats__label {
	color: var(--ud-grey-200);
}

.ud-stats--stack {
	flex-direction: column;
	gap: 8px;
}

.ud-stats--stack .ud-stats__item {
	flex-direction: row;
	align-items: baseline;
	gap: 16px;
}

.ud-stats--stack .ud-stats__number {
	min-width: 2.2em;
	font-size: var(--fs-h4, 32px);
}

@media (max-width: 767px) {
	.ud-stats--row {
		flex-direction: column;
		gap: 24px;
	}
}

/* --------------------------------------------------------------------------
   Pills (image tags) shared by post cards and the featured article.
   -------------------------------------------------------------------------- */

.ud-pill {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 16px;
	border-radius: 4px;
	background: var(--ud-white);
	color: var(--ud-navy);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Posts carousel (Udenco Posts Carousel widget).
   -------------------------------------------------------------------------- */

.ud-carousel {
	display: flex;
	align-items: center;
	gap: 56px;
}

.ud-carousel__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid var(--ud-grey-400) !important;
	border-radius: 64px;
	background: transparent !important;
	color: var(--ud-navy) !important;
	cursor: pointer;
	transition: background-color 0.3s var(--ud-ease), border-color 0.3s var(--ud-ease), opacity 0.3s var(--ud-ease);
}

.ud-carousel__nav:hover:not(:disabled) {
	background: var(--ud-navy) !important;
	border-color: var(--ud-navy) !important;
	color: var(--ud-white) !important;
}

.ud-carousel__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.ud-carousel__nav svg path {
	stroke: currentColor;
}

.ud-carousel__icon--prev {
	transform: scaleX(-1);
}

.ud-carousel.is-static .ud-carousel__nav {
	visibility: hidden;
}

.ud-carousel__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.ud-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.ud-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 64px) / 3);
	column-gap: 32px;
}

.ud-post-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	scroll-snap-align: start;
}

.ud-post-card__media {
	position: relative;
	display: block;
	height: 320px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--ud-grey-200);
}

.ud-post-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.1);
	transition: background-color 0.4s var(--ud-ease);
}

.ud-post-card:hover .ud-post-card__media::after {
	background: rgba(0, 0, 0, 0);
}

.ud-post-card__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.8s var(--ud-ease);
}

.ud-post-card:hover .ud-post-card__img {
	transform: scale(1.04);
}

.ud-post-card__tag {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 16px;
	border-radius: 4px;
	background: var(--ud-white);
	color: var(--ud-navy);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 16px;
}

.ud-post-card__title {
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid #dcdcdc;
	font: 500 var(--fs-h6, 20px)/1.1 var(--ud-font-head);
}

.ud-post-card__title a {
	color: var(--ud-navy);
	text-decoration: none;
}

.ud-post-card__title a:hover {
	color: var(--ud-green);
}

.ud-post-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ud-post-card__date {
	color: var(--ud-grey-600);
	font: 500 10px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-post-card__more,
.ud-feature__more {
	display: inline-flex;
	align-items: center;
	color: var(--ud-navy);
	font: 600 14px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.ud-post-card__more:hover,
.ud-feature__more:hover {
	color: var(--ud-green);
}

.ud-post-card__more svg path,
.ud-feature__more svg path {
	stroke: currentColor;
}

.ud-post-card__more .ud-icon,
.ud-feature__more .ud-icon {
	transition: transform 0.3s var(--ud-ease);
}

.ud-post-card__more:hover .ud-icon,
.ud-feature__more:hover .ud-icon {
	transform: translateX(3px);
}

@media (max-width: 1024px) {
	.ud-carousel {
		gap: 24px;
	}

	.ud-carousel__track {
		grid-auto-columns: calc((100% - 24px) / 2);
		column-gap: 24px;
	}
}

@media (max-width: 767px) {
	.ud-carousel .ud-carousel__nav {
		display: none;
	}

	.ud-carousel__track {
		grid-auto-columns: 85%;
		column-gap: 16px;
	}

	.ud-post-card__media {
		height: 240px;
	}

	.ud-post-card__body {
		padding: 0 8px;
	}
}

/* --------------------------------------------------------------------------
   Featured article (Udenco Featured Article widget).
   -------------------------------------------------------------------------- */

.ud-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 477px;
}

.ud-feature__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: var(--ud-grey-200);
}

.ud-feature__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 54% 48%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%);
}

.ud-feature__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.8s var(--ud-ease);
}

.ud-feature:hover .ud-feature__img {
	transform: scale(1.03);
}

.ud-feature__tags {
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ud-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding: 40px;
	border-radius: 12px;
	background: var(--ud-white);
}

.ud-feature__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ud-feature__title {
	margin: 0;
	font: 500 var(--fs-h5, 24px)/1.4 var(--ud-font-head);
}

.ud-feature__title a {
	color: var(--ud-navy);
	text-decoration: none;
}

.ud-feature__excerpt {
	max-width: 502px;
	margin: 0;
	color: var(--ud-navy);
	font: 300 var(--fs-body-md, 16px)/1.6 var(--ud-font-body);
}

.ud-feature__numbers {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.ud-feature__number {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 20px;
	border-radius: 8px;
	background: rgba(21, 29, 38, 0.02);
}

.ud-feature__number dt {
	margin: 0;
	color: var(--ud-navy);
	font-family: var(--ud-font-head);
	font-weight: 600;
	white-space: nowrap;
}

.ud-feature__value {
	font-size: var(--fs-h3, 40px);
	line-height: 1;
}

.ud-feature__unit {
	font-size: var(--fs-h5, 24px);
	font-weight: 500;
}

.ud-feature__number dd {
	margin: 0;
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
	text-align: right;
}

@media (max-width: 1024px) {
	.ud-feature {
		grid-template-columns: 1fr;
	}

	.ud-feature__media {
		min-height: 320px;
	}

	.ud-feature__tags {
		top: 24px;
		left: 24px;
	}
}

@media (max-width: 767px) {
	.ud-feature__body {
		padding: 24px;
	}

	.ud-feature__media {
		min-height: 240px;
	}

	.ud-feature__number {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 16px;
	}

	.ud-feature__number dd {
		text-align: left;
	}
}

/* Hello Elementor's reset styles every <button> (pink border/text, pink
   hover). Plugin-rendered buttons opt out. */
.ud-filter__toggle,
.ud-filter__clear,
.ud-carousel__nav {
	border-style: solid;
	box-shadow: none !important;
	text-decoration: none;
}

.ud-filter__toggle,
.ud-filter__toggle:hover,
.ud-filter__toggle:focus {
	border: 0 !important;
	color: var(--ud-navy) !important;
}

.ud-filter__toggle:focus,
.ud-filter__toggle:hover {
	background: #dadada !important;
}

.ud-filter.has-selection .ud-filter__toggle {
	background: var(--ud-green-soft) !important;
}

.ud-filter__clear,
.ud-filter__clear:hover,
.ud-filter__clear:focus {
	border-width: 1px 0 0 !important;
	border-color: var(--ud-grey-200) !important;
	background: none !important;
}

.ud-filter__clear:hover,
.ud-filter__clear:focus {
	color: var(--ud-navy) !important;
}

.ud-filter__toggle:focus-visible,
.ud-filter__clear:focus-visible,
.ud-carousel__nav:focus-visible {
	outline: 2px solid var(--ud-green);
	outline-offset: 2px;
}

/* Higher specificity than Hello's button reset ([type=button], button). */
:is(.ud-products, .ud-listing) .ud-filter__toggle {
	height: 40px;
	padding: 0 16px;
	border-radius: 100px;
	background: var(--ud-grey-200);
	font: 600 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

:is(.ud-products, .ud-listing) .ud-filter__clear {
	padding: 0 16px 4px;
	border-radius: 0 0 12px 12px;
	color: var(--ud-grey-400);
	font: 600 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-carousel .ud-carousel__nav {
	padding: 0;
	border-radius: 64px;
}

/* --------------------------------------------------------------------------
   Product grid + filters (Udenco Products widget).
   -------------------------------------------------------------------------- */

.ud-products__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 40px;
}

.ud-products__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ud-products__count {
	margin: 0;
	color: var(--ud-grey-600);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ud-filter {
	position: relative;
}

.ud-filter__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 100px;
	background: var(--ud-grey-200);
	color: var(--ud-navy);
	font: 600 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s var(--ud-ease);
}

.ud-filter__toggle:hover,
.ud-filter.is-open .ud-filter__toggle {
	background: #dadada;
}

.ud-filter.has-selection .ud-filter__toggle {
	background: var(--ud-green-soft);
}

.ud-filter__chevron {
	transition: transform 0.25s var(--ud-ease);
}

.ud-filter.is-open .ud-filter__chevron {
	transform: rotate(180deg);
}

.ud-filter__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	min-width: 196px;
	padding: 4px 0 0;
	border-radius: 12px;
	background: var(--ud-white);
	filter: drop-shadow(0 4px 58px rgba(0, 0, 0, 0.15));
	animation: ud-panel-in 0.22s var(--ud-ease);
}

.ud-filter__panel[hidden] {
	display: none;
}

@keyframes ud-panel-in {
	from { opacity: 0; transform: translateY(-6px); }
}

.ud-filter__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	color: var(--ud-grey-600);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.ud-filter__option:hover {
	color: var(--ud-navy);
}

.ud-filter__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ud-filter__box--on,
.ud-filter__input:checked ~ .ud-filter__box--off {
	display: none;
}

.ud-filter__input:checked ~ .ud-filter__box--on {
	display: inline-flex;
}

.ud-filter__input:checked ~ .ud-filter__name {
	color: var(--ud-navy);
	font-weight: 600;
}

.ud-filter__input:focus-visible ~ .ud-filter__name {
	outline: 2px solid var(--ud-green);
	outline-offset: 2px;
}

.ud-filter__clear {
	display: block;
	width: 100%;
	height: 44px;
	margin-top: 4px;
	padding: 0 16px 4px;
	border: 0;
	border-top: 1px solid var(--ud-grey-200);
	background: none;
	color: var(--ud-grey-400);
	font: 600 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-align: left;
	text-decoration: underline;
	text-transform: uppercase;
	cursor: pointer;
}

.ud-filter__clear:hover {
	color: var(--ud-navy);
}

.ud-products__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	transition: opacity 0.2s var(--ud-ease);
}

.ud-products.is-loading .ud-products__grid {
	opacity: 0.45;
}

.ud-products__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 48px 0;
	color: var(--ud-grey-600);
	font: 300 16px/1.6 var(--ud-font-body);
}

.ud-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 488px;
	padding: 32px 32px 0;
	overflow: hidden;
	border-radius: 12px;
	background: var(--ud-grey-100);
	color: var(--ud-navy);
	text-decoration: none;
	transition: background-color 0.3s var(--ud-ease), box-shadow 0.3s var(--ud-ease);
}

.ud-product-card:hover {
	background: #efefef;
	box-shadow: 0 12px 40px rgba(21, 29, 38, 0.06);
}

.ud-product-card__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ud-product-card__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ud-product-card__title {
	font: 500 24px/1.4 var(--ud-font-head);
}

.ud-product-card__head > .ud-product-card__title-row + .ud-product-card__tags {
	margin-top: -12px;
}

.ud-product-card__arrow svg path {
	transition: stroke 0.3s var(--ud-ease);
}

.ud-product-card__arrow {
	transition: transform 0.3s var(--ud-ease);
}

.ud-product-card:hover .ud-product-card__arrow {
	transform: translate(2px, -2px);
}

.ud-product-card:hover .ud-product-card__arrow svg path {
	stroke: var(--ud-green);
}

.ud-product-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ud-product-card__text {
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-product-card__media {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: 240px;
	margin-top: 16px;
	margin-bottom: 32px;
}

.ud-product-card__img {
	width: auto !important;
	max-width: 100%;
	height: 100% !important;
	object-fit: contain;
	object-position: center bottom;
	transition: transform 0.6s var(--ud-ease);
}

.ud-product-card:hover .ud-product-card__img {
	transform: translateY(-6px);
}

@media (max-width: 1024px) {
	.ud-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ud-products__bar {
		flex-direction: column;
		align-items: stretch;
		margin-bottom: 24px;
	}

	.ud-products__filters {
		flex-direction: column;
	}

	.ud-filter__toggle {
		width: 100%;
		justify-content: space-between;
	}

	.ud-filter__panel {
		right: 0;
	}

	.ud-products__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ud-product-card {
		min-height: 420px;
		padding: 24px 24px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ud-header,
	.ud-header [class*="ud-mega-"],
	.ud-mobile-menu,
	.ud-mobile-menu [class*="ud-msub-"],
	.ud-expand-card,
	.ud-expand-card .ud-expand-detail,
	.ud-product-card__img {
		transition: none !important;
	}
}

/* ==========================================================================
   Single product page (Udenco Product Section widget).
   ========================================================================== */

/* Arrow button rendered by the plugin (same look as the Elementor component). */
.ud-arrow-btn,
button.ud-arrow-btn {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-decoration: none;
}

.ud-arrow-btn__circle,
.ud-arrow-btn__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	border-radius: 64px;
	background: var(--ud-green);
	color: var(--ud-white);
	transition: background-color 0.3s var(--ud-ease);
}

.ud-arrow-btn__circle {
	width: 56px;
}

.ud-arrow-btn__label {
	padding: 0 20px;
	font: 600 14px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ud-arrow-btn:hover .ud-arrow-btn__circle,
.ud-arrow-btn:hover .ud-arrow-btn__label {
	background: #6aa62c;
}

.ud-arrow-btn .ud-icon {
	transition: transform 0.3s var(--ud-ease);
}

.ud-arrow-btn:hover .ud-icon {
	transform: translateX(3px);
}

/* Hello's reset paints focused/hovered <button>s pink — not ours. */
button.ud-arrow-btn,
button.ud-arrow-btn:hover,
button.ud-arrow-btn:focus,
button.ud-arrow-btn:active {
	width: auto;
	align-self: flex-start;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--ud-white);
}

.ud-arrow-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

.ud-arrow-btn:focus-visible {
	outline: 2px solid var(--ud-green);
	outline-offset: 3px;
	border-radius: 64px;
}

/* Spec tabs ------------------------------------------------------------- */

.ud-specs {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ud-specs__tabs {
	display: flex;
	gap: 8px;
}

.ud-specs .ud-specs__tab {
	flex: 1 1 0;
	height: 48px;
	padding: 0 12px;
	border: 1px solid var(--ud-grey-200);
	border-radius: 8px 8px 0 0;
	background: transparent;
	color: var(--ud-grey-400);
	font: 500 10px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s var(--ud-ease), color 0.25s var(--ud-ease);
}

.ud-specs .ud-specs__tab:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--ud-white);
}

.ud-specs .ud-specs__tab.is-active {
	border-color: var(--ud-white);
	background: var(--ud-white);
	color: var(--ud-navy);
}

.ud-specs .ud-specs__tab:focus-visible {
	outline: 2px solid var(--ud-green);
	outline-offset: 2px;
}

.ud-specs__panel.is-active {
	animation: ud-panel-in 0.3s var(--ud-ease);
}

.ud-spec-list {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.ud-spec {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: -1px;
	padding: 20px;
	border: 1px solid var(--ud-slate-2);
	border-radius: 12px;
}

.ud-spec__label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 224px;
	margin: 0;
	color: var(--ud-grey-400);
	font: 500 12px/1.3 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-spec__value {
	flex: 1 1 auto;
	margin: 0;
	color: var(--ud-white);
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-spec__value br {
	display: block;
	content: "";
	margin-top: 8px;
}

/* Documents -------------------------------------------------------------- */

.ud-docs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ud-docs__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
	border-bottom: 1px solid var(--ud-slate-2);
	color: var(--ud-white);
	text-decoration: none;
	transition: background-color 0.25s var(--ud-ease);
}

.ud-docs__link:hover {
	background: rgba(255, 255, 255, 0.04);
}

.ud-docs__name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font: 300 16px/1.6 var(--ud-font-body);
}

.ud-docs__name span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ud-docs__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	color: var(--ud-grey-400);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.25s var(--ud-ease);
}

.ud-docs__link:hover .ud-docs__action {
	color: var(--ud-green);
}

.ud-docs__link:hover .ud-docs__action svg path {
	stroke: var(--ud-green);
}

.ud-docs__empty {
	margin: 0;
	padding: 20px;
	color: var(--ud-grey-400);
	font: 300 14px/1.5 var(--ud-font-body);
}

/* Datasheet row is a button: Hello paints those pink on hover/focus. */
.ud-specs button.ud-docs__link,
.ud-specs button.ud-docs__link:is(:hover, :focus) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px;
	border: 0;
	border-bottom: 1px solid var(--ud-slate-2);
	border-radius: 0;
	color: var(--ud-white);
	cursor: pointer;
	text-align: left;
}

.ud-specs button.ud-docs__link {
	background: none;
}

.ud-specs button.ud-docs__link:is(:hover, :focus) {
	background: rgba(255, 255, 255, 0.04);
}

.ud-docs__link:is(button:hover, button:focus-visible) .ud-docs__action {
	color: var(--ud-green);
}

.ud-docs__link:is(button:hover, button:focus-visible) .ud-docs__action svg path {
	stroke: var(--ud-green);
}

.ud-docs__link.is-locked {
	color: var(--ud-grey-400);
}

.ud-docs__link.is-locked:hover {
	background: none;
}

/* Inside the (white) modal the document list is dark-on-light. */
.ud-modal .ud-docs__link {
	border-color: var(--ud-grey-200);
	color: var(--ud-navy);
	padding: 16px 0;
}

/* Datasheet popup */
.ud-modal__view {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.ud-modal__view[hidden] {
	display: none;
}

.ud-modal__view .ud-modal__head,
.ud-modal__view .ud-form {
	width: 100%;
}

.ud-modal__text {
	margin: 0;
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-modal--datasheet .ud-field__input::placeholder {
	color: var(--ud-grey-400);
	opacity: 1;
}

.ud-modal__success {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ud-green);
}

.ud-modal__success svg {
	width: 24px;
	height: 24px;
}

.ud-modal__success svg path {
	stroke: var(--ud-white);
}

.ud-modal button.ud-modal__btn,
.ud-modal button.ud-modal__btn:is(:hover, :focus) {
	height: 56px;
	padding: 0 24px;
	border: 1px solid var(--ud-grey-400);
	border-radius: 64px;
	background: none;
	color: var(--ud-navy);
	font: 600 14px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.ud-modal button.ud-modal__btn:hover {
	border-color: var(--ud-navy);
	background: var(--ud-navy);
	color: var(--ud-white);
}

/* NDA box ---------------------------------------------------------------- */

.ud-nda {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 32px 48px;
	border-radius: 12px;
	background: var(--ud-navy);
}

/* The shared button style pins buttons to the top (align-self: flex-start). */
@media (min-width: 768px) {
	.ud-nda > .ud-arrow-btn,
	.ud-nda > button {
		align-self: center !important;
		flex-shrink: 0;
	}
}

.ud-nda__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ud-nda__title {
	margin: 0;
	color: var(--ud-white);
	font: 500 var(--fs-h4, 32px)/1.4 var(--ud-font-head);
}

.ud-nda__desc {
	margin: 0;
	color: var(--ud-white);
	font: 300 var(--fs-body-md, 16px)/1.6 var(--ud-font-body);
}

/* Configurator CTA banner (product page) ---------------------------------- */

.ud-config {
	position: relative;
	display: flex;
	min-height: 452px;
	overflow: hidden;
	border-radius: 12px;
	background:
		radial-gradient(circle 200px at 70px calc(100% + 60px), rgba(121, 184, 52, 0.18), rgba(121, 184, 52, 0)),
		var(--ud-grey-200);
}

/* Dot grid fading in towards the right (Figma "Deco / dots"). */
.ud-config::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle, rgba(21, 29, 38, 0.22) 1.2px, transparent 1.3px) 0 0 / 19.82px 19.82px;
	-webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.9));
	mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.9));
	pointer-events: none;
}

.ud-config__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	max-width: 864px;
	padding: 56px;
}

.ud-config__label {
	margin: 0;
	color: var(--ud-green);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-config__title {
	margin: 0;
	color: var(--ud-navy);
	font: 600 var(--fs-h3, 40px)/1.1 var(--ud-font-head);
}

.ud-config__desc {
	max-width: 600px;
	margin: 0;
	color: var(--ud-grey-600);
	font: 300 16px/1.6 var(--ud-font-body);
}

.ud-config__usps {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ud-config__usps li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ud-navy);
	font: 500 10px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-config__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ud-green);
}

.ud-config .ud-arrow-btn {
	margin-top: 12px;
}

/* Product render: top-aligned and taller than the banner, so its base is cropped. */
.ud-config__media {
	position: relative;
	z-index: 1;
	flex: 0 0 360px;
	margin-right: 56px;
}

.ud-config .ud-config__img {
	position: absolute;
	top: 24px;
	left: 50%;
	width: auto;
	max-width: 440px;
	height: auto;
	max-height: 584px;
	transform: translateX(-50%);
}

/* Wide cabinets fit the column and sit centred instead of being cropped. */
.ud-config .ud-config__media--wide .ud-config__img {
	top: 50%;
	transform: translate(-50%, -50%);
}

@media (max-width: 1024px) {
	.ud-config__media {
		flex-basis: 240px;
		margin-right: 32px;
	}

	.ud-config .ud-config__img {
		max-width: 280px;
		max-height: 480px;
	}
}

@media (max-width: 767px) {
	.ud-config {
		flex-direction: column;
		min-height: 0;
	}

	.ud-config__text {
		padding: 32px 24px 0;
	}

	.ud-config__title {
		font-size: var(--fs-h4, 28px);
	}

	.ud-config__media {
		flex: 0 0 280px;
		margin: 0;
	}

	.ud-config .ud-config__img {
		max-width: calc(100% - 48px);
		max-height: 420px;
	}
}

/* Product configurator --------------------------------------------------- */

.ud-cfg {
	--ud-green-soft: #def0cb;
	color: var(--ud-navy);
}

.ud-cfg [hidden] {
	display: none !important;
}

.ud-cfg :is(h1, h2, h3, p, ol) {
	margin: 0;
}

/* Hello's reset paints buttons pink on hover/focus; each button sets these instead. */
.ud-cfg button:not(.ud-arrow-btn),
.ud-cfg button:not(.ud-arrow-btn):is(:hover, :focus) {
	padding: 0;
	border-color: var(--cfg-line, transparent);
	background: var(--cfg-bg, transparent);
	color: var(--cfg-fg, inherit);
}

.ud-cfg .ud-arrow-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.ud-cfg__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-block: 80px 48px;
}

.ud-cfg__label,
.ud-cfg-side__label {
	color: var(--ud-green);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-cfg__title {
	font: 600 var(--fs-h2, 48px)/1.1 var(--ud-font-head);
}

.ud-cfg__lead {
	max-width: 640px;
	color: var(--ud-grey-600);
	font: 300 16px/1.6 var(--ud-font-body);
}

.ud-cfg-h4 {
	font: 500 var(--fs-h4, 32px)/1.4 var(--ud-font-head);
}

.ud-cfg-h5 {
	font: 500 var(--fs-h5, 24px)/1.4 var(--ud-font-head);
}

.ud-cfg-small {
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-cfg-tiny {
	color: var(--ud-grey-600);
	font: 500 10px/1.3 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-cfg-tiny--grey {
	color: var(--ud-grey-400);
}

/* Stepper */
.ud-cfg-stepper {
	display: flex;
	gap: 8px;
	padding: 0 0 40px;
	list-style: none;
}

.ud-cfg-stepper__item {
	flex: 1 1 0;
	min-width: 0;
}

.ud-cfg-stepper__item::before {
	content: "";
	display: block;
	height: 4px;
	margin-bottom: 12px;
	border-radius: 4px;
	background: var(--ud-grey-200);
}

.ud-cfg-stepper__item:is(.is-done, .is-current)::before {
	background: var(--ud-green);
}

.ud-cfg .ud-cfg-stepper button {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 0;
	white-space: nowrap;
	cursor: pointer;
	--cfg-fg: var(--ud-grey-400);
}

.ud-cfg .ud-cfg-stepper button:disabled {
	cursor: default;
}

.ud-cfg-stepper :is(.is-done, .is-current) button {
	--cfg-fg: var(--ud-navy);
}

.ud-cfg-stepper__label {
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-cfg-stepper__num {
	font: 500 10px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
}

.is-current .ud-cfg-stepper__num {
	color: var(--ud-green);
}

.ud-cfg-stepper__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ud-green);
	color: var(--ud-navy);
}

/* Layout */
.ud-cfg__body {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding-bottom: 120px;
}

.ud-cfg__card {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	padding: 40px;
	border-radius: 16px;
	background: var(--ud-white);
}

.ud-cfg__card.is-summary {
	gap: 40px;
}

.ud-cfg__head,
.ud-cfg__step {
	display: flex;
	flex-direction: column;
}

.ud-cfg__head {
	gap: 8px;
}

.ud-cfg__step {
	gap: 32px;
}

.ud-cfg__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--ud-grey-200);
}

.ud-cfg__actions--end {
	justify-content: flex-end;
}

.ud-cfg__buttons {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ud-cfg .ud-cfg-btn {
	height: 56px;
	padding: 0 24px !important;
	border: 1px solid;
	border-radius: 64px;
	font: 600 14px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.3s var(--ud-ease), color 0.3s var(--ud-ease);
	--cfg-line: var(--ud-grey-400);
	--cfg-fg: var(--ud-navy);
}

.ud-cfg .ud-cfg-btn:hover {
	--cfg-bg: var(--ud-navy);
	--cfg-line: var(--ud-navy);
	--cfg-fg: var(--ud-white);
}

.ud-cfg .ud-cfg-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	--cfg-fg: var(--ud-navy);
}

.ud-cfg .ud-cfg-link svg {
	transition: transform 0.3s var(--ud-ease);
}

.ud-cfg .ud-cfg-link:hover {
	--cfg-fg: var(--ud-green);
}

.ud-cfg .ud-cfg-link:hover svg {
	transform: translateX(3px);
}

.ud-cfg .ud-cfg-link--green {
	--cfg-fg: var(--ud-green);
}

.ud-cfg .ud-cfg-link--back .ud-icon {
	display: inline-flex;
}

/* Pills */
.ud-cfg-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ud-cfg-pill {
	display: inline-flex;
	flex: none;
	padding: 6px 10px;
	border-radius: 100px;
	background: var(--ud-grey-100);
	color: var(--ud-navy);
	font: 500 10px/1.3 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ud-cfg-pill--green {
	background: var(--ud-green-soft);
}

.ud-cfg-pill--solid {
	background: var(--ud-green);
}

.ud-cfg-pill--white {
	background: var(--ud-white);
}

/* Step 1: products */
.ud-cfg-products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.ud-cfg .ud-cfg-product {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
	padding: 16px !important;
	border: 1px solid;
	border-radius: 12px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s var(--ud-ease), box-shadow 0.2s var(--ud-ease);
	--cfg-line: var(--ud-grey-200);
	--cfg-bg: var(--ud-white);
	--cfg-fg: var(--ud-navy);
}

.ud-cfg .ud-cfg-product:hover {
	--cfg-line: var(--ud-grey-400);
}

.ud-cfg .ud-cfg-product.is-on,
.ud-cfg .ud-cfg-tile.is-on {
	box-shadow: inset 0 0 0 1px var(--ud-green);
	--cfg-line: var(--ud-green);
}

.ud-cfg-product__media {
	position: relative;
	display: block;
	width: 100%;
	height: 170px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ud-grey-100);
}

.ud-cfg .ud-cfg-product__media img {
	width: 100% !important;
	height: 100% !important;
	padding: 8px;
	object-fit: contain;
	box-sizing: border-box;
}

.ud-cfg-product__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ud-green);
	color: var(--ud-navy);
}

.ud-cfg-product__name,
.ud-cfg-other__title {
	font: 500 var(--fs-h5, 24px)/1.4 var(--ud-font-head);
	white-space: nowrap;
}

.ud-cfg-other {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	min-width: 0;
	padding: 20px;
	border: 1px dashed var(--ud-grey-400);
	border-radius: 12px;
}

/* Option tiles */
.ud-cfg-field {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ud-cfg-field__label {
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-cfg-tiles {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ud-cfg-tiles--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ud-cfg .ud-cfg-tile {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 16px !important;
	border: 1px solid;
	border-radius: 10px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s var(--ud-ease);
	--cfg-line: var(--ud-grey-200);
	--cfg-bg: var(--ud-white);
	--cfg-fg: var(--ud-navy);
}

.ud-cfg .ud-cfg-tile:hover {
	--cfg-line: var(--ud-grey-400);
}

.ud-cfg .ud-cfg-tile.is-on:hover {
	--cfg-line: var(--ud-green);
}

.ud-cfg-tile__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ud-cfg-tile__mark {
	position: relative;
	flex: 0 0 18px;
	height: 18px;
	border: 1.5px solid var(--ud-grey-400);
	border-radius: 50%;
	box-sizing: border-box;
}

.ud-cfg .ud-cfg-tile.is-on .ud-cfg-tile__mark {
	border-color: var(--ud-green);
}

.ud-cfg .ud-cfg-tile.is-on .ud-cfg-tile__mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--ud-green);
}

.ud-cfg .ud-cfg-tile.is-multi .ud-cfg-tile__mark,
.ud-cfg .ud-cfg-tile.is-multi .ud-cfg-tile__mark::after {
	border-radius: 3px;
}

.ud-cfg-tile__label {
	flex: 1 1 0;
	min-width: 0;
	font: 400 14px/1.5 var(--ud-font-body);
}

.ud-cfg-tile__note {
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-cfg .ud-cfg-tile.is-request {
	--cfg-bg: var(--ud-grey-100);
}

.ud-cfg .ud-cfg-tile.is-request .ud-cfg-tile__label {
	opacity: 0.4;
}

.ud-cfg .ud-cfg-tile.is-request .ud-cfg-tile__note {
	opacity: 0.5;
}

.ud-cfg .ud-cfg-tile.is-request:hover .ud-cfg-tile__note {
	opacity: 1;
}

.ud-cfg-hint {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-radius: 10px;
	background: var(--ud-green-soft);
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-cfg-hint svg {
	flex: none;
}

.ud-cfg-counts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ud-cfg .ud-cfg-count {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 88px;
	height: 64px;
	border: 1px solid;
	border-radius: 10px;
	cursor: pointer;
	--cfg-line: var(--ud-grey-200);
	--cfg-bg: var(--ud-white);
	--cfg-fg: var(--ud-navy);
}

.ud-cfg .ud-cfg-count span {
	font: 500 var(--fs-h5, 24px)/1.4 var(--ud-font-head);
}

.ud-cfg .ud-cfg-count small {
	color: var(--ud-grey-400);
	font: 500 10px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ud-cfg .ud-cfg-count.is-on {
	--cfg-line: var(--ud-navy);
	--cfg-bg: var(--ud-navy);
	--cfg-fg: var(--ud-white);
}

.ud-cfg .ud-cfg-count.is-locked {
	cursor: not-allowed;
	--cfg-bg: var(--ud-grey-100);
	--cfg-fg: rgba(21, 29, 38, 0.3);
}

.ud-cfg-box {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px;
	border: 1px solid var(--ud-grey-200);
	border-radius: 12px;
}

.ud-cfg-box__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Summary rows */
.ud-cfg-rows {
	border: 1px solid var(--ud-grey-200);
	border-radius: 12px;
}

.ud-cfg-row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 18px 24px;
}

.ud-cfg-row + .ud-cfg-row {
	border-top: 1px solid var(--ud-grey-200);
}

.ud-cfg-row__label {
	flex: 0 0 130px;
	color: var(--ud-green);
	font: 500 12px/1.3 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-cfg-row__value {
	flex: 1 1 0;
	min-width: 0;
	font: 400 14px/1.5 var(--ud-font-body);
}

.ud-cfg .ud-cfg-row__edit {
	border: 0;
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	--cfg-fg: var(--ud-grey-600);
}

.ud-cfg .ud-cfg-row__edit:hover {
	--cfg-fg: var(--ud-green);
}

/* Forms */
.ud-form.ud-cfg-form {
	gap: 20px;
}

.ud-cfg-form__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ud-cfg-form__head--row {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ud-cfg-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
}

.ud-cfg .ud-field__input::placeholder {
	color: var(--ud-grey-400);
	opacity: 1;
}

.ud-cfg textarea.ud-field__input {
	min-height: 64px;
}

.ud-cfg .ud-field--select {
	position: relative;
	cursor: pointer;
}

.ud-cfg .ud-field--select .ud-field__input {
	padding-right: 28px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.ud-cfg .ud-field--select .ud-field__input:has(option[value=""]:checked) {
	color: var(--ud-grey-400);
}

.ud-cfg .ud-field--select::after {
	content: "";
	position: absolute;
	top: 26px;
	right: 20px;
	width: 8px;
	height: 8px;
	border: solid var(--ud-navy);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	pointer-events: none;
}

.ud-cfg-consents {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ud-cfg .ud-form__error {
	margin: 0;
}

/* Dark side card */
.ud-cfg-side {
	display: flex;
	flex: 0 0 424px;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	padding: 32px;
	border-radius: 16px;
	background: var(--ud-navy);
	color: var(--ud-white);
}

.ud-cfg-side__image {
	height: 220px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
}

.ud-cfg-side__image.is-large {
	height: 300px;
}

.ud-cfg .ud-cfg-side__image img {
	width: 100% !important;
	height: 100% !important;
	padding: 12px;
	object-fit: contain;
	box-sizing: border-box;
}

.ud-cfg-side__name {
	font: 500 var(--fs-h5, 24px)/1.4 var(--ud-font-head);
}

.ud-cfg-side__big {
	font: 500 var(--fs-h4, 32px)/1.4 var(--ud-font-head);
}

.ud-cfg-side__result {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ud-cfg-side__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ud-cfg-side__row > span:first-child {
	flex: 0 0 100px;
	color: var(--ud-green);
	font: 500 10px/1.3 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-cfg-side__value {
	flex: 1 1 0;
	min-width: 0;
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-cfg-side__value.is-empty {
	color: rgba(255, 255, 255, 0.35);
}

.ud-cfg-side__row .ud-cfg-pill {
	color: var(--ud-navy);
}

.ud-cfg-code {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
}

.ud-cfg-code--large {
	gap: 8px;
	padding: 20px;
}

.ud-cfg-code span,
.ud-cfg-code__top button {
	font: 500 10px/1.3 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-cfg-code span {
	color: rgba(255, 255, 255, 0.6);
}

.ud-cfg-code__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ud-cfg .ud-cfg-code__top button {
	border: 0;
	cursor: pointer;
	--cfg-fg: var(--ud-green);
}

.ud-cfg-code strong {
	font: 500 var(--fs-h5, 24px)/1.4 var(--ud-font-head);
	overflow-wrap: anywhere;
}

.ud-cfg-side__note {
	color: rgba(255, 255, 255, 0.6);
	font: 300 14px/1.5 var(--ud-font-body);
}

/* Non-standard request */
.ud-cfg__intro--request {
	padding-bottom: 40px;
}

.ud-cfg__intro--request .ud-cfg__label {
	margin-top: 0;
}

.ud-cfg-notice {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px;
	border-radius: 12px;
	background: var(--ud-navy);
	color: var(--ud-white);
	font: 300 16px/1.6 var(--ud-font-body);
}

.ud-cfg-notice__icon {
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-radius: 50%;
	background: var(--ud-green);
}

.ud-cfg-notice__icon svg {
	width: 20px;
	height: 20px;
}

.ud-cfg-side--next {
	gap: 28px;
}

.ud-cfg-next {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ud-cfg-next__num {
	color: var(--ud-green);
	font: 500 10px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
}

.ud-cfg-next__title {
	font: 500 var(--fs-h5, 24px)/1.4 var(--ud-font-head);
}

.ud-cfg-next__text {
	color: rgba(255, 255, 255, 0.6);
	font: 300 14px/1.5 var(--ud-font-body);
}

/* Sent */
.ud-cfg-sent {
	padding-block: 120px 160px;
}

.ud-cfg-sent__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 712px;
	margin-inline: auto;
	padding: 56px;
	border-radius: 16px;
	background: var(--ud-white);
	text-align: center;
}

.ud-cfg-sent__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--ud-green);
}

.ud-cfg-sent__icon svg {
	width: 32px;
	height: 32px;
}

.ud-cfg-sent__icon svg path {
	stroke: var(--ud-white);
}

.ud-cfg-sent__title {
	outline: none;
	font: 600 var(--fs-h3, 40px)/1.1 var(--ud-font-head);
}

.ud-cfg-sent__text {
	max-width: 520px;
	color: var(--ud-grey-600);
	font: 300 16px/1.6 var(--ud-font-body);
}

.ud-cfg-sent__code {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	padding: 20px;
	border-radius: 10px;
	background: var(--ud-grey-100);
	box-sizing: border-box;
}

.ud-cfg-sent__code span {
	color: var(--ud-grey-600);
	font: 500 10px/1.3 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-cfg-sent__code strong {
	font: 500 var(--fs-h5, 24px)/1.4 var(--ud-font-head);
	overflow-wrap: anywhere;
}

.ud-cfg-sent__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

@media (max-width: 1200px) {
	.ud-cfg__body {
		flex-direction: column;
		align-items: stretch;
	}

	.ud-cfg__card {
		flex: none;
	}

	.ud-cfg-side {
		flex: none;
	}
}

@media (max-width: 1024px) {
	.ud-cfg-stepper__item:not(.is-current) :is(.ud-cfg-stepper__label, .ud-cfg-stepper__num, .ud-cfg-stepper__check) {
		display: none;
	}

	.ud-cfg .ud-cfg-stepper button {
		overflow: visible;
	}
}

@media (max-width: 767px) {
	.ud-cfg__intro {
		padding-block: 48px 32px;
	}

	.ud-cfg__title {
		font-size: var(--fs-h3, 36px);
	}

	.ud-cfg__card,
	.ud-cfg-side {
		padding: 24px;
	}

	.ud-cfg__body {
		padding-bottom: 64px;
	}

	.ud-cfg-products,
	.ud-cfg-tiles--grid,
	.ud-cfg-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ud-cfg-tiles {
		flex-direction: column;
		align-items: stretch;
	}

	.ud-cfg .ud-cfg-tile {
		flex: none;
	}

	.ud-cfg-box {
		padding: 16px;
	}

	.ud-cfg-box__head,
	.ud-cfg-form__head--row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.ud-cfg .ud-cfg-count {
		flex: 1 1 calc(33% - 8px);
		width: auto;
	}

	.ud-cfg__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.ud-cfg__buttons {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.ud-cfg__buttons .ud-arrow-btn {
		align-self: flex-start;
	}

	.ud-cfg__buttons .ud-arrow-btn__label {
		padding-inline: 16px;
		font-size: 13px;
	}

	.ud-cfg-row {
		flex-wrap: wrap;
		gap: 4px 12px;
		padding: 14px 16px;
	}

	.ud-cfg-row__label {
		flex: 1 1 100%;
	}

	.ud-cfg-sent {
		padding-block: 64px 80px;
	}

	.ud-cfg-sent__card {
		padding: 32px 24px;
	}

	.ud-cfg-sent__title {
		font-size: var(--fs-h4, 28px);
	}
}

/* Downloads page and partner area (builds on the .ud-cfg blocks above) ---- */

.ud-dl .ud-cfg__body > .ud-dl-side {
	flex-basis: 456px;
}

.ud-dl-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.ud-dl-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 12px;
}

.ud-dl .ud-dl-filter {
	padding: 6px 10px !important;
	border: 0;
	border-radius: 100px;
	font: 500 10px/1.3 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	--cfg-bg: var(--ud-grey-100);
	--cfg-fg: var(--ud-grey-600);
}

.ud-dl .ud-dl-filter.is-on {
	--cfg-bg: var(--ud-navy);
	--cfg-fg: var(--ud-white);
}

.ud-dl-list,
.ud-dl-table,
.ud-dl-included {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ud-dl-list {
	border-top: 1px solid var(--ud-grey-200);
}

.ud-dl-row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 17px 0;
	border-bottom: 1px solid var(--ud-grey-200);
}

.ud-dl-thumb {
	display: block;
	flex: 0 0 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ud-grey-100);
}

.ud-dl-thumb--large {
	flex-basis: 72px;
	height: 72px;
}

.ud-dl .ud-dl-thumb img {
	width: 100% !important;
	height: 100% !important;
	padding: 4px;
	object-fit: contain;
	box-sizing: border-box;
}

.ud-dl-row__name {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ud-dl-row__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.ud-dl-locked {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ud-grey-600);
	font: 500 10px/1.3 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ud-dl-locked svg {
	width: 16px;
	height: 16px;
}

.ud-dl-side__label {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ud-dl-side__label svg {
	display: block;
	width: 20px;
	height: 20px;
}

.ud-dl-side__label svg path {
	stroke: var(--ud-green);
}

.ud-dl-side__text {
	color: rgba(255, 255, 255, 0.7);
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-dl-included {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ud-dl-included li {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-form.ud-dl-login {
	gap: 12px;
	padding: 24px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
}

.ud-dl-login .ud-field__input::placeholder {
	color: var(--ud-grey-400);
	opacity: 1;
}

.ud-dl-login .ud-form__error {
	color: #ff9a8b;
}

.ud-dl-login__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 8px;
}

.ud-dl-login__forgot {
	color: rgba(255, 255, 255, 0.7);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.ud-dl-login__forgot:hover {
	color: var(--ud-white);
}

.ud-dl-login .ud-arrow-btn__circle,
.ud-dl-login .ud-arrow-btn__label,
.ud-dl-login .ud-arrow-btn:hover .ud-arrow-btn__circle,
.ud-dl-login .ud-arrow-btn:hover .ud-arrow-btn__label {
	background: var(--ud-white);
	color: var(--ud-navy);
}

.ud-dl-noaccount {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ud-dl-outline {
	display: inline-flex;
	align-items: center;
	height: 56px;
	padding: 0 24px;
	border: 1px solid var(--ud-grey-200);
	border-radius: 64px;
	color: var(--ud-white);
	font: 600 14px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.3s var(--ud-ease), color 0.3s var(--ud-ease);
}

.ud-dl-outline:hover {
	background: var(--ud-white);
	color: var(--ud-navy);
}

/* Partner area */
.ud-dl-welcome {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.ud-dl-welcome > div:first-child {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ud-dl-chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 16px;
	padding: 10px;
	border: 1px solid var(--ud-grey-200);
	border-radius: 100px;
	background: var(--ud-white);
}

.ud-dl-chip__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ud-navy);
	color: var(--ud-white);
	font: 500 10px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
}

.ud-dl-chip__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-dl-chip__who small {
	color: var(--ud-green);
	font: 500 10px/1.3 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-dl-chip__out {
	padding: 0 12px 0 8px;
	color: var(--ud-grey-600);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.ud-dl-chip__out:hover {
	color: var(--ud-green);
}

.ud-dl-nav {
	display: flex;
	flex: 0 0 320px;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border-radius: 16px;
	background: var(--ud-white);
}

.ud-dl-nav > p {
	padding: 0 8px 8px;
}

.ud-dl .ud-dl-nav__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px !important;
	border: 0;
	border-radius: 8px;
	font: 300 14px/1.5 var(--ud-font-body);
	text-align: left;
	cursor: pointer;
	--cfg-fg: var(--ud-navy);
}

.ud-dl .ud-dl-nav__item:hover {
	--cfg-bg: var(--ud-grey-100);
}

.ud-dl .ud-dl-nav__item.is-on {
	--cfg-bg: var(--ud-navy);
	--cfg-fg: var(--ud-white);
}

.ud-dl-nav__item small {
	color: var(--ud-grey-400);
	font: 500 10px/1 var(--ud-font-head);
}

.ud-dl-nav__item.is-on small {
	color: var(--ud-green);
}

.ud-dl-docs__head {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ud-dl-docs__head .ud-cfg__head {
	flex: 1 1 0;
	min-width: 0;
}

.ud-dl-search {
	display: flex;
	flex: 0 0 260px;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	border: 1px solid var(--ud-grey-200);
	border-radius: 100px;
	color: var(--ud-grey-400);
}

.ud-dl .ud-dl-search input {
	width: 100%;
	min-width: 0;
	padding: 12px 0;
	border: 0;
	outline: 0;
	background: none;
	color: var(--ud-navy);
	font: 300 14px/1.5 var(--ud-font-body);
	box-shadow: none;
}

.ud-dl-search:focus-within {
	border-color: var(--ud-green);
}

.ud-dl-section,
.ud-dl-group {
	display: flex;
	flex-direction: column;
}

.ud-dl-section {
	gap: 32px;
}

.ud-dl-section + .ud-dl-section {
	padding-top: 32px;
	border-top: 1px solid var(--ud-grey-200);
}

.ud-dl-docs.is-single .ud-dl-section__title {
	display: none;
}

.ud-dl-group {
	gap: 12px;
}

.ud-dl-table {
	border: 1px solid var(--ud-grey-200);
	border-radius: 12px;
}

.ud-dl-doc {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 20px;
}

.ud-dl-doc + .ud-dl-doc {
	border-top: 1px solid var(--ud-grey-200);
}

.ud-dl-doc > .ud-icon {
	display: inline-flex;
	flex: none;
}

.ud-dl-doc > .ud-icon svg path {
	stroke: var(--ud-navy);
}

.ud-dl-doc__name {
	flex: 1 1 0;
	min-width: 0;
	font: 400 14px/1.5 var(--ud-font-body);
}

.ud-dl-doc__get {
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-radius: 50%;
	background: var(--ud-green);
	transition: background-color 0.3s var(--ud-ease);
}

.ud-dl-doc__get:hover {
	background: #6aa62c;
}

.ud-dl-doc__get svg {
	display: block;
	width: 16px;
	height: 16px;
}

@media (max-width: 1200px) {
	.ud-dl .ud-cfg__body > .ud-dl-side,
	.ud-dl-nav {
		flex-basis: auto;
	}

	.ud-dl-welcome {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 767px) {
	.ud-dl-head,
	.ud-dl-docs__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.ud-dl-filters {
		padding-top: 0;
	}

	.ud-dl-row {
		flex-wrap: wrap;
		gap: 12px;
	}

	.ud-dl-row__meta {
		display: none;
	}

	.ud-dl-search {
		flex: none;
		width: 100%;
		box-sizing: border-box;
	}

	.ud-dl-doc {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding: 14px 16px;
	}

	.ud-dl-doc__name {
		flex: 1 1 calc(100% - 96px);
	}

	.ud-dl-login__actions {
		flex-wrap: wrap;
	}
}

/* Modal ------------------------------------------------------------------- */

.ud-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ud-modal[hidden] {
	display: none;
}

.ud-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s var(--ud-ease);
}

.ud-modal__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 532px;
	max-width: 100%;
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	padding: 40px;
	border-radius: 12px;
	background: var(--ud-white);
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 0.3s var(--ud-ease), transform 0.4s var(--ud-ease);
}

.ud-modal.is-open .ud-modal__backdrop {
	opacity: 1;
}

.ud-modal.is-open .ud-modal__card {
	opacity: 1;
	transform: none;
}

html.ud-modal-open {
	overflow: hidden;
}

.ud-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ud-modal__title {
	margin: 0;
	color: var(--ud-navy);
	font: 500 var(--fs-h4, 32px)/1.4 var(--ud-font-head);
}

.ud-modal .ud-modal__close {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ud-navy);
	cursor: pointer;
}

.ud-modal .ud-modal__close svg path {
	stroke: currentColor;
}

.ud-modal .ud-modal__close:is(:hover, :focus) {
	color: var(--ud-green);
	background: none;
}

.ud-modal .ud-modal__close:focus:not(:focus-visible) {
	color: var(--ud-navy);
	outline: none;
}

@media (max-width: 767px) {
	.ud-modal__card {
		padding: 24px;
		gap: 24px;
	}
}

/* Forms (Request access, Contact) ---------------------------------------- */

.ud-form {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ud-form__fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ud-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ud-field {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 64px;
	padding: 14px 16px 12px;
	border: 1px solid var(--ud-navy);
	border-radius: 10px;
	background: var(--ud-white);
	cursor: text;
	transition: border-color 0.2s var(--ud-ease), box-shadow 0.2s var(--ud-ease);
}

.ud-field:focus-within {
	border-color: var(--ud-green);
	box-shadow: 0 0 0 3px rgba(121, 184, 52, 0.18);
}

.ud-field__label {
	color: var(--ud-grey-600);
	font: 500 10px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-form .ud-field__input {
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: var(--ud-navy);
	font: 300 16px/1.6 var(--ud-font-body);
	box-shadow: none;
}

.ud-field__input::placeholder {
	color: var(--ud-navy);
	opacity: 0.85;
}

textarea.ud-field__input {
	min-height: 120px;
	resize: vertical;
}

.ud-form.was-validated .ud-field:has(:invalid) {
	border-color: #c0392b;
}

.ud-check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.ud-check__input {
	position: absolute;
	opacity: 0;
	width: 24px;
	height: 24px;
	margin: 0;
}

.ud-check__box {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.ud-check__box::before {
	content: "";
	position: absolute;
	inset: 3px;
	border: 1.5px solid var(--ud-navy);
	border-radius: 2px;
	transition: background-color 0.2s var(--ud-ease), border-color 0.2s var(--ud-ease);
}

.ud-check__box::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 5.5px;
	width: 6px;
	height: 11px;
	border: solid var(--ud-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.2s var(--ud-ease);
}

.ud-check__input:checked + .ud-check__box::before {
	border-color: var(--ud-green);
	background: var(--ud-green);
}

.ud-check__input:checked + .ud-check__box::after {
	transform: rotate(45deg) scale(1);
}

.ud-check__input:focus-visible + .ud-check__box::before {
	outline: 2px solid var(--ud-green);
	outline-offset: 2px;
}

.ud-form.was-validated .ud-check__input:invalid + .ud-check__box::before {
	border-color: #c0392b;
}

.ud-check__label {
	padding-top: 1px;
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-check__label a {
	color: var(--ud-navy);
	text-decoration: underline;
}

.ud-form__error {
	margin: -16px 0 0;
	color: #c0392b;
	font: 400 14px/1.5 var(--ud-font-body);
}

.ud-form.is-sending {
	opacity: 0.7;
}

.ud-form__success {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ud-form__success[hidden] {
	display: none;
}

.ud-form__success-text {
	margin: 0;
	color: var(--ud-navy);
	font: 300 16px/1.6 var(--ud-font-body);
}

/* Hotspots ----------------------------------------------------------------- */

.ud-hotspots__stage {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
}

.ud-hotspots__img {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 470px;
}

.ud-hotspots .ud-hotspot {
	position: absolute;
	z-index: 2;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.ud-hotspot__dot {
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--ud-white);
	box-shadow: 0 2px 10px rgba(21, 29, 38, 0.18);
	transition: inset 0.3s var(--ud-ease), background-color 0.3s var(--ud-ease);
}

.ud-hotspot__dot::after {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: var(--ud-navy);
	transition: inset 0.3s var(--ud-ease), background-color 0.3s var(--ud-ease);
}

.ud-hotspot.is-active .ud-hotspot__dot {
	inset: 0;
	background: var(--ud-green);
}

.ud-hotspot.is-active .ud-hotspot__dot::after {
	inset: 8px;
	background: var(--ud-white);
}

.ud-hotspot:not(.is-active)::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	animation: ud-pulse 2.2s var(--ud-ease) infinite;
}

@keyframes ud-pulse {
	from { transform: scale(1); opacity: 0.8; }
	to { transform: scale(2.2); opacity: 0; }
}

.ud-hotspots .ud-hotspot:focus-visible {
	outline: 2px solid var(--ud-green);
	outline-offset: 3px;
}

section.e-con:has(.ud-hotspots-none) {
	display: none;
}

.ud-hotspot-card {
	position: absolute;
	z-index: 3;
	width: 360px;
	margin: -48px 0 0 32px;
	padding: 24px;
	border-radius: 12px;
	background: var(--ud-white);
	box-shadow: 0 12px 40px rgba(21, 29, 38, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-8px);
	transition: opacity 0.3s var(--ud-ease), transform 0.4s var(--ud-ease), visibility 0s linear 0.4s;
	pointer-events: none;
}

.ud-hotspot-card.is-left {
	margin-left: -392px;
	transform: translateX(8px);
}

.ud-hotspot-card.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s var(--ud-ease), transform 0.4s var(--ud-ease), visibility 0s;
}

.ud-hotspot-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--ud-grey-400);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-hotspot-card__text {
	margin: 0;
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
}

@media (max-width: 1024px) {
	/* On smaller screens the active card sits under the image instead of floating. */
	.ud-hotspots__stage {
		padding-bottom: 0;
	}

	.ud-hotspot-card,
	.ud-hotspot-card.is-left {
		position: relative;
		left: auto !important;
		top: auto !important;
		display: none;
		width: 100%;
		margin: 24px 0 0;
		transform: none;
	}

	.ud-hotspot-card.is-active {
		display: block;
	}
}

/* Why it's different ------------------------------------------------------ */

.ud-why {
	display: flex;
	flex-direction: column;
}

.ud-why__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 0;
	border-bottom: 1px solid var(--ud-grey-200);
}

.ud-why__title {
	margin: 0;
	color: var(--ud-navy);
	font: 500 var(--fs-h4, 32px)/1.4 var(--ud-font-head);
}

.ud-why__text {
	margin: 0;
	color: var(--ud-navy);
	font: 300 var(--fs-body-md, 16px)/1.6 var(--ud-font-body);
}

@media (max-width: 767px) {
	.ud-spec {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
	}

	.ud-spec__label {
		flex-basis: auto;
	}

	.ud-nda {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
	}

	.ud-docs__link,
	.ud-specs button.ud-docs__link,
	.ud-specs button.ud-docs__link:is(:hover, :focus) {
		padding: 16px 0;
	}

	.ud-docs__action {
		font-size: 0;
		gap: 0;
	}
}

/* Product cut-outs fade into the floor (product hero). */
.ud-floor-fade {
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* Spec tags rendered inline via [udenco_spec_tags] (Elementor strips the
   spans' own classes, so they're styled through the paragraph's class). */
.ud-tags-inline {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.ud-tags-inline > :is(span, strong) {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 4px;
	background: var(--ud-white);
	color: var(--ud-navy);
	font: 500 10px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ==========================================================================
   Slider, gallery strip and team (About page and reusable).
   ========================================================================== */

.ud-slider {
	position: relative;
}

/* All slides share one grid cell, so every slide keeps the same size and
   position and the box height never changes while they cross-fade. */
.ud-slider:has(> .ud-slide),
.ud-slider :has(> .ud-slide) {
	display: grid !important;
}

.ud-slider .ud-slide {
	grid-area: 1 / 1;
	position: relative !important;
	inset: auto !important;
	transition: opacity 0.6s var(--ud-ease), visibility 0s linear 0.7s;
}

.ud-slider .ud-slide:not(.is-active) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ud-slider .ud-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.9s var(--ud-ease) 0.1s, visibility 0s;
}

/* Inside the slide: the photo settles from a slight zoom, text and figures
   rise in one after another. */
.ud-slider .ud-slide > * {
	transition: transform 1s var(--ud-ease), opacity 0.8s var(--ud-ease);
}

.ud-slider .ud-slide:not(.is-active) > * {
	opacity: 0;
	transform: translateY(16px);
}

.ud-slider .ud-slide:not(.is-active) > img {
	transform: scale(1.04);
}

.ud-slider .ud-slide.is-active > :nth-child(2) {
	transition-delay: 0.15s;
}

.ud-slider .ud-slide.is-active > :nth-child(3) {
	transition-delay: 0.3s;
}

.ud-slider-prev,
.ud-slider-next {
	cursor: pointer;
	transition: background-color 0.3s var(--ud-ease), border-color 0.3s var(--ud-ease), color 0.3s var(--ud-ease);
}

.ud-slider-prev:hover,
.ud-slider-next:hover {
	background-color: var(--ud-navy) !important;
	border-color: var(--ud-navy) !important;
	color: var(--ud-white) !important;
}

.ud-slider-prev:focus-visible,
.ud-slider-next:focus-visible {
	outline: 2px solid var(--ud-green);
	outline-offset: 2px;
}

.elementor-editor-active .ud-slider:has(> .ud-slide),
.elementor-editor-active .ud-slider :has(> .ud-slide) {
	display: flex !important;
	flex-direction: column;
	gap: 48px;
}

.elementor-editor-active .ud-slider .ud-slide,
.elementor-editor-active .ud-slider .ud-slide > * {
	grid-area: auto;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Gallery strip */
.ud-gallery {
	display: flex !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
}

.ud-gallery::-webkit-scrollbar {
	display: none;
}

.ud-gallery.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

/* Endless loop: no snapping (it would fight the drift and the wrap). */
.ud-gallery.is-loop {
	scroll-snap-type: none !important;
	scroll-behavior: auto !important;
}

.ud-gallery > * {
	flex: 0 0 auto !important;
	width: auto !important;
	scroll-snap-align: start;
}

.ud-gallery-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.ud-gallery-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	background: var(--ud-grey-200) !important;
	cursor: pointer;
	transition: background-color 0.3s var(--ud-ease);
}

.ud-gallery-dots button.is-active {
	width: 24px;
	border-radius: 8px;
	background: var(--ud-navy) !important;
}

/* Team */
.ud-team {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 72px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ud-member {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ud-member__photo {
	height: 420px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--ud-grey-100);
}

.ud-member__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.8s var(--ud-ease);
}

.ud-member:hover .ud-member__img {
	transform: scale(1.03);
}

.ud-member__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 16px;
}

.ud-member__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--ud-grey-200);
}

.ud-member__role {
	color: var(--ud-grey-600);
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-member__linkedin {
	display: inline-flex;
	color: var(--ud-navy);
}

.ud-member__linkedin:hover {
	color: var(--ud-green);
}

.ud-member__linkedin svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

.ud-member__linkedin svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.ud-member__name {
	margin: 0;
	color: var(--ud-navy);
	font: 500 var(--fs-h5, 24px)/1.4 var(--ud-font-head);
}

.ud-member__bio {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--ud-navy);
	font: 300 14px/1.5 var(--ud-font-body);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

/* The whole card opens the profile; LinkedIn stays clickable above it. */
.ud-member {
	position: relative;
}

.ud-member .ud-member__linkedin {
	position: relative;
	z-index: 1;
}

.ud-team .ud-member__more {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ud-navy);
	font: 600 14px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.ud-team .ud-member__more::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ud-team .ud-member:hover .ud-member__more,
.ud-team .ud-member__more:focus-visible {
	background: none;
	color: var(--ud-green);
}

.ud-member__more svg path {
	stroke: currentColor;
}

.ud-member__more .ud-icon {
	transition: transform 0.3s var(--ud-ease);
}

.ud-member:hover .ud-member__more .ud-icon {
	transform: translateX(3px);
}

/* Profile window: page stays visible above and below so it reads as a window, not a screen. */
.ud-modal--profile {
	padding-block: 100px;
}

.ud-modal--profile .ud-modal__card {
	width: 880px;
	max-height: 100%;
}

@media (max-width: 767px) {
	.ud-modal--profile {
		padding-block: 64px;
	}
}

.ud-profile {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.ud-profile__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 12px;
}

.ud-profile__bio {
	margin: 0;
	color: var(--ud-navy);
	font: 300 16px/1.6 var(--ud-font-body);
}

.ud-profile__cv {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ud-profile__label {
	margin: 0;
	color: var(--ud-navy);
	font: 500 16px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-cv {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

/* body + full path beats Hello Elementor's zebra table cells. */
body table.ud-cv > tbody > tr > :is(th, td) {
	padding: 16px 0;
	border: 0;
	border-bottom: 1px solid var(--ud-grey-200);
	background: none;
	text-align: left;
	vertical-align: top;
}

body table.ud-cv > tbody > tr > th {
	width: 140px;
	padding-right: 24px;
	color: var(--ud-green);
	font: 500 14px/1.4 var(--ud-font-head);
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.ud-cv strong {
	display: block;
	color: var(--ud-navy);
	font: 500 16px/1.4 var(--ud-font-head);
}

.ud-cv span {
	display: block;
	margin-top: 4px;
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
}

@media (max-width: 767px) {
	.ud-profile {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.ud-profile__photo {
		width: 160px;
	}

	body table.ud-cv > tbody > tr > :is(th, td) {
		display: block;
		width: auto;
	}

	body table.ud-cv > tbody > tr > th {
		padding: 16px 0 4px;
		border-bottom: 0;
	}

	body table.ud-cv > tbody > tr > td {
		padding-top: 0;
	}
}

@media (max-width: 1024px) {
	.ud-team {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 24px;
	}
}

@media (max-width: 767px) {
	.ud-team {
		grid-template-columns: minmax(0, 1fr);
	}

	.ud-member__photo {
		height: 360px;
	}
}

/* ==========================================================================
   Process steps, slider tabs, parallax (Build to Print and reusable).
   ========================================================================== */

.ud-steps-track {
	scrollbar-width: none;
}

.ud-steps-track::-webkit-scrollbar {
	display: none;
}

.ud-step {
	cursor: pointer;
}

.ud-step .ud-step-num {
	transition: color 0.8s var(--ud-ease), -webkit-text-stroke-color 0.8s var(--ud-ease);
}

.ud-step:not(.is-active) .ud-step-num {
	color: transparent !important;
	-webkit-text-stroke: 1.5px var(--ud-navy);
}

.ud-step:not(.is-active):hover .ud-step-num {
	-webkit-text-stroke-color: var(--ud-green);
}

/* Tablet and desktop: the active step grows smoothly (flex-grow), the
   others share the rest. Text keeps a fixed width so it never re-wraps
   mid-animation, and every step keeps its text box (just hidden), so the
   section height never jumps. */
@media (min-width: 768px) {
	.ud-steps-track {
		overflow: visible !important;
	}

	.ud-step {
		flex: 1 1 0 !important;
		min-width: 0;
		overflow: hidden !important;
		transition: flex-grow 1.2s var(--ud-ease) !important;
	}

	.ud-steps-track {
		--ud-steps-n: 4;
		--ud-steps-grow: 2.2;
		--ud-steps-gap: 64px;
		container-type: inline-size;
	}

	.ud-steps-track:has(> .ud-step:nth-child(5)) {
		--ud-steps-n: 5;
		--ud-steps-grow: 2.6;
	}

	.ud-step.is-active {
		flex-grow: var(--ud-steps-grow) !important;
	}

	.ud-step .ud-step-num {
		font-size: min(120px, 7.5vw) !important;
	}

	.ud-step .ud-step-num {
		white-space: nowrap;
	}

	.ud-step .ud-step-detail {
		/* Exactly the active step's width (track minus gaps, its share of the
		   flex-grow), so the text never re-wraps mid-animation and never
		   overflows, whatever the number of steps. */
		width: calc((100cqw - (var(--ud-steps-n) - 1) * var(--ud-steps-gap)) * var(--ud-steps-grow) / (var(--ud-steps-n) - 1 + var(--ud-steps-grow))) !important;
		max-width: none !important;
		opacity: 0;
		visibility: hidden;
		transform: translateY(12px);
		transition: opacity 0.4s var(--ud-ease), transform 0.4s var(--ud-ease), visibility 0s linear 0.4s;
	}

	.ud-step.is-active .ud-step-detail {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.8s var(--ud-ease) 0.55s, transform 0.9s var(--ud-ease) 0.55s, visibility 0s;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ud-step .ud-step-num {
		font-size: clamp(64px, 11vw, 120px) !important;
	}
}

.ud-steps-progress {
	position: relative;
	height: 1px !important;
	background: var(--ud-grey-200);
}

.ud-steps-progress::after {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 100%;
	height: 3px;
	background: var(--ud-navy);
	transform: scaleX(var(--ud-progress, 0.25));
	transform-origin: left center;
	transition: transform 1.1s var(--ud-ease);
}

.ud-steps-prev.is-disabled,
.ud-steps-next.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.ud-steps-prev,
.ud-steps-next {
	cursor: pointer;
	transition: background-color 0.3s var(--ud-ease), border-color 0.3s var(--ud-ease), color 0.3s var(--ud-ease), opacity 0.3s;
}

.ud-steps-prev:hover,
.ud-steps-next:hover {
	background-color: var(--ud-navy) !important;
	border-color: var(--ud-navy) !important;
	color: var(--ud-white) !important;
}

@media (max-width: 767px) {
	/* On phones every step is open and stacked. */
	.ud-step .ud-step-detail {
		max-width: none;
		max-height: none;
		opacity: 1;
	}

	.ud-step:not(.is-active) .ud-step-num {
		color: var(--ud-navy) !important;
		-webkit-text-stroke: 0;
	}
}

/* Slider tabs: label under a line that thickens when active. */
.ud-slider-tab {
	position: relative;
	cursor: pointer;
	color: var(--ud-grey-400);
	/* Grey base line drawn as a background: Elementor uses ::before on containers. */
	background: linear-gradient(var(--ud-grey-200), var(--ud-grey-200)) left top / 100% 1px no-repeat !important;
	transition: color 0.5s var(--ud-ease);
}

.ud-slider-tab::after {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 43%;
	height: 3px;
	background: var(--ud-navy);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.8s var(--ud-ease);
}

/* Autoplay: the line is a progress bar across the whole tab; when it is
   full the slider moves on (see udenco.js). */
.ud-slider.is-autoplay .ud-slider-tab::after {
	width: 100%;
	transition: none;
}

.ud-slider.is-autoplay .ud-slider-tab.is-active::after {
	transform: scaleX(0);
}

.ud-slider.is-autoplay .ud-slider-tab.is-running::after {
	animation: ud-tab-progress 7s linear forwards;
}

.ud-slider.is-autoplay:is(.is-paused, .is-offscreen) .ud-slider-tab::after {
	animation-play-state: paused;
}

@keyframes ud-tab-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.ud-slider-tab:hover {
	color: var(--ud-grey-600);
}

.ud-slider-tab.is-active {
	color: var(--ud-navy);
}

.ud-slider-tab.is-active::after {
	transform: scaleX(1);
}

.ud-slider-tab .e-paragraph-base,
.ud-slider-tab p {
	color: inherit !important;
	font-weight: 500 !important;
	transition: color 0.5s var(--ud-ease);
}

/* Parallax floaters */
.ud-parallax {
	will-change: translate;
}

/* Contact form card (Udenco Contact Form widget). */
.ud-contact-card {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 40px;
	border-radius: 12px;
	background: var(--ud-white);
}

.ud-contact-card__title {
	margin: 0;
	color: var(--ud-navy);
	font: 500 var(--fs-h4, 32px)/1.4 var(--ud-font-head);
}

.ud-field--area {
	justify-content: flex-start;
	min-height: 128px;
}

.ud-field--area .ud-field__input {
	min-height: 80px;
	resize: vertical;
}

@media (max-width: 767px) {
	.ud-contact-card {
		padding: 24px;
		gap: 24px;
	}
}

/* ==========================================================================
   Post listings (Udenco Post List widget).
   ========================================================================== */

.ud-listing__items {
	transition: opacity 0.2s var(--ud-ease);
}

.ud-listing.is-loading .ud-listing__items {
	opacity: 0.45;
}

.ud-listing--features .ud-listing__items {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ud-listing--grid .ud-listing__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 32px;
}

.ud-listing__more {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}

.ud-listing__more[hidden] {
	display: none;
}

.ud-listing .ud-listing__more-btn {
	height: 56px;
	padding: 0 24px;
	border: 1px solid var(--ud-grey-400) !important;
	border-radius: 64px;
	background: transparent !important;
	color: var(--ud-navy) !important;
	font: 600 14px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s var(--ud-ease), color 0.3s var(--ud-ease);
}

.ud-listing .ud-listing__more-btn:hover,
.ud-listing .ud-listing__more-btn:focus-visible {
	background: var(--ud-navy) !important;
	color: var(--ud-white) !important;
}

/* Compact wide card ("Other articles"). */
.ud-feature--compact {
	min-height: 296px;
}

@media (max-width: 1024px) {
	.ud-listing--grid .ud-listing__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
	}
}

@media (max-width: 767px) {
	.ud-listing--grid .ud-listing__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Newsletter + large latest-post card (blog).
   ========================================================================== */

.ud-newsletter {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ud-newsletter__title {
	margin: 0 0 8px;
	color: var(--ud-navy);
	font: 500 14px/1.35 var(--ud-font-body);
}

.ud-newsletter__form {
	display: flex;
	gap: 12px;
}

.ud-newsletter__field {
	flex: 1 1 auto;
	min-width: 0;
}

.ud-newsletter .ud-newsletter__input {
	width: 100%;
	height: 56px;
	padding: 0 16px;
	border: 1px solid var(--ud-navy);
	border-radius: 10px;
	background: var(--ud-white);
	color: var(--ud-navy);
	font: 300 16px/1.6 var(--ud-font-body);
	box-shadow: none;
}

.ud-newsletter .ud-newsletter__input:focus {
	outline: none;
	border-color: var(--ud-green);
	box-shadow: 0 0 0 3px rgba(121, 184, 52, 0.18);
}

.ud-newsletter .ud-newsletter__button {
	flex-shrink: 0;
	height: 56px;
	padding: 0 20px;
	border: 0 !important;
	border-radius: 64px;
	background: var(--ud-green) !important;
	color: var(--ud-white) !important;
	font: 600 14px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.ud-newsletter .ud-newsletter__button:hover {
	background: #6aa62c !important;
}

.ud-newsletter__note,
.ud-newsletter__message {
	margin: 0;
	color: var(--ud-grey-600);
	font: 300 14px/1.5 var(--ud-font-body);
}

.ud-newsletter__note a {
	color: inherit;
	text-decoration: underline;
}

.ud-newsletter__message {
	color: var(--ud-green);
	font-weight: 400;
}

.ud-newsletter__message.is-error {
	color: #c0392b;
}

.ud-newsletter--box {
	padding: 24px;
	border-radius: 12px;
	background-color: var(--ud-grey-100);
}

.ud-newsletter--box .ud-newsletter__title {
	font: 500 20px/1.1 var(--ud-font-head);
}

.ud-newsletter--box .ud-newsletter__form {
	flex-direction: column;
}

.ud-newsletter--box .ud-newsletter__input {
	height: 48px;
}

.ud-newsletter--box .ud-newsletter__button {
	width: 100%;
	height: 48px;
}

.ud-newsletter--box .ud-newsletter__note {
	font-size: 12px;
}

.ud-post-card--hero .ud-post-card__media {
	height: 392px;
}

.ud-post-card--hero .ud-post-card__title {
	font-size: var(--fs-h4, 32px);
	line-height: 1.4;
}

@media (max-width: 767px) {
	.ud-newsletter__form {
		flex-direction: column;
	}

	.ud-post-card--hero .ud-post-card__media {
		height: 260px;
	}
}

/* ==========================================================================
   Single articles: hero pills (left aligned), key numbers, related list and
   typography for editor content (.ud-article wraps the Post Content widget).
   ========================================================================== */

.ud-tags-inline.ud-tags-left {
	justify-content: flex-start;
}

.ud-tags-inline.ud-tags-lg > span {
	height: 32px;
	padding: 0 16px;
	font-size: 12px;
}

.ud-highlights {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.ud-highlights__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 24px 20px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.ud-highlights dt {
	margin: 0;
	color: var(--ud-white);
	font-family: var(--ud-font-head);
	font-weight: 600;
	white-space: nowrap;
}

.ud-highlights__value {
	font-size: var(--fs-h3, 40px);
	line-height: 1;
}

.ud-highlights__unit {
	font-size: 24px;
	font-weight: 500;
}

.ud-highlights dd {
	margin: 0;
	color: var(--ud-grey-200);
	font: 300 14px/1.5 var(--ud-font-body);
	text-align: right;
}

.ud-related {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ud-feature--compact {
	grid-template-columns: 1fr 1fr;
	min-height: 296px;
}

.ud-feature--compact .ud-feature__tags {
	top: 24px;
	left: 24px;
}

/* Editor content */
/* body prefix: Elementor's .elementor-widget-theme-post-content sets the kit font (Roboto) on the same element. */
body .ud-article {
	color: var(--ud-grey-600);
	font: 300 var(--fs-body-md, 16px)/1.6 var(--ud-font-body);
}

.ud-article > * {
	margin: 0;
}

.ud-article > * + * {
	margin-top: 24px;
}

.ud-article > :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 48px;
	color: var(--ud-navy);
	font-family: var(--ud-font-head);
	font-weight: 500;
	line-height: 1.2;
}

.ud-article > :is(h1, h2, h3, h4, h5, h6) + * {
	margin-top: 8px;
}

.ud-article > :is(ul, ol, .wp-block-gallery),
.ud-article > :is(ul, ol, .wp-block-gallery) + * {
	margin-top: 32px;
}

.ud-article > :is(table, blockquote, .wp-block-image),
.ud-article > :is(table, blockquote, .wp-block-image) + * {
	margin-top: 48px;
}

.ud-article > h1 { font-size: var(--fs-h3, 40px); font-weight: 600; }
.ud-article > h2 { font-size: var(--fs-h4, 32px); }
.ud-article > h3 { font-size: var(--fs-h5, 24px); line-height: 1.4; }
.ud-article > h4 { font-size: var(--fs-h6, 20px); }
.ud-article > h5 { font-size: 16px; }
.ud-article > h6 { font-size: 14px; }

.ud-article > p:first-child {
	color: var(--ud-navy);
	font-size: var(--fs-body-lg, 28px);
	font-weight: 400;
	line-height: 1.4;
}

.ud-article a {
	color: var(--ud-navy);
	text-decoration: underline;
	text-decoration-color: var(--ud-green);
	text-underline-offset: 3px;
}

.ud-article strong {
	color: var(--ud-navy);
	font-weight: 500;
}

.ud-article ul,
.ud-article ol {
	padding: 0;
	list-style: none;
}

.ud-article li + li {
	margin-top: 12px;
}

.ud-article ul li {
	position: relative;
	padding-left: 32px;
}

.ud-article ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(50% - 4px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ud-green);
}

.ud-article ol {
	counter-reset: ud-ol;
}

.ud-article ol li {
	position: relative;
	padding-left: 28px;
	counter-increment: ud-ol;
}

.ud-article ol li::before {
	content: counter(ud-ol) ".";
	position: absolute;
	left: 0;
	color: var(--ud-navy);
	font-weight: 500;
}

.ud-article img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.ud-article figcaption {
	margin-top: 12px;
	color: var(--ud-grey-600);
	font-size: 14px;
	font-style: normal;
	line-height: 1.5;
}

.ud-article :is(.wp-block-gallery, .wp-block-columns) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.ud-article figure {
	margin-inline: 0;
}

.ud-article .wp-block-gallery figure {
	margin: 0;
}

.ud-article figure img {
	width: 100%;
	border-radius: 12px;
}

.ud-article .wp-block-gallery img {
	aspect-ratio: 428 / 496;
	object-fit: cover;
	filter: brightness(0.9);
}

.ud-article > .wp-block-image img {
	aspect-ratio: 880 / 516;
	object-fit: cover;
}

/* Rows are separate rounded boxes (Figma), so the table is laid out with flex. */
.ud-article table {
	display: block;
	width: 100%;
	color: var(--ud-grey-600);
	font-size: 14px;
	line-height: 1.5;
}

.ud-article :is(thead, tbody) {
	display: block;
}

.ud-article tr {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 56px;
	padding: 0 20px;
	border-radius: 12px;
}

/* body + full path beats Hello Elementor's `table tbody > tr:nth-child(odd) > td`. */
body .ud-article table > :is(thead, tbody) > tr > :is(th, td) {
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 0;
	border: 0;
	background: none;
	line-height: 1.5;
	text-align: left;
	vertical-align: middle;
}

/* ...and Hello's `table thead:first-child tr:first-child th` top border. */
body .ud-article table > thead:first-child > tr:first-child > th {
	border-block-start: 0;
}

.ud-article thead tr {
	background: var(--ud-green) url("../img/table-head-dots.svg") center / auto 100% no-repeat;
}

.ud-article tbody tr {
	border: 1px solid var(--ud-grey-400);
}

.ud-article tbody tr + tr {
	margin-top: -1px;
}

.ud-article thead th,
.ud-article tbody td:first-child {
	font: 500 12px/1 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-article thead th {
	color: var(--ud-white);
}

.ud-article blockquote {
	padding-left: 32px;
	border-left: 2px solid var(--ud-green);
}

.ud-article blockquote p {
	color: var(--ud-navy);
	font-size: var(--fs-body-lg, 28px);
	font-weight: 400;
	line-height: 1.4;
}

.ud-article blockquote cite {
	display: block;
	margin-top: 16px;
	color: var(--ud-grey-600);
	font: 500 12px/1 var(--ud-font-head);
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 1024px) {
	.ud-feature--compact {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.ud-article :is(.wp-block-gallery, .wp-block-columns) {
		grid-template-columns: 1fr;
	}

	.ud-article table {
		overflow-x: auto;
	}

	.ud-article :is(thead, tbody) {
		min-width: 640px;
	}

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

	.ud-highlights dd {
		text-align: left;
	}
}

/* Arrow buttons (circle + pill): hovering either part lights up both. */
.elementor .btn-group :is(.btn) {
	transition: background-color 0.3s var(--ud-ease), color 0.3s var(--ud-ease), border-color 0.3s var(--ud-ease);
}

.elementor .btn-group:is(:hover, :focus-visible) > .btn-green {
	background-color: rgb(106, 166, 44);
}

.elementor .btn-group:is(:hover, :focus-visible) > .btn-white {
	background-color: var(--green-soft);
}

.elementor .btn-group:is(:hover, :focus-visible) > .btn-outline-dark {
	color: var(--white);
	background-color: var(--navy);
}

/* Light outline buttons invert on hover (mirror of btn-outline-dark):
   white fill, navy text. !important beats per-button hover styles. */
.elementor .btn-outline-light {
	transition: background-color 0.3s var(--ud-ease), color 0.3s var(--ud-ease), border-color 0.3s var(--ud-ease) !important;
}

.elementor .btn-outline-light:is(:hover, :focus-visible),
.elementor .btn-group:is(:hover, :focus-visible) > .btn-outline-light {
	background-color: var(--white) !important;
	border-color: var(--white) !important;
	color: var(--navy) !important;
}

.elementor .btn-outline-light :is(p, span, svg) {
	color: inherit !important;
}

/* Lenis smooth scroll */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: clip;
}

/* Safety net: decorative bleed (maps, dot patterns) never causes sideways
   scrolling. "clip" (not "hidden") keeps position: sticky working. */
html,
body {
	overflow-x: clip;
}

/* ==========================================================================
   Product content extras: accent tag, availability line, configurations,
   typical use, missing product image.
   ========================================================================== */

.ud-tag.ud-tag--accent {
	background: var(--ud-green);
	color: var(--ud-white);
}

.ud-product-card__availability {
	color: var(--ud-navy);
	font: 500 12px/1.5 var(--ud-font-body);
}

.ud-product-card__media--empty {
	align-items: center;
}

.ud-product-card__logo {
	width: 60% !important;
	max-width: 180px;
	height: auto !important;
	opacity: 0.35;
	filter: grayscale(1);
}

.ud-variants {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ud-variant {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--ud-slate-2);
	border-radius: 12px;
	color: var(--ud-white);
}

.ud-variant p {
	margin: 0;
}

.ud-variant__label {
	color: var(--ud-green);
	font: 500 10px/1.4 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-variant__power {
	font: 500 24px/1.2 var(--ud-font-head);
}

.ud-variant__points {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font: 300 14px/1.5 var(--ud-font-body);
	opacity: 0.8;
}

.ud-variant__points li + li {
	margin-top: 4px;
}

.ud-why__use {
	margin-top: 40px;
	padding: 24px;
	border: 1px solid var(--ud-grey-200);
	border-radius: 12px;
	background: var(--ud-white);
}

.ud-why__use-label {
	margin: 0 0 12px;
	color: var(--ud-green);
	font: 500 12px/1.4 var(--ud-font-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ud-why__use ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ud-why__use li {
	position: relative;
	padding-left: 18px;
	color: var(--ud-navy);
	font: 300 var(--fs-body-md, 16px)/1.5 var(--ud-font-body);
}

.ud-why__use li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ud-green);
}

@media (max-width: 767px) {
	.ud-variants,
	.ud-why__use ul {
		grid-template-columns: 1fr;
	}
}

.ud-tags-inline > strong {
	background: var(--ud-green);
	color: var(--ud-white);
}

/* Image widgets without an image (e.g. a product whose photo is not ready). */
img.e-image-base:not([src]),
img.e-image-base[src=""] {
	display: none;
}

/* Linked image that should fill its flex row (e.g. the Contact map, linked
   to Google Maps): the link wrapper takes the space, the image fills it. */
/* !important: Elementor's .e-image-link-base uses "all: unset". */
.e-image-link-base:has(> .ud-map) {
	display: block !important;
	flex: 1 1 0 !important;
	min-width: 0 !important;
}

.e-image-link-base > .ud-map {
	width: 100% !important;
}

@media (max-width: 1024px) {
	.e-image-link-base:has(> .ud-map) {
		flex: 0 1 auto !important;
		width: 100% !important;
	}
}

/* Current page in the menus (set by udenco.js). */
.ud-header a.is-current:not(.ud-menu-card, .e-con),
.ud-header a.is-current:not(.ud-menu-card) p,
.ud-header :is(.ud-open-services, .ud-open-company, .ud-mopen-services, .ud-mopen-company).is-current p {
	text-decoration: underline;
	text-decoration-color: var(--ud-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

.ud-header .ud-menu-card.is-current {
	box-shadow: inset 0 0 0 1px var(--ud-green);
}

/* Udenco Map widget: real Google map, toned grey like the design. */
.elementor-widget-udenco-map,
.elementor-widget-udenco-map > .elementor-widget-container {
	height: 100%;
}

.ud-map-embed {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 360px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--ud-grey-200);
}

.ud-map-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) contrast(0.92) brightness(1.04);
}

/* Header "Contact us": the whole button turns green on hover. */
.elementor .ud-header .btn-group:is(:hover, :focus-visible) > .btn {
	background-color: var(--ud-green) !important;
	color: var(--ud-white) !important;
}

.ud-header .btn-group > .btn :is(p, svg) {
	color: inherit;
	transition: color 0.3s var(--ud-ease);
}

/* Halftone dot fields exported from Figma (grey; large at the edges, fading
   out toward the middle). Corner: top-right field of the product sections.
   Device: full background of the product "Device features" section. */
.ud-halftone-corner {
	background: url("../img/halftone-corner.svg") center / 100% 100% no-repeat !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	pointer-events: none;
}

.ud-halftone-device {
	background-image: url("../img/halftone-device.svg") !important;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
}

@media (max-width: 767px) {
	.ud-halftone-corner {
		opacity: 0.7;
	}
}

/* Expand cards: darker shade at the bottom so white text stays readable on
   bright photos. */
.ud-expand-card > .e-div-block-base {
	background-image: linear-gradient(0deg, rgba(5, 14, 16, 0.78) 0%, rgba(5, 14, 16, 0.35) 45%, rgba(5, 14, 16, 0.08) 100%) !important;
}



/* Typewriter: untyped text keeps its space but is not shown. */
.ud-tw-rest {
	visibility: hidden;
}

/* Halftone fields are clipped at their section edge (as in Figma), so they
   never spill into the section above. "clip" keeps sticky children working. */
.e-con:has(> .ud-halftone-corner) {
	overflow: clip !important;
}

/* Grid helpers (desktop; tablet/mobile keep their own paddings).
   ud-grid-narrow: a section whose content sits on the narrow grid.
   ud-grid-inset:  a narrow block inside a wide section. */
@media (min-width: 1025px) {
	.ud-grid-narrow {
		padding-inline: var(--grid-narrow) !important;
	}

	.ud-grid-inset {
		padding-inline: var(--grid-inset) !important;
	}
}

/* Header follows the wide grid on large screens (24px at 1440 as in Figma,
   then 32px outside the content edge). */
@media (min-width: 1025px) {
	.ud-header {
		padding-inline: max(24px, calc(var(--grid-wide) - 32px)) !important;
	}
}

/* SVG icons keep their own proportions: Elementor outputs them with
   preserveAspectRatio="none", which stretches non-square icons to the box.
   height:auto takes the ratio from the viewBox; the icon is centred. */
.e-svg-base:has(> svg) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.e-svg-base > svg {
	width: 100%;
	height: auto !important;
	max-height: 100%;
}

/* Page heroes (Home, Build to Print, White Label, Private Label): full
   screen height on desktop, never shorter than the 864px design. */
@media (min-width: 1025px) {
	body:is(.page-id-80, .page-id-86, .page-id-87, .page-id-88) .ud-hero {
		min-height: max(864px, 100vh) !important;
	}
}

/* Homepage hero on very wide screens (wider than 2:1, e.g. 21:9): the
   photo keeps its natural proportions on the right instead of being
   enlarged, and its left edge fades into the dark hero background. */
@media (min-aspect-ratio: 2/1) and (min-width: 1025px) {
	body.page-id-80 .ud-hero > img.cover-image {
		left: auto !important;
		right: 0;
		width: auto !important;
		height: 100% !important;
		aspect-ratio: 2624 / 1632;
		max-width: none;
		object-position: center !important;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
	}

	body.page-id-80 .ud-hero {
		background-color: #1c2224 !important;
	}
}

/* Footer photo: overhang 1px on each side so the white page never shows
   through its anti-aliased edges; dark backing behind it. */
[data-elementor-type="footer"] .elementor-element-4b4ace6c {
	background-color: #0d1410 !important;
}

[data-elementor-type="footer"] .elementor-element-4b4ace6c > img {
	inset: -1px !important;
	width: calc(100% + 2px) !important;
	height: calc(100% + 2px) !important;
	max-width: none !important;
}

/* Footer column labels stay smaller than the 16px section labels elsewhere.
   .elementor[...] outranks the global class's `.elementor .section-label`,
   which loads after this file. */
.elementor[data-elementor-type="footer"] .section-label {
	font-size: 14px;
}

/* ==========================================================================
   "Soon" badge — menu items for sections that are not live yet
   (global class ud-soon on an unlinked e-paragraph; Technical Background).
   ========================================================================== */
.ud-soon {
	position: relative;
	width: fit-content;
	cursor: default;
	pointer-events: none; /* not a link yet: no hover colour, no click */
	/* Faded "unavailable" text; follows the header's white/navy colour switch.
	   text-fill instead of opacity so the badge stays solid. */
	-webkit-text-fill-color: color-mix(in srgb, currentColor 40%, transparent);
}

.ud-soon::after {
	content: "Soon";
	position: absolute;
	bottom: calc(100% + 2px);
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ud-green-soft);
	color: var(--ud-navy);
	-webkit-text-fill-color: var(--ud-navy);
	font-size: 11px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Footer: no room above the link (column label sits there) → badge inline after the text. */
.elementor[data-elementor-type="footer"] .ud-soon::after {
	position: static;
	display: inline-block;
	margin-left: 8px;
	vertical-align: 1px;
	transform: none;
}