/**
 * NMO Hero widget — mirrors html/index.html hero layout.
 * Scoped under .elementor-widget-nmo-hero
 *
 * Last updated: 2026-04-09 — Text strip + gold glow live on .nmo-hero__text-bg (sibling of .nmo-hero__left) on desktop; section shell uses --nmo-hero-section-bg. Mobile: .nmo-hero__text-bg hidden; pseudos on .nmo-hero__left. .nmo-hero__left surface transparent so the strip shows through.
 * White stack: widget + .elementor-widget-container + section — beats Elementor kit navy on parent .elementor-element / containers.
 * Full-bleed widths: prefer 100dvw over 100vw to avoid scrollbar-gutter horizontal overflow (theme also uses html { overflow-x: clip }).
 * Gold glow: .nmo-hero__text-bg::after (desktop) or .nmo-hero__left::after (mobile / legacy). Column strip: same (--nmo-hero-column-bg).
 * If .nmo-hero__inner is missing (legacy markup), .nmo-hero becomes the flex row — same as static html/index.html.
 * Full-bleed split (text column + image) to viewport; inner flex row max-width 1280px centered.
 * Content column max-width + copy nudge: Style → Layout, height & spacing (--nmo-hero-content-offset-x/y).
 * Eyebrow spacing/type/icon: Style → Eyebrow.
 * Column order: Content → Split layout (image left / text left).
 * Split row: flex (not grid) on wide viewports. Stack ≤767px: full-width image first, copy block below (typical phones are >360px wide).
 * Split ratio: Content → Split layout → “Text / image width split” (--nmo-hero-text-col).
 * Markup: section.nmo-hero > .nmo-hero__inner > .nmo-hero__text-bg + .nmo-hero__left + .nmo-hero__right; data-nmo-color-theme="light".
 * Column strip / photo seam: Style → Text column colors & shadow (--nmo-hero-column-bg, --nmo-hero-image-seam).
 */

.elementor-widget-nmo-hero.elementor-widget {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
	background-color: #ffffff;
}

.elementor-widget-nmo-hero .elementor-widget-container {
	display: block !important;
	width: 100%;
	max-width: none;
	background-color: #ffffff;
}

