/*
 * Brandlift Capitalize Hero
 *
 * Every setting is a custom property on .clh, so it can be tuned per
 * breakpoint from the Elementor widget or from theme CSS.
 */
.clh {
	--clh-pin: 110;            /* extra scroll (in vh) the hero stays pinned for */
	--clh-spread: 150;         /* % of stage width between first & last letter at full spread */
	--clh-fade-start: 25;      /* % into the timeline where fading begins */
	--clh-parallax: 80;        /* image travel as % of letter height, at speed 1 */
	--clh-grow: 135;           /* word size at the end of the scroll, % of its starting size */
	--clh-width: 84;           /* % of stage width the word fills at rest */
	--clh-max-size: 360;       /* max font size, px */
	--clh-max-height: 60;      /* max letter height, % of stage height */
	--clh-tracking: 0.02em;
	--clh-stroke-width: 3px;
	--clh-stroke-color: #ff5921;
	--clh-outline-x: -0.0234em;  /* outline offset from the image fill: */
	--clh-outline-y: 0.03125em;  /* 6px left, 8px down at 256px, as in the original */
	--clh-bg: #fff;
	--clh-reveal: 35;          /* % at the end of the effect during which the next section rises underneath */
	--clh-z: 2;                /* keeps the fading letters above the incoming section */
	--clh-overlap: calc(var(--clh-pin) * var(--clh-reveal) / 100 * 1vh);

	height: calc(100vh + var(--clh-pin) * 1vh);
	height: calc(100svh + var(--clh-pin) * 1vh);
	/* Pull the next section up so it scrolls in under the last part of the fade. */
	margin-bottom: calc(-1 * var(--clh-overlap));
	/* Background stops where the overlap begins, so it can never cover the incoming section. */
	background: linear-gradient(var(--clh-bg), var(--clh-bg)) top / 100% calc(100% - var(--clh-overlap)) no-repeat;
}

.clh__stage {
	position: -webkit-sticky;
	position: sticky;
	z-index: var(--clh-z);
	top: 0;
	pointer-events: none; /* never blocks links in the section scrolling up beneath it */
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Stay hidden until JS has fitted the word; show anyway after 2.5s without JS. */
	opacity: 0;
	animation: clh-show 0.01s 2.5s forwards;
}

.clh.is-ready .clh__stage {
	animation: clh-show 0.5s ease-out forwards;
}

@keyframes clh-show {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Scoped under .clh so theme/kit heading rules (e.g. ".elementor-kit-1 h1")
   can't leak in. A bold weight in particular makes the browser synthesize
   bold on this single-weight face, which renders the outline as a thick band. */
.clh .clh__word {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	font-family: Featherweight, "League Gothic", "Oswald", Impact, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(64px, 26vw, 360px);
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--clh-stroke-color);
}

.clh__seg,
.clh__char,
.clh__glyph {
	display: inline-block;
}

.clh__char {
	position: relative;
	margin: 0 calc(var(--clh-tracking) / 2);
}

.clh .clh__glyph {
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: transparent;
	-webkit-text-fill-color: transparent;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
}

/*
 * The orange outline is its own layer, nudged off the image-filled letter.
 * It hangs off .clh__char (a sibling of the glyph, not a child) because
 * background-clip:text would otherwise paint the image through it too.
 */
.clh .clh__char::after {
	content: attr(data-char);
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(var(--clh-outline-x), var(--clh-outline-y));
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: var(--clh-stroke-width) var(--clh-stroke-color);
	pointer-events: none;
}

/* Without JS each pair is still filled edge to edge with its own image. */
.clh:not(.is-ready) .clh__seg {
	background: var(--clh-img) center / cover no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
}

.clh:not(.is-ready) .clh__char::after {
	display: none;
}

.clh__probe {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: baseline;
}

.clh__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	.clh {
		--clh-pin: 75;
		--clh-spread: 170;
		--clh-grow: 125;
		--clh-width: 92;
		--clh-stroke-width: 1.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.clh {
		--clh-reveal: 0;
		height: auto;
	}
	.clh__stage {
		position: relative;
		height: 80vh;
		height: 80svh;
	}
}