.base-feature-header {
	--base-feature-header-line-gap: 20px;
	--base-feature-header-line-width: 1fr;
	display: block;
	width: 100%;
	margin-inline: auto;
	color: #1a2b6b;
}

.base-feature-header,
.base-feature-header * {
	box-sizing: border-box;
}

.base-feature-header__row {
	display: grid;
	grid-template-columns: minmax(24px, var(--base-feature-header-line-width)) minmax(0, fit-content(100%)) minmax(24px, var(--base-feature-header-line-width));
	align-items: center;
	gap: var(--base-feature-header-line-gap);
	width: 100%;
}

.base-feature-header__content {
	min-width: 0;
	max-width: 100%;
	justify-self: center;
}

.base-feature-header__line {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 999px;
	background: #d13e43;
}

.base-feature-header--line-left .base-feature-header__row {
	grid-template-columns: minmax(24px, var(--base-feature-header-line-width)) minmax(0, fit-content(100%));
}

.base-feature-header--line-right .base-feature-header__row {
	grid-template-columns: minmax(0, fit-content(100%)) minmax(24px, var(--base-feature-header-line-width));
}

.base-feature-header--line-none .base-feature-header__row {
	display: block;
}

.base-feature-header--line-left .base-feature-header__line--right,
.base-feature-header--line-right .base-feature-header__line--left,
.base-feature-header--line-none .base-feature-header__line {
	display: none;
}

.base-feature-header__eyebrow {
	margin: 0 0 10px;
	color: #d13e43;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.base-feature-header__title {
	margin: 0;
	color: #1a2b6b;
	font-size: clamp(2rem, 4.6vw, 4.5rem);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 0.98;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
	text-wrap: balance;
}

.base-feature-header__description {
	max-width: 720px;
	margin: 22px auto 0;
	color: #2f3555;
	font-size: 1.05rem;
	line-height: 1.65;
}

.base-feature-header__description p {
	margin: 0;
}

.base-feature-header__description p + p {
	margin-top: 0.85em;
}

.base-feature-header--align-left .base-feature-header__description {
	margin-left: 0;
}

.base-feature-header--align-right .base-feature-header__description {
	margin-right: 0;
}

@media (max-width: 767px) {
	.base-feature-header__row {
		grid-template-columns: minmax(18px, 0.28fr) minmax(0, 1fr) minmax(18px, 0.28fr);
		gap: min(var(--base-feature-header-line-gap), 14px);
	}

	.base-feature-header--line-left .base-feature-header__row {
		grid-template-columns: minmax(18px, 0.28fr) minmax(0, 1fr);
	}

	.base-feature-header--line-right .base-feature-header__row {
		grid-template-columns: minmax(0, 1fr) minmax(18px, 0.28fr);
	}

	.base-feature-header__title {
		font-size: clamp(1.9rem, 10vw, 3.25rem);
		line-height: 1.02;
		letter-spacing: -0.04em;
	}
}

@media (max-width: 560px) {
	.base-feature-header__row,
	.base-feature-header--line-left .base-feature-header__row,
	.base-feature-header--line-right .base-feature-header__row {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.base-feature-header__line {
		width: 44px;
	}

	.base-feature-header--align-center .base-feature-header__line {
		justify-self: center;
	}

	.base-feature-header--align-left .base-feature-header__line {
		justify-self: start;
	}

	.base-feature-header--align-right .base-feature-header__line {
		justify-self: end;
	}

	.base-feature-header__line--right {
		display: none;
	}

	.base-feature-header__title {
		font-size: clamp(1.75rem, 12vw, 2.75rem);
	}
}

/*
 * Back-compat for the live feature header renderer.
 * Some saved Elementor instances still output the earlier .base-fh markup and
 * expose their line controls through these CSS variables.
 */
.base-fh {
	--base-fh-gap: 16px;
	--base-fh-line-width: 50px;
	--base-fh-line-height: 3px;
	--base-fh-line-radius: 999px;
	--base-fh-line-color: #d13e43;
	--base-fh-grad-start: #d13e43;
	--base-fh-grad-end: #273d8f;
	--base-fh-line-offset-y: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--base-fh-gap);
	width: 100%;
	max-width: 100%;
	color: #1a2b6b;
	text-align: center;
}

.base-fh,
.base-fh * {
	box-sizing: border-box;
}

.base-fh__title {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	color: inherit;
	font-size: clamp(1rem, 2vw, 1.25rem);
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.base-fh__line {
	display: block;
	flex: 0 1 var(--base-fh-line-width);
	width: var(--base-fh-line-width);
	max-width: 100%;
	height: var(--base-fh-line-height);
	border-radius: var(--base-fh-line-radius);
	background: var(--base-fh-line-color);
	transform: translateY(var(--base-fh-line-offset-y));
}

.base-fh--line-gradient .base-fh__line {
	background: linear-gradient(90deg, var(--base-fh-grad-start), var(--base-fh-grad-end));
}

.base-fh--line-solid .base-fh__line {
	background: var(--base-fh-line-color);
}

.base-fh--left {
	justify-content: flex-start;
	text-align: left;
}

.base-fh--center {
	justify-content: center;
	text-align: center;
}

.base-fh--right {
	justify-content: flex-end;
	text-align: right;
}

.base-fh--line-side-left .base-fh__line--after,
.base-fh--line-side-right .base-fh__line--before,
.base-fh:not(.base-fh--has-line) .base-fh__line {
	display: none;
}

@media (max-width: 767px) {
	.base-fh {
		gap: min(var(--base-fh-gap), 12px);
	}

	.base-fh__line {
		flex-basis: min(var(--base-fh-line-width), 44px);
		width: min(var(--base-fh-line-width), 44px);
	}
}

@media (max-width: 420px) {
	.base-fh {
		flex-wrap: wrap;
	}

	.base-fh__line {
		flex-basis: 36px;
		width: 36px;
	}
}