.elementor-widget-nmo-hero .nmo-hero.nmo-hero--theme-light,
.elementor-widget-nmo-hero section.nmo-hero.nmo-hero--theme-light {
	background: var(--nmo-hero-section-bg, #ffffff);
}

.elementor-widget-nmo-hero .nmo-hero,
.elementor-widget-nmo-hero section.nmo-hero {
	--nmo-hero-content-max: 1280px;
	--nmo-hero-text-col: 55%;
	--nmo-hero-glow-fade: 65%;
	--nmo-hero-glow-width: 50vw;
	--nmo-hero-glow-width: 50dvw;
	--nmo-hero-section-bg: #ffffff;
	--nmo-hero-text-bg-width-extra: 0px;
	--nmo-hero-content-offset-x: 0px;
	--nmo-hero-content-offset-y: 0px;

	/* Full white preset variables */
	--nmo-hero-column-bg: #ffffff;
	--nmo-hero-image-seam: #ffffff;
	/* Strip is on .nmo-hero__text-bg (desktop) or ::before on .nmo-hero__left (mobile); keep column surface clear */
	--nmo-hero-left-surface: transparent;
	--nmo-hero-glow-color: rgba(200, 146, 42, 0.42);
	--nmo-hero-heading-color: #0b1d3a;
	--nmo-hero-tagline-color: rgba(11, 29, 58, 0.62);
	--nmo-hero-eyebrow-bg: rgba(200, 146, 42, 0.14);
	--nmo-hero-eyebrow-border: rgba(200, 146, 42, 0.45);
	--nmo-hero-eyebrow-color: #0b1d3a;
	--nmo-hero-callout-bg: rgba(11, 29, 58, 0.045);
	--nmo-hero-callout-border: rgba(11, 29, 58, 0.12);
	--nmo-hero-callout-text: rgba(11, 29, 58, 0.78);
	--nmo-hero-callout-strong: #0b1d3a;
	/* Mobile-only (≤767px): bottom fade on stacked image; desktop seam rules use higher specificity without these. */
	--nmo-hero-mobile-overlay-opacity: 1;
	--nmo-hero-mobile-overlay-fade-stop: 48%;
	/* Desktop (split row): horizontal fade on photo toward text column / viewport edges (::before on .nmo-hero__right). */
	--nmo-hero-desktop-side-overlay-opacity: 1;
	--nmo-hero-desktop-side-fade-stop: 32%;

	width: 100%;
	box-sizing: border-box;
	min-height: 100vh;
	overflow-x: visible;
	position: relative;
	background: var(--nmo-hero-section-bg, #ffffff);
}

/*
 * Legacy / static parity: section > .nmo-hero__left + .nmo-hero__right with no .nmo-hero__inner.
 * Without this, only .nmo-hero__inner had flex — missing inner = stacked columns.
 */
.elementor-widget-nmo-hero .nmo-hero:not(:has(.nmo-hero__inner)) {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	max-width: min(100%, var(--nmo-hero-content-max));
	margin-inline: auto;
}

.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start:not(:has(.nmo-hero__inner)) {
	flex-direction: row-reverse;
}

/* Preferred: single inner row; section is a column shell so outer bleeds stay predictable */
.elementor-widget-nmo-hero .nmo-hero:has(> .nmo-hero__inner) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	max-width: none;
	margin-inline: 0;
}

.elementor-widget-nmo-hero .nmo-hero__inner {
	box-sizing: border-box;
	max-width: min(100%, var(--nmo-hero-content-max));
	margin-inline: auto;
	width: 100%;
	min-width: 0;
	min-height: inherit;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	position: relative;
	/* .nmo-hero__text-bg + image bleed extend past gutters; do not clip */
	overflow-x: visible;
}

/*
 * Text column strip + glow layer (out of flex flow). Hidden by default; desktop split only.
 * Width = viewport gutter + text column % + optional --nmo-hero-text-bg-width-extra (Elementor).
 */
.elementor-widget-nmo-hero .nmo-hero__text-bg {
	display: none;
}

/* Image left · text right — same flex row, visual order reversed (no grid placement fights). */
.elementor-widget-nmo-hero .nmo-hero__inner--media-start {
	flex-direction: row-reverse !important;
}

.elementor-widget-nmo-hero .nmo-hero__left,
.elementor-widget-nmo-hero .hero-left {
	position: relative;
	z-index: 1;
	min-width: 0;
	flex: 0 1 var(--nmo-hero-text-col, 55%);
	flex-basis: var(--nmo-hero-text-col, 55%);
	max-width: var(--nmo-hero-text-col, 55%);
	background: var(--nmo-hero-left-surface, transparent);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	padding: 8rem var(--pad-x, clamp(1.25rem, 5vw, 3rem)) 5rem calc(var(--pad-x, clamp(1.25rem, 5vw, 3rem)) + 80px);
}

/* Image left · text right — mirror padding (row-reverse; no grid placement). */
.elementor-widget-nmo-hero .nmo-hero__inner--media-start .nmo-hero__left,
.elementor-widget-nmo-hero .nmo-hero__inner--media-start .hero-left {
	padding: 8rem calc(var(--pad-x, clamp(1.25rem, 5vw, 3rem)) + 80px) 5rem var(--pad-x, clamp(1.25rem, 5vw, 3rem));
}

/*
 * Legacy (no .nmo-hero__inner): strip + glow stay on .nmo-hero__left.
 */
.elementor-widget-nmo-hero .nmo-hero:not(.nmo-hero--media-start):not(:has(.nmo-hero__inner)) .nmo-hero__left::before,
.elementor-widget-nmo-hero .nmo-hero:not(.nmo-hero--media-start):not(:has(.nmo-hero__inner)) .hero-left::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * max(0px, (100vw - var(--nmo-hero-content-max, 1280px)) / 2));
	left: calc(-1 * max(0px, (100dvw - var(--nmo-hero-content-max, 1280px)) / 2));
	right: 0;
	width: auto;
	max-width: none;
	background: var(--nmo-hero-column-bg, #ffffff);
	z-index: 0;
	pointer-events: none;
}

