/* Page banners (TLH_SEO_Hero): one height, one title position and size, breadcrumbs inside.
   The same measures are used by the Spark banner (tlh-spark/assets/hub.css): keep them in sync. */
:root {
	--tlh-hero-under: 144px;  /* the part of the banner that runs under the header (the containers' negative top margin) */
	--tlh-hero-h: 700px;      /* total banner height */
	--tlh-hero-clear: 64px;   /* room for the breadcrumbs above the centred content */
	--tlh-hero-fs: 40px;
	--tlh-hero-fade: 77px;    /* navy to white fade with the arrow */
}
@media (max-width: 1024px) {
	:root { --tlh-hero-under: 82px; --tlh-hero-h: 560px; --tlh-hero-clear: 56px; --tlh-hero-fs: 34px; }
}
@media (max-width: 767px) {
	:root { --tlh-hero-under: 39px; --tlh-hero-h: 400px; --tlh-hero-clear: 44px; --tlh-hero-fs: 26px; }
}

.tlh-hero { position: relative !important; min-height: var(--tlh-hero-h) !important; }
.tlh-hero > .elementor-container { min-height: var(--tlh-hero-h) !important; }
.tlh-hero > .e-con,
.tlh-hero > .elementor-container,
.tlh-hero > .elementor-container > .elementor-column,
.tlh-hero > .elementor-container > .elementor-column > .elementor-widget-wrap { position: static !important; }

/* The column that holds the title: content centred between the breadcrumbs and the fade */
.tlh-hero > .e-con,
.tlh-hero > .elementor-container > .elementor-column > .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
	min-height: var(--tlh-hero-h) !important;
	padding: calc(var(--tlh-hero-under) + var(--tlh-hero-clear)) 20px calc(var(--tlh-hero-fade) + var(--tlh-hero-clear)) !important;
	box-sizing: border-box !important;
	gap: 20px !important;
}

/* The title */
.tlh-hero .elementor-widget-heading { width: 100% !important; max-width: 1180px; margin: 0 !important; flex: 0 0 auto !important; }
.tlh-hero .elementor-widget-heading > .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
.tlh-hero .elementor-widget-heading .elementor-heading-title {
	font-family: "Shippori Mincho B1", "Shippori Mincho", Georgia, serif !important;
	font-size: var(--tlh-hero-fs) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: #fff !important;
}

/* The fade with the arrow sits on the bottom edge */
.tlh-hero .elementor-widget-icon:last-child { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; z-index: 2; }
.tlh-hero .elementor-widget-icon:last-child > .elementor-widget-container { margin: 0 !important; }

/* Breadcrumbs in the banner */
.tlh-hero__crumbs {
	position: absolute; z-index: 3;
	top: calc(var(--tlh-hero-under) + 22px);
	left: max(20px, calc((100% - 1180px) / 2 + 20px));
	right: 20px;
	margin: 0; text-align: left;
	font-family: "Shippori Mincho", Georgia, serif; font-size: 12px; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
 text-shadow: 0 1px 3px rgba(0, 0, 0, .55);}
.tlh-hero__crumbs a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tlh-hero__crumbs a:hover { color: #FE5000 !important; }
.tlh-hero__crumbs span[aria-hidden] { color: rgba(255, 255, 255, .55); margin: 0 6px; }
@media (max-width: 767px) {
	.tlh-hero__crumbs { left: 16px; top: calc(var(--tlh-hero-under) + 14px); font-size: 11px; letter-spacing: 1.5px; }
}