blur/**
 * CTA Module
 * Card style (default): coloured banner card (Blue or Orange), bold header,
 * regular white body content, right-aligned "Read more" arrow CTA. On the
 * Orange variant the CTA icon switches to white for contrast (orange-on-orange
 * is invisible).
 * Bar style: full-bleed, edge-to-edge slim bar — header + content run inline,
 * white button with a text + circle-arrow icon on the right.
 */

/* ===========================
   # Section
=========================== */

.cta-module {
	padding: 80px 0;
}
.cta-module--card {padding:80px 100px}
.cta-module--bar {
	padding: 0;
}
.cta-module--card .container {
  max-width: 1290px !important;
  margin: auto;
}

/* ===========================
   # Box
=========================== */

.cta-module__box {
	padding: 40px 48px;
	display: flex;
	flex-direction: column;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cta-module__box--blue {
	background-color: var(--nec-blue, #1414A0);
	background-image: url(../../../img/bg-blue.svg);
}

.cta-module__box--orange {
	background-color: var(--nec-orange, #EB6E00);
	background-image: url(../../../img/contact_orange.svg);
}

.cta-module__box--grey {
	background-color: var(--nec-light-grey, #f5f5f6);
	background-image: url(../../../img/contact_grey.svg);
}

/* Custom uploaded background image overrides the default pattern and adds
   a dark overlay so light text stays legible over photographic content. */
.cta-module__box--has-image {
	position: relative;
	background-blend-mode: normal;
}

.cta-module__box--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.cta-module__box--has-image > * {
	position: relative;
	z-index: 1;
}




/* ===========================
   # Header
=========================== */

.cta-module__header {
	margin: 0 0 12px;
	color: var(--nec-white, #fff);
	font-family: var(--nec-font);
	font-size: clamp(1.375rem, calc(1.25rem + 0.7vw), 1.75rem);
	font-weight: 5;
	line-height: 1.3;
	max-width: 46ch;
}

/* ===========================
   # Content
=========================== */

.cta-module__content {
	color: var(--nec-white, #fff);
	font-size: 0.9375rem;
	line-height: 1.6;
	max-width: 60ch;
}

.cta-module__content p:first-child {
	margin-top: 0;
}

.cta-module__content p:last-child {
	margin-bottom: 0;
}

/* ===========================
   # CTA — right-aligned
=========================== */

.cta-module__cta-wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: 28px;
}

.cta-module__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--nec-white, #fff);
	font-family: var(--nec-font);
	font-size: clamp(0.9375rem, calc(0.894rem + 0.188vw), 1.0625rem);
	font-weight: 500;
	text-decoration: none;
}

.cta-module__cta:hover,
.cta-module__cta:focus-visible {
	color: var(--nec-white, #fff);
	outline: none;
	text-decoration: none;
}

.cta-module__cta-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.cta-module__cta:hover .cta-module__cta-icon,
.cta-module__cta:focus-visible .cta-module__cta-icon {
	transform: translateX(5px);
}

.cta-module__cta-icon svg {
	width: 34px;
	height: 34px;
	color: var(--nec-orange, #EB6E00);
}

/* Orange background: switch the icon to white so it stays visible. */
.cta-module__box--orange .cta-module__cta-icon svg {
	color: var(--nec-white, #fff);
}

/* Grey background: light bg needs dark text instead of the white default. */
.cta-module__box--grey .cta-module__header,
.cta-module__box--grey .cta-module__content,
.cta-module__box--grey .cta-module__cta,
.cta-module__box--grey .cta-module__cta:hover,
.cta-module__box--grey .cta-module__cta:focus-visible {
	color: var(--nec-grey);
}

/* With an uploaded photo behind it, keep text white (over the dark overlay)
   even on the Grey variant, where the default is dark-on-light. */
.cta-module__box--has-image.cta-module__box--grey .cta-module__header,
.cta-module__box--has-image.cta-module__box--grey .cta-module__content,
.cta-module__box--has-image.cta-module__box--grey .cta-module__cta,
.cta-module__box--has-image.cta-module__box--grey .cta-module__cta:hover,
.cta-module__box--has-image.cta-module__box--grey .cta-module__cta:focus-visible {
	color: var(--nec-white, #fff);
}

/* ===========================
   # Bar style — full-bleed, edge-to-edge
=========================== */

.cta-module__bar {
	width: 100%;
	padding: 22px 0;
}

.cta-module__bar--blue {
	background: var(--nec-blue, #1414A0);
}

.cta-module__bar--orange {
	background: var(--nec-orange, #EB6E00);
}

.cta-module__bar--grey {
	background: var(--nec-light-grey, #f5f5f6);
}

/* Custom uploaded background image overrides the flat colour and adds a
   dark overlay so light text stays legible over photographic content. */
.cta-module__bar--has-image {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cta-module__bar--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.cta-module__bar--has-image .container {
	position: relative;
	z-index: 1;
}

.cta-module__bar--has-image.cta-module__bar--grey .cta-module__bar-text,
.cta-module__bar--has-image.cta-module__bar--grey .cta-module__bar-text p {
	color: var(--nec-white, #fff);
}

.cta-module__bar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.cta-module__bar-text {
	color: var(--nec-white, #fff);
	font-family: var(--nec-font);
	font-size: 0.9375rem;
	line-height: 1.5;
}
.cta-module__bar-text p {color: var(--nec-white, #fff);font-size:24px;line-height:1.5;margin:0;}

.cta-module__bar-text .cta-module__bar-header p {}
.cta-module__bar-text .cta-module__bar-content p {font-size: 0.9375rem; line-height: 1.6;}
/* Grey background: light bg needs dark text instead of the white default. */
.cta-module__bar--grey .cta-module__bar-text,
.cta-module__bar--grey .cta-module__bar-text p {
	color: var(--nec-grey);
}

.cta-module__bar-header {
	font-weight: 500;
}

/* Content is wysiwyg output (wrapped in <p>) — force it inline so it runs
   on the same line as the header rather than wrapping to a new one. */
.cta-module__bar-content,
.cta-module__bar-content p {
	display: inline;
	margin: 0;
}

.cta-module__bar-content::before {
	content: ' ';
}

.cta-module__bar-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--nec-white, #fff);
	color: var(--nec-grey);
	border-radius: 6px;
	padding: 10px 16px;
	font-family: var(--nec-font);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: filter 0.2s ease;
}

.cta-module__bar-btn:hover,
.cta-module__bar-btn:focus-visible {
	filter: brightness(0.96);
	color: var(--nec-grey);
	text-decoration: none;
	outline: none;
}

.cta-module__bar-btn-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.cta-module__bar-btn:hover .cta-module__bar-btn-icon,
.cta-module__bar-btn:focus-visible .cta-module__bar-btn-icon {
	transform: translateX(4px);
}

.cta-module__bar-btn-icon svg {
	width: 26px;
	height: 26px;
	color: var(--nec-orange, #EB6E00);
}



.cta-module--card .cta-module__box--grey .cta-module__header p {color: var(--nec-grey);font-size:34px;line-height:44px;margin:0;}
.cta-module--card .cta-module__box--grey .cta-module__content p,
.cta-module--card .cta-module__box--grey .cta-module__cta {color: var(--nec-grey);}

.cta-module--card .cta-module__box--orange .cta-module__header p {color: var(--nec-white, #fff);font-size:34px;line-height:44px;margin:0;}
.cta-module--card .cta-module__box--orange .cta-module__content p {color: var(--nec-white, #fff);}

.cta-module--card .cta-module__box--blue .cta-module__header p {color: var(--nec-white, #fff);font-size:34px;line-height:44px;margin:0;}
.cta-module--card .cta-module__box--blue .cta-module__content p {color: var(--nec-white, #fff);}

.cta-module--card .cta-module__box--orange .cta-module__cta-icon svg ,
.cta-module--card .cta-module__box--blue .cta-module__cta-icon svg {
  color: var(--nec-white, #fff);
}
.cta-module--card .cta-module__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--nec-white, #fff);
	font-family: var(--nec-font);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
}

/* ===========================
   # Responsive — 1280px
=========================== */

@media (max-width: 1280px) {
	.cta-module__box {
		padding: 32px 40px;
	}
}

/* ===========================
   # Responsive — 991px
=========================== */

@media (max-width: 991px) {
	.cta-module {
		padding: 40px 0;
	}

	.cta-module__box {
		padding: 28px 32px;
	}

	.cta-module__header {
		max-width: none;
	}

	.cta-module__content {
		max-width: none;
	}
}

/* ===========================
   # Responsive — 599px
=========================== */

@media (max-width: 599px) {
	.cta-module {
		padding: 32px 0;
	}

	.cta-module__box {
		padding: 24px 24px;
	}

	.cta-module__cta-wrap {
		margin-top: 20px;
	}

	.cta-module__bar {
		padding: 20px 0;
	}

	.cta-module__bar-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.cta-module__bar-btn {
		align-self: flex-start;
	}
}