.elementor-widget-nmo-hero .nmo-hero:not(.nmo-hero--media-start):not(:has(.nmo-hero__inner)) .nmo-hero__left::after,
.elementor-widget-nmo-hero .nmo-hero:not(.nmo-hero--media-start):not(:has(.nmo-hero__inner)) .hero-left::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: auto;
	width: var(--nmo-hero-glow-width, 50vw);
	width: var(--nmo-hero-glow-width, 50dvw);
	max-width: var(--nmo-hero-glow-width, 50vw);
	max-width: var(--nmo-hero-glow-width, 50dvw);
	pointer-events: none;
	z-index: 1;
	opacity: 1;
	background: radial-gradient(
		ellipse at 0% 50%,
		var(--nmo-hero-glow-color, rgba(200, 146, 42, 0.42)) 0%,
		transparent var(--nmo-hero-glow-fade, 65%)
	);
}

.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start:not(:has(.nmo-hero__inner)) .nmo-hero__left::before,
.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start:not(:has(.nmo-hero__inner)) .hero-left::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: calc(-1 * max(0px, (100vw - var(--nmo-hero-content-max, 1280px)) / 2));
	right: calc(-1 * max(0px, (100dvw - var(--nmo-hero-content-max, 1280px)) / 2));
	width: auto;
	max-width: none;
	background: var(--nmo-hero-column-bg, #ffffff);
	z-index: 0;
	pointer-events: none;
}

.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start:not(:has(.nmo-hero__inner)) .nmo-hero__left::after,
.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start:not(:has(.nmo-hero__inner)) .hero-left::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	width: var(--nmo-hero-glow-width, 50vw);
	width: var(--nmo-hero-glow-width, 50dvw);
	max-width: var(--nmo-hero-glow-width, 50vw);
	max-width: var(--nmo-hero-glow-width, 50dvw);
	pointer-events: none;
	z-index: 1;
	opacity: 1;
	background: radial-gradient(
		ellipse at 100% 50%,
		var(--nmo-hero-glow-color, rgba(200, 146, 42, 0.42)) 0%,
		transparent var(--nmo-hero-glow-fade, 65%)
	);
}

@media (min-width: 768px) {
	.elementor-widget-nmo-hero .nmo-hero__inner:has(.nmo-hero__text-bg) .nmo-hero__text-bg {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 0;
		pointer-events: none;
	}

	.elementor-widget-nmo-hero .nmo-hero__inner:has(.nmo-hero__text-bg) .nmo-hero__left::before,
	.elementor-widget-nmo-hero .nmo-hero__inner:has(.nmo-hero__text-bg) .hero-left::before,
	.elementor-widget-nmo-hero .nmo-hero__inner:has(.nmo-hero__text-bg) .nmo-hero__left::after,
	.elementor-widget-nmo-hero .nmo-hero__inner:has(.nmo-hero__text-bg) .hero-left::after {
		content: none !important;
		display: none !important;
	}

	.elementor-widget-nmo-hero .nmo-hero__inner:not(.nmo-hero__inner--media-start) .nmo-hero__text-bg {
		left: calc(-1 * max(0px, (100vw - var(--nmo-hero-content-max, 1280px)) / 2));
		left: calc(-1 * max(0px, (100dvw - var(--nmo-hero-content-max, 1280px)) / 2));
		width: calc(max(0px, (100vw - var(--nmo-hero-content-max, 1280px)) / 2) + var(--nmo-hero-text-col, 55%) + var(--nmo-hero-text-bg-width-extra, 0px));
		width: calc(max(0px, (100dvw - var(--nmo-hero-content-max, 1280px)) / 2) + var(--nmo-hero-text-col, 55%) + var(--nmo-hero-text-bg-width-extra, 0px));
	}

	.elementor-widget-nmo-hero .nmo-hero__inner--media-start .nmo-hero__text-bg {
		left: auto;
		right: calc(-1 * max(0px, (100vw - var(--nmo-hero-content-max, 1280px)) / 2));
		right: calc(-1 * max(0px, (100dvw - var(--nmo-hero-content-max, 1280px)) / 2));
		width: calc(max(0px, (100vw - var(--nmo-hero-content-max, 1280px)) / 2) + var(--nmo-hero-text-col, 55%) + var(--nmo-hero-text-bg-width-extra, 0px));
		width: calc(max(0px, (100dvw - var(--nmo-hero-content-max, 1280px)) / 2) + var(--nmo-hero-text-col, 55%) + var(--nmo-hero-text-bg-width-extra, 0px));
	}

	.elementor-widget-nmo-hero .nmo-hero__inner .nmo-hero__text-bg::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--nmo-hero-column-bg, #ffffff);
		z-index: 0;
		pointer-events: none;
	}

	.elementor-widget-nmo-hero .nmo-hero__inner:not(.nmo-hero__inner--media-start) .nmo-hero__text-bg::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: auto;
		width: var(--nmo-hero-glow-width, 50vw);
		width: var(--nmo-hero-glow-width, 50dvw);
		max-width: var(--nmo-hero-glow-width, 50vw);
		max-width: var(--nmo-hero-glow-width, 50dvw);
		pointer-events: none;
		z-index: 1;
		opacity: 1;
		background: radial-gradient(
			ellipse at 0% 50%,
			var(--nmo-hero-glow-color, rgba(200, 146, 42, 0.42)) 0%,
			transparent var(--nmo-hero-glow-fade, 65%)
		);
	}

	.elementor-widget-nmo-hero .nmo-hero__inner--media-start .nmo-hero__text-bg::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: var(--nmo-hero-glow-width, 50vw);
		width: var(--nmo-hero-glow-width, 50dvw);
		max-width: var(--nmo-hero-glow-width, 50vw);
		max-width: var(--nmo-hero-glow-width, 50dvw);
		pointer-events: none;
		z-index: 1;
		opacity: 1;
		background: radial-gradient(
			ellipse at 100% 50%,
			var(--nmo-hero-glow-color, rgba(200, 146, 42, 0.42)) 0%,
			transparent var(--nmo-hero-glow-fade, 65%)
		);
	}
}

/* Beat Elementor Site Settings / Custom CSS that targets pseudo-elements or inherited section backgrounds. */
.elementor-widget-nmo-hero .nmo-hero.nmo-hero--theme-light .nmo-hero__text-bg::before,
.elementor-widget-nmo-hero .nmo-hero.nmo-hero--theme-light .nmo-hero__left::before,
.elementor-widget-nmo-hero .nmo-hero.nmo-hero--theme-light .hero-left::before {
	background: var(--nmo-hero-column-bg, #ffffff) !important;
}

.elementor-widget-nmo-hero .nmo-hero__content,
.elementor-widget-nmo-hero .hero-content {
	max-width: 560px;
	position: relative;
	z-index: 2;
	transform: translate(var(--nmo-hero-content-offset-x, 0px), var(--nmo-hero-content-offset-y, 0px));
}

/* Image fills remaining row width; negative margin bleeds to viewport (avoid width>100% on item — breaks grid/flex rows). */
.elementor-widget-nmo-hero .nmo-hero__right,
.elementor-widget-nmo-hero .hero-right {
	flex: 1 1 0%;
	min-width: 0;
	width: auto;
	margin-right: calc(-1 * max(0px, (100vw - var(--nmo-hero-content-max, 1280px)) / 2));
	margin-right: calc(-1 * max(0px, (100dvw - var(--nmo-hero-content-max, 1280px)) / 2));
	margin-left: 0;
	max-width: none;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

/* Image left: bleed into left viewport margin. */
.elementor-widget-nmo-hero .nmo-hero__inner--media-start .nmo-hero__right,
.elementor-widget-nmo-hero .nmo-hero__inner--media-start .hero-right {
	margin-right: 0;
	margin-left: calc(-1 * max(0px, (100vw - var(--nmo-hero-content-max, 1280px)) / 2));
	margin-left: calc(-1 * max(0px, (100dvw - var(--nmo-hero-content-max, 1280px)) / 2));
}

.elementor-widget-nmo-hero .nmo-hero__inner--media-start .nmo-hero__right::before,
.elementor-widget-nmo-hero .nmo-hero__inner--media-start .hero-right::before {
	background:
		linear-gradient(
			to left,
			var(--nmo-hero-desktop-side-overlay-color, var(--nmo-hero-image-seam, #ffffff)) 0%,
			transparent var(--nmo-hero-desktop-side-fade-stop, 32%)
		),
		linear-gradient(
			to right,
			var(--nmo-hero-desktop-side-overlay-color, var(--nmo-hero-image-seam, #ffffff)) 0%,
			transparent var(--nmo-hero-desktop-side-fade-stop, 32%)
		);
	opacity: var(--nmo-hero-desktop-side-overlay-opacity, 1);
}

.elementor-widget-nmo-hero .nmo-hero__eyebrow,
.elementor-widget-nmo-hero .hero-eyebrow {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--nmo-hero-eyebrow-bg, rgba(200, 146, 42, 0.14));
	border: 1px solid var(--nmo-hero-eyebrow-border, rgba(200, 146, 42, 0.45));
	color: var(--nmo-hero-eyebrow-color, #0b1d3a);
	font-family: var(--font-sans, Inter, system-ui, sans-serif);
	/* Fallbacks until Style → Eyebrow / generated CSS loads */
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	gap: 0.5rem;
	padding: 0.45rem 1rem;
	border-radius: 2px;
	margin-bottom: 1.5rem;
}

.elementor-widget-nmo-hero .nmo-hero__eyebrow > span {
	font-size: inherit;
	line-height: inherit;
}

/* Icon: sane defaults; Style → Eyebrow → Icon size overrides */
.elementor-widget-nmo-hero .nmo-hero__eyebrow .nmo-hero__eyebrow-icon,
.elementor-widget-nmo-hero .nmo-hero__eyebrow .e-font-icon-svg,
.elementor-widget-nmo-hero .nmo-hero__eyebrow svg {
	display: block;
	flex-shrink: 0;
	overflow: visible;
}

.elementor-widget-nmo-hero .nmo-hero__eyebrow i.nmo-hero__eyebrow-icon,
.elementor-widget-nmo-hero .hero-eyebrow i {
	line-height: 1;
}

/* Do not use class "entry-title" on this h1 — Elementor sets h1.entry-title { display: var(--page-title-display) } and hides it when the theme page title is hidden. */
.elementor-widget-nmo-hero .nmo-hero__title,
.elementor-widget-nmo-hero .nmo-hero__content h1.nmo-hero__title {
	display: block;
	color: var(--nmo-hero-heading-color, #0b1d3a);
	margin-bottom: 0.75rem;
	font-family: var(--font-serif, "Playfair Display", Georgia, serif);
	font-size: clamp(2.6rem, 5.5vw, 4.2rem);
	font-weight: 900;
	line-height: 1.15;
}

.elementor-widget-nmo-hero .nmo-hero__title-accent,
.elementor-widget-nmo-hero .nmo-hero__content h1 span {
	color: var(--nmo-hero-heading-accent-color, var(--gold, #c8922a));
}

.elementor-widget-nmo-hero .nmo-hero__tagline,
.elementor-widget-nmo-hero .hero-tagline {
	font-family: var(--font-sans, Inter, system-ui, sans-serif);
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--nmo-hero-tagline-color, rgba(11, 29, 58, 0.62));
	letter-spacing: 0.06em;
	margin-bottom: 2rem;
}

.elementor-widget-nmo-hero .nmo-hero__callout,
.elementor-widget-nmo-hero .hero-book-callout {
	background: var(--nmo-hero-callout-bg, rgba(11, 29, 58, 0.045));
	border: 1px solid var(--nmo-hero-callout-border, rgba(11, 29, 58, 0.12));
	border-left: 3px solid var(--nmo-hero-callout-accent, var(--gold, #c8922a));
	border-radius: 4px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2.25rem;
}

.elementor-widget-nmo-hero .nmo-hero__callout-inner p,
.elementor-widget-nmo-hero .hero-book-callout p {
	color: var(--nmo-hero-callout-text, rgba(11, 29, 58, 0.78));
	font-size: 0.95rem;
	margin: 0;
	line-height: 1.5;
}

.elementor-widget-nmo-hero .nmo-hero__callout-inner strong,
.elementor-widget-nmo-hero .hero-book-callout strong {
	color: var(--nmo-hero-callout-strong, #0b1d3a);
}

.elementor-widget-nmo-hero .nmo-hero__btns,
.elementor-widget-nmo-hero .hero-btns {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Tighter horizontal padding than global nmo-buttons.css (0.85rem 2.25rem) — hero only */
body.elementor-page .elementor-widget-nmo-hero .btn,
body.elementor-editor-active .elementor-widget-nmo-hero .btn,
.elementor-preview .elementor-widget-nmo-hero .btn {
	padding: 0.85rem 1.25rem;
}

.elementor-widget-nmo-hero .nmo-hero__img,
.elementor-widget-nmo-hero .hero-right img {
	width: 100%;
	height: 100%;
	min-width: 0;
	max-width: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 8s ease;
}

.elementor-widget-nmo-hero .nmo-hero__right:hover .nmo-hero__img,
.elementor-widget-nmo-hero .hero-right:hover img {
	transform: scale(1.03);
}

.elementor-widget-nmo-hero .nmo-hero__right::before,
.elementor-widget-nmo-hero .hero-right::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Blend at split (toward text) and at outer viewport edge on wide screens */
	background:
		linear-gradient(
			to right,
			var(--nmo-hero-desktop-side-overlay-color, var(--nmo-hero-image-seam, #ffffff)) 0%,
			transparent var(--nmo-hero-desktop-side-fade-stop, 32%)
		),
		linear-gradient(
			to left,
			var(--nmo-hero-desktop-side-overlay-color, var(--nmo-hero-image-seam, #ffffff)) 0%,
			transparent var(--nmo-hero-desktop-side-fade-stop, 32%)
		);
	opacity: var(--nmo-hero-desktop-side-overlay-opacity, 1);
	z-index: 1;
	pointer-events: none;
}

.elementor-widget-nmo-hero .nmo-hero__img {
	position: relative;
	z-index: 0;
}

/* Softer single-edge fade on the photo (desktop text-left layout). */
.elementor-widget-nmo-hero .nmo-hero:not(.nmo-hero--media-start) .nmo-hero__right::before,
.elementor-widget-nmo-hero .nmo-hero:not(.nmo-hero--media-start) .hero-right::before {
	background: linear-gradient(
		to right,
		var(--nmo-hero-desktop-side-overlay-color, var(--nmo-hero-image-seam, #ffffff)) 0%,
		transparent var(--nmo-hero-desktop-side-fade-stop, 32%)
	);
	opacity: var(--nmo-hero-desktop-side-overlay-opacity, 1);
}

.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start .nmo-hero__right::before,
.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start .hero-right::before,
.elementor-widget-nmo-hero .nmo-hero .nmo-hero__inner--media-start .nmo-hero__right::before,
.elementor-widget-nmo-hero .nmo-hero .nmo-hero__inner--media-start .hero-right::before {
	background:
		linear-gradient(
			to left,
			var(--nmo-hero-desktop-side-overlay-color, var(--nmo-hero-image-seam, #ffffff)) 0%,
			transparent var(--nmo-hero-desktop-side-fade-stop, 32%)
		),
		linear-gradient(
			to right,
			var(--nmo-hero-desktop-side-overlay-color, var(--nmo-hero-image-seam, #ffffff)) 0%,
			transparent var(--nmo-hero-desktop-side-fade-stop, 32%)
		);
	opacity: var(--nmo-hero-desktop-side-overlay-opacity, 1);
}

/* Wide screens: keep split row (Elementor sometimes sets column width 100% — resist below tablet). */
@media (min-width: 768px) {
	.elementor-widget-nmo-hero .nmo-hero:not(:has(.nmo-hero__inner)) {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
	}

	.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start:not(:has(.nmo-hero__inner)) {
		flex-direction: row-reverse !important;
		flex-wrap: nowrap !important;
	}

	.elementor-widget-nmo-hero .nmo-hero__inner {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
	}

	.elementor-widget-nmo-hero .nmo-hero__inner--media-start {
		flex-direction: row-reverse !important;
		flex-wrap: nowrap !important;
	}

	.elementor-widget-nmo-hero .nmo-hero__left,
	.elementor-widget-nmo-hero .hero-left {
		width: auto !important;
	}

	.elementor-widget-nmo-hero .nmo-hero__right,
	.elementor-widget-nmo-hero .hero-right {
		width: auto !important;
		min-width: 0 !important;
	}
}

@media (max-width: 767px) {
	.elementor-widget-nmo-hero .nmo-hero,
	.elementor-widget-nmo-hero section.nmo-hero {
		min-height: 0;
		overflow-x: clip;
	}

	.elementor-widget-nmo-hero .nmo-hero:not(:has(.nmo-hero__inner)) {
		flex-direction: column !important;
		max-width: none;
		margin-inline: 0;
		width: 100%;
	}

	.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start:not(:has(.nmo-hero__inner)) {
		flex-direction: column !important;
	}

	.elementor-widget-nmo-hero .nmo-hero__inner,
	.elementor-widget-nmo-hero .nmo-hero__inner--media-start {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		max-width: none;
		width: 100%;
	}

	.elementor-widget-nmo-hero .nmo-hero__inner .nmo-hero__text-bg {
		display: none !important;
	}

	/* Stacked + inner: strip and glow on .nmo-hero__left (desktop uses .nmo-hero__text-bg instead). */
	.elementor-widget-nmo-hero .nmo-hero__inner .nmo-hero__left::before,
	.elementor-widget-nmo-hero .nmo-hero__inner .hero-left::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		background: var(--nmo-hero-column-bg, #ffffff);
		z-index: 0;
		pointer-events: none;
	}

	.elementor-widget-nmo-hero .nmo-hero__inner:not(.nmo-hero__inner--media-start) .nmo-hero__left::after,
	.elementor-widget-nmo-hero .nmo-hero__inner:not(.nmo-hero__inner--media-start) .hero-left::after {
		content: "";
		position: absolute;
		pointer-events: none;
		z-index: 1;
		opacity: 1;
		background: radial-gradient(
			ellipse at 0% 50%,
			var(--nmo-hero-glow-color, rgba(200, 146, 42, 0.42)) 0%,
			transparent var(--nmo-hero-glow-fade, 65%)
		);
	}

	.elementor-widget-nmo-hero .nmo-hero__inner--media-start .nmo-hero__left::after,
	.elementor-widget-nmo-hero .nmo-hero__inner--media-start .hero-left::after {
		content: "";
		position: absolute;
		pointer-events: none;
		z-index: 1;
		opacity: 1;
		background: radial-gradient(
			ellipse at 100% 50%,
			var(--nmo-hero-glow-color, rgba(200, 146, 42, 0.42)) 0%,
			transparent var(--nmo-hero-glow-fade, 65%)
		);
	}

	.elementor-widget-nmo-hero .nmo-hero__left::before,
	.elementor-widget-nmo-hero .hero-left::before {
		left: 0;
		right: auto;
		width: 100%;
		max-width: none;
	}

	.elementor-widget-nmo-hero .nmo-hero__inner--media-start .nmo-hero__left::before,
	.elementor-widget-nmo-hero .nmo-hero__inner--media-start .hero-left::before {
		left: 0;
		right: auto;
		width: 100%;
		max-width: none;
	}

	/* Stacked: glow covers full text column */
	.elementor-widget-nmo-hero .nmo-hero__left::after,
	.elementor-widget-nmo-hero .hero-left::after {
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
	}

	.elementor-widget-nmo-hero .nmo-hero__left,
	.elementor-widget-nmo-hero .hero-left {
		flex: none;
		flex-basis: auto;
		width: 100%;
		max-width: none;
		padding: 2.5rem var(--pad-x, clamp(1.25rem, 5vw, 3rem)) 3.5rem;
		order: 2;
	}

	.elementor-widget-nmo-hero .nmo-hero__inner--media-start .nmo-hero__left,
	.elementor-widget-nmo-hero .nmo-hero__inner--media-start .hero-left {
		padding: 2.5rem var(--pad-x, clamp(1.25rem, 5vw, 3rem)) 3.5rem;
	}

	/* Image first, full viewport width; tall band so the portrait fills the top “whole space”. */
	.elementor-widget-nmo-hero .nmo-hero__right,
	.elementor-widget-nmo-hero .hero-right {
		flex: none;
		flex-basis: auto;
		margin-right: 0 !important;
		margin-left: 0 !important;
		order: 1;
		position: relative;
		overflow: hidden;
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
		height: clamp(320px, 62vh, 560px);
		min-height: clamp(320px, 62vh, 560px);
		align-self: stretch;
	}

	.elementor-widget-nmo-hero .nmo-hero__img,
	.elementor-widget-nmo-hero .hero-right img {
		display: block;
		width: 100%;
		height: 100%;
		min-height: 0;
		object-fit: cover;
		/* Default focal point when Elementor has no mobile rule; desktop still uses Style → Object position. */
		object-position: center center;
	}

	/*
	 * Must match desktop ::before specificity or the horizontal “seam” gradients win → looks like a shadow on the side on mobile.
	 */
	.elementor-widget-nmo-hero .nmo-hero:not(.nmo-hero--media-start) .nmo-hero__right::before,
	.elementor-widget-nmo-hero .nmo-hero:not(.nmo-hero--media-start) .hero-right::before,
	.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start .nmo-hero__right::before,
	.elementor-widget-nmo-hero .nmo-hero.nmo-hero--media-start .hero-right::before,
	.elementor-widget-nmo-hero .nmo-hero .nmo-hero__inner--media-start .nmo-hero__right::before,
	.elementor-widget-nmo-hero .nmo-hero .nmo-hero__inner--media-start .hero-right::before {
		background: linear-gradient(
			to top,
			var(--nmo-hero-mobile-overlay-color, var(--nmo-hero-image-seam, #ffffff)) 0%,
			transparent var(--nmo-hero-mobile-overlay-fade-stop, 48%)
		);
		opacity: var(--nmo-hero-mobile-overlay-opacity, 1);
	}

	.elementor-widget-nmo-hero .nmo-hero__content,
	.elementor-widget-nmo-hero .hero-content {
		max-width: none;
		/* Offsets still apply via --nmo-hero-content-offset-* on .nmo-hero */
	}
}