/* One minimum dark title area; long titles and editorial heroes grow naturally. */
:root {
	--sj-hero-min-height: 218px;
	--sj-hero-pad-top: 48px;
	--sj-hero-pad-bottom: 56px;
	--sj-hero-breadcrumb-gap: 20px;
}
.sj-page-hero,
.sj-blog .sj-blog-hero,
.elementor :is(.sj-pricing-hero, .sj-about-hero, .sj-home-hero).e-con {
	box-sizing: border-box;
	min-height: var(--sj-hero-min-height);
	padding-block: var(--sj-hero-pad-top) var(--sj-hero-pad-bottom);
	padding-inline: max(var(--sj-site-gutter), calc((100% - var(--sj-site-width)) / 2));
	border-inline: 0;
	border-bottom: 1px solid var(--sj-rule-on-dark);
}
.elementor :is(.sj-pricing-hero, .sj-about-hero, .sj-home-hero).e-con {
	/* A minimum height must not stretch the breadcrumb and title grid rows. */
	align-content: start;
	grid-auto-rows: min-content;
}
.elementor :is(.sj-pricing-hero, .sj-about-hero, .sj-home-heading).e-con { row-gap: var(--sj-hero-breadcrumb-gap); }
.sj-page-hero .sj-page-title,
.sj-pricing-hero .sj-pricing-title .elementor-heading-title {
	margin: 0;
	font-size: clamp(42px, 4.6vw, 68px);
	line-height: 1.08;
}

/* The same native nav is usable directly or inside an editable shortcode widget. */
.sj-hero-breadcrumbs { grid-column: 1 / -1; min-width: 0; width: 100%; margin: 0; }
.sj-breadcrumbs {
	min-width: 0;
	margin: 0 0 var(--sj-hero-breadcrumb-gap);
	color: var(--color-lime);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--font-weight-body);
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
}
.sj-hero-breadcrumbs .sj-breadcrumbs { margin: 0; }
.sj-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sj-breadcrumbs li {
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
.sj-breadcrumbs a,
.sj-breadcrumbs a:is(:visited, :hover, :focus, :focus-visible, :active) {
	color: var(--color-lime);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	overflow-wrap: anywhere;
}
.sj-breadcrumbs a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sj-breadcrumbs [aria-current="page"] { min-width: 0; color: var(--color-offwhite); overflow-wrap: anywhere; }
.sj-breadcrumbs .sj-breadcrumbs-separator { flex: 0 0 auto; color: color-mix(in srgb, var(--color-offwhite) 76%, var(--color-navy)); user-select: none; }

/* Paired hero actions: a white outline primary and a simple underlined link. */
body :is(
	.sj-service-page .sj-page-hero .sj-service-actions > .sj-service-action.button:first-child,
	.elementor .sj-home-page .sj-home-hero-actions > .elementor-widget-button:first-child .elementor-button
) {
	border: 1px solid var(--color-white);
	background: transparent;
	color: var(--color-white);
}
body :is(
	.sj-service-page .sj-page-hero .sj-service-actions > .sj-service-action.button:first-child,
	.elementor .sj-home-page .sj-home-hero-actions > .elementor-widget-button:first-child .elementor-button
):is(:hover, :focus-visible, :active) {
	border-color: var(--color-yellow);
	background-color: var(--color-yellow);
	background-image: var(--sj-citrus-material);
	background-size: var(--sj-citrus-background-size);
	background-repeat: var(--sj-citrus-background-repeat);
	color: var(--color-navy);
}
body :is(
	.sj-service-page .sj-page-hero .sj-service-actions > .sj-service-action.button:nth-child(2),
	.elementor .sj-home-page .sj-home-hero-actions > .elementor-widget-button:nth-child(2) .elementor-button
) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
	box-shadow: none;
	filter: none;
}
body :is(
	.sj-service-page .sj-page-hero .sj-service-actions > .sj-service-action.button:nth-child(2),
	.elementor .sj-home-page .sj-home-hero-actions > .elementor-widget-button:nth-child(2) .elementor-button
):is(:hover, :focus-visible, :active) { color: var(--color-yellow); }
body .elementor .sj-home-page .sj-home-hero-actions > .elementor-widget-button:nth-child(2) .elementor-button-content-wrapper { background: none; }
body .elementor .sj-home-page .sj-home-hero-actions > .elementor-widget-button:nth-child(2) .elementor-button-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
body :is(
	.sj-service-page .sj-page-hero .sj-service-actions > .sj-service-action.button,
	.elementor .sj-home-page .sj-home-hero-actions > .elementor-widget-button .elementor-button
):focus-visible { outline: 2px solid var(--color-white); outline-offset: 4px; box-shadow: none; }
@media (forced-colors: active) {
	body :is(
		.sj-service-page .sj-page-hero .sj-service-actions > .sj-service-action.button:first-child,
		.elementor .sj-home-page .sj-home-hero-actions > .elementor-widget-button:first-child .elementor-button
	):is(:any-link, :hover, :focus-visible, :active) { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
	body :is(
		.sj-service-page .sj-page-hero .sj-service-actions > .sj-service-action.button:nth-child(2),
		.elementor .sj-home-page .sj-home-hero-actions > .elementor-widget-button:nth-child(2) .elementor-button
	):is(:any-link, :hover, :focus-visible, :active) { background: none; color: LinkText; }
}

@media (max-width: 767px) {
	:root {
		--sj-hero-min-height: 196px;
		--sj-hero-pad-top: 28px;
		--sj-hero-pad-bottom: 36px;
		--sj-hero-breadcrumb-gap: 16px;
	}
	.sj-page-hero .sj-page-title,
	.sj-pricing-hero .sj-pricing-title .elementor-heading-title { font-size: clamp(34px, 9vw, 48px); }
}