/* The assigned widget box owns structural layout; Elementor owns control breakpoints. */
.elementor-widget-noise-portfolio-carousel {
	container: ndw-portfolio-carousel / inline-size;
	/* Supply a preferred width when Elementor asks for intrinsic (auto) sizing. */
	contain-intrinsic-inline-size: 1140px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ndw-portfolio-carousel {
	--ndw-portfolio-entrance-distance: 30px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	min-width: 0;
	margin-inline: auto;
}

.ndw-portfolio-carousel *,
.ndw-portfolio-carousel *::before,
.ndw-portfolio-carousel *::after {
	box-sizing: border-box;
}

.ndw-portfolio-carousel__clip {
	display: grid;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	overflow: clip;
	gap: 24px;
	contain: layout paint style;
}

.elementor-widget-noise-portfolio-carousel,
.elementor-widget-noise-portfolio-carousel > .elementor-widget-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ndw-portfolio-carousel--entrance-fade-up,
.ndw-portfolio-carousel--entrance-fade-in,
.ndw-portfolio-carousel--entrance-zoom-in {
	opacity: 0;
	transition:
		opacity 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ndw-portfolio-carousel--entrance-fade-up {
	transform: translateY(var(--ndw-portfolio-entrance-distance));
}

.ndw-portfolio-carousel--entrance-zoom-in {
	transform: scale(0.94);
}

.ndw-portfolio-carousel--is-visible {
	opacity: 1;
	transform: none;
}

.ndw-portfolio-carousel--marquee .ndw-carousel__viewport {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	overflow: clip;
	padding-block: 8px;
	touch-action: pan-y;
	contain: layout paint style;
}

.ndw-portfolio-carousel .ndw-carousel {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	overflow: clip;
}

.ndw-portfolio-carousel--marquee .swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	gap: 24px;
	transition: none !important;
	will-change: transform;
	contain: layout style;
}

.ndw-portfolio-carousel--marquee .swiper-slide {
	flex-shrink: 0;
}

.ndw-portfolio-carousel--marquee .ndw-portfolio-card {
	flex: 0 0 auto;
	width: 350px;
}

.ndw-portfolio-card {
	--ndw-portfolio-overlay: #15191e;
	position: relative;
	height: 240px;
	min-width: 0;
	overflow: hidden;
	border: 0 solid transparent;
	border-radius: 8px;
	background: #e6ecea;
	transform: scale(1);
	transform-origin: center;
	will-change: transform;
	transition:
		transform 280ms ease,
		box-shadow 280ms ease;
}

.ndw-portfolio-card__link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* Same reason as the lightbox chrome: the card trigger is a real `button`, so a
   single class loses to the kit's `.elementor-kit-N button` rule and the card
   would inherit the site button background and its 16px/28px padding. */
.ndw-portfolio-card .ndw-portfolio-card__trigger {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	box-shadow: none;
	color: inherit;
	letter-spacing: normal;
	text-align: inherit;
	text-transform: none;
	/* Hello Elementor's reset.css gives every `button` `white-space: nowrap`, which the
	   card content inherits: titles could not wrap and were clipped by the card at
	   every width. */
	white-space: normal;
	cursor: pointer;
}

.ndw-portfolio-card__link:focus-visible,
.ndw-portfolio-card .ndw-portfolio-card__trigger:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -5px;
}

/* Elementor publishes `.elementor img` at (0,1,1), which ties with a single-class
   default and would let `height: auto` win. The class is repeated on the element
   itself rather than chained to a container, so the rule cannot stop matching in a
   layout variant that nests the image differently. */
.ndw-portfolio-card__image,
.ndw-portfolio-card__image.ndw-portfolio-card__image img {
	display: block;
	width: 100%;
	height: 100%;
}

.ndw-portfolio-card__image img {
	object-fit: cover;
	transform-origin: center;
	transition: scale 280ms ease;
}

.ndw-portfolio-card__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px;
	background: linear-gradient(0deg, var(--ndw-portfolio-overlay) 0%, transparent 72%);
	pointer-events: none;
	transition:
		opacity 280ms ease,
		transform 280ms ease;
}

.ndw-portfolio-carousel--overlay-hover .ndw-portfolio-card--has-image .ndw-portfolio-card__content {
	opacity: 0;
	transform: translateY(8px);
}

.ndw-portfolio-carousel--overlay-hover .ndw-portfolio-card--has-image:hover .ndw-portfolio-card__content,
.ndw-portfolio-carousel--overlay-hover .ndw-portfolio-card--has-image:focus-within .ndw-portfolio-card__content,
.elementor-editor-active .ndw-portfolio-carousel--overlay-hover .ndw-portfolio-card__content {
	opacity: 1;
	transform: none;
}

.ndw-portfolio-card__category {
	color: #6ee7c7;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

:where(.ndw-portfolio-card__title) {
	margin: 8px 0 0;
	color: #fff;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.18;
}

:where(.ndw-portfolio-card__description) {
	margin: 10px 0 0;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.86;
}

/* Every title reserves the same number of lines, so a one-line title and a
   two-line title start at the same height and the descriptions line up across
   the row (up to 1.0.3 each extra line pushed the whole block up). Longer text
   is clamped with an ellipsis instead of spilling out of the card. The "Title
   lines" and "Description lines" controls write these variables on the same
   elements; 0 removes the limit because `-webkit-line-clamp: 0` is invalid and
   falls back to none. The lightbox keeps the full text. */
.ndw-portfolio-card .ndw-portfolio-card__title {
	display: -webkit-box;
	min-height: calc(var(--ndw-portfolio-title-lines, 2) * 1lh);
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ndw-portfolio-title-lines, 2);
	line-clamp: var(--ndw-portfolio-title-lines, 2);
}

.ndw-portfolio-card .ndw-portfolio-card__description {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ndw-portfolio-description-lines, 2);
	line-clamp: var(--ndw-portfolio-description-lines, 2);
}

.ndw-portfolio-card:hover .ndw-portfolio-card__image img {
	scale: 1.035;
}

.ndw-portfolio-card:hover,
.ndw-portfolio-card:focus-within {
	z-index: 2;
	box-shadow: 0 20px 60px rgb(0 0 0 / 8%);
	transform: scale(1.025);
}

/* The lightbox is a native `dialog`. Every user-agent box style has to be reset
   explicitly, because author rules always beat the UA sheet regardless of
   specificity — including the `dialog:not([open]) { display: none }` rule, which
   is why visibility is driven by `[open]` here instead of a blanket `display`. */
.ndw-portfolio-lightbox {
	--ndw-portfolio-lightbox-control-size: 48px;
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	place-items: center;
	width: auto;
	max-width: none;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 28px;
	border: 0;
	overflow: visible;
	background: transparent;
	color: inherit;
}

.ndw-portfolio-lightbox[open] {
	display: grid;
}

/* Our own scrim element is the one exposed to the controls, so the UA backdrop
   must not add a second dark layer on top of it. */
.ndw-portfolio-lightbox::backdrop {
	background: transparent;
}

.ndw-portfolio-lightbox__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: rgb(10 14 18 / 88%);
	cursor: pointer;
}

.ndw-portfolio-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: var(--ndw-portfolio-lightbox-control-size) minmax(0, 980px) var(--ndw-portfolio-lightbox-control-size);
	align-items: center;
	width: min(100%, 1120px);
	max-height: calc(100vh - 56px);
	gap: 18px;
}

.ndw-portfolio-lightbox__figure {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	max-height: calc(100vh - 56px);
	overflow: hidden;
	margin: 0;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 24px 80px rgb(0 0 0 / 35%);
}

.ndw-portfolio-lightbox__image {
	display: block;
	width: 100%;
	max-height: calc(100vh - 250px);
	object-fit: contain;
	background: #111820;
}

.ndw-portfolio-lightbox__image[hidden] {
	display: none;
}

.ndw-portfolio-lightbox__caption {
	padding: 22px 26px 24px;
}

.ndw-portfolio-lightbox__category {
	display: block;
	color: #1f7667;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.ndw-portfolio-lightbox__title {
	margin: 6px 0 0;
	color: #15191e;
	font-size: 24px;
	line-height: 1.2;
}

.ndw-portfolio-lightbox__description {
	margin: 10px 0 0;
	color: #4b5563;
	font-size: 15px;
	line-height: 1.6;
}

/* Two classes on purpose. Elementor's Theme Style writes `.elementor-kit-N button`
   (0,1,1), which outranks a single class and would repaint every button in the
   add-on with the site button background, padding, radius and letter spacing. */
.ndw-portfolio-lightbox .ndw-portfolio-lightbox__close,
.ndw-portfolio-lightbox .ndw-portfolio-lightbox__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ndw-portfolio-lightbox-control-size);
	height: var(--ndw-portfolio-lightbox-control-size);
	padding: 0;
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: 4px;
	background: rgb(15 21 27 / 82%);
	box-shadow: none;
	color: #fff;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.ndw-portfolio-lightbox .ndw-portfolio-lightbox__close {
	position: absolute;
	top: 12px;
	right: 78px;
	z-index: 2;
	font-size: 30px;
}

.ndw-portfolio-lightbox .ndw-portfolio-lightbox__nav {
	font-size: 30px;
}

.ndw-portfolio-lightbox .ndw-portfolio-lightbox__close:hover,
.ndw-portfolio-lightbox .ndw-portfolio-lightbox__nav:hover {
	background: #1f7667;
}

.ndw-portfolio-lightbox__close:focus-visible,
.ndw-portfolio-lightbox__nav:focus-visible,
.ndw-portfolio-lightbox__dialog:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

body.ndw-portfolio-lightbox-open {
	overflow: hidden;
}

@container ndw-portfolio-carousel (width > 1024px) {
	.ndw-portfolio-carousel--desktop-1 .ndw-carousel--portfolio-row-two {
		display: none;
	}
}

@container ndw-portfolio-carousel (max-width: 1024px) {
	.ndw-portfolio-carousel--marquee .ndw-portfolio-card {
		width: 280px;
		height: 220px;
	}

	.ndw-portfolio-carousel--mobile-1 .ndw-carousel--portfolio-row-two {
		display: none;
	}
}

@container ndw-portfolio-carousel (max-width: 767px) {
	.ndw-portfolio-carousel--marquee .ndw-portfolio-card {
		width: 240px;
		height: 200px;
	}

	.ndw-portfolio-lightbox {
		padding: 16px;
	}

	.ndw-portfolio-lightbox__dialog {
		grid-template-columns: 40px minmax(0, 1fr) 40px;
		max-height: calc(100vh - 32px);
		gap: 8px;
	}

	.ndw-portfolio-lightbox__figure {
		max-height: calc(100vh - 32px);
	}

	.ndw-portfolio-lightbox__image {
		max-height: calc(100vh - 230px);
	}

	.ndw-portfolio-lightbox .ndw-portfolio-lightbox__close {
		top: 8px;
		right: 56px;
	}

	.ndw-portfolio-lightbox .ndw-portfolio-lightbox__close,
	.ndw-portfolio-lightbox .ndw-portfolio-lightbox__nav {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ndw-portfolio-carousel--entrance-fade-up,
	.ndw-portfolio-carousel--entrance-fade-in,
	.ndw-portfolio-carousel--entrance-zoom-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ndw-portfolio-card__image img {
		transition: none;
	}

	.ndw-portfolio-card,
	.ndw-portfolio-card__content {
		transition: none;
	}

	.ndw-portfolio-card:hover,
	.ndw-portfolio-card:focus-within,
	.ndw-portfolio-card:hover .ndw-portfolio-card__image img {
		transform: none !important;
		scale: 1 !important;
	}
}

/* There is deliberately no editor-only presentation any more. Until `0.12.10` the
   editor preview rendered the dialog in the flow below the carousel, with the
   backdrop hidden and the image clamped to `max-height: 420px`. That clamp was
   the reason the photo letterboxed in the editor and not on the published page:
   with `object-fit: contain` and a height the frontend never imposes, the picture
   shrank inside a box wider than its own ratio. The editor now uses these exact
   frontend rules, so what you style is what ships. */