#site-header[data-theme="light"] .landing-header-nav a {
	color: var(--color-white);
	transition: color 0.2s ease;
}

/* ---------------------------------------------------------------------------
   Large logo intro
   At the top of the page the logo is oversized and the bar is transparent; as
   the visitor scrolls, the logo scales down, the bar chrome fades in and the
   nav + CTA reveal — collapsing into the standard compact header.

   Progress is expressed through a single custom property (--lh-progress, 0→1)
   so one visual mapping is driven two ways: a CSS scroll timeline where
   supported, and module.js as a fallback (Firefox). The nav/CTA reveal is a
   discrete class toggle (module.js) so hidden controls stay out of the tab
   order for accessibility. Reduced-motion snaps straight to the compact state.
--------------------------------------------------------------------------- */
@property --lh-progress {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

/* Bar chrome fades in with progress. Id + class beats the theme bg/border
   utilities so the intro can start fully transparent over the hero. */
#site-header.landing-header--large-intro {
	background-color: color-mix(in srgb, var(--color-off-white) calc(80% * var(--lh-progress)), transparent);
	border-bottom-color: color-mix(in srgb, var(--color-black) calc(40% * var(--lh-progress)), transparent);
}

/* Bar height: 58px → 90px (mobile), 80px → 120px (desktop). */
#site-header.landing-header--large-intro .landing-header__bar {
	height: calc(3.625rem + 2rem * (1 - var(--lh-progress)));
}

/* Logo scales down toward its compact size, anchored to its left edge. */
#site-header.landing-header--large-intro .landing-header__logo {
	transform-origin: left center;
	transform: scale(calc(1.2 + 0.4 * (1 - var(--lh-progress))));
}

@media (min-width: 992px) {
	#site-header.landing-header--large-intro .landing-header__bar {
		height: calc(5rem + 2.5rem * (1 - var(--lh-progress)));
	}

	#site-header.landing-header--large-intro .landing-header__logo {
		transform: scale(calc(1.2 + 1.0 * (1 - var(--lh-progress))));
	}
}

/* Nav + CTA stay hidden (and non-focusable) until the header collapses. */
#site-header.landing-header--large-intro .landing-header__reveal {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

#site-header.landing-header--large-intro.is-collapsed .landing-header__reveal {
	opacity: 1;
	visibility: visible;
}

/* Native scroll-driven scrub where supported (Chrome/Edge 115+, Safari 26+).
   Firefox falls back to module.js driving --lh-progress on scroll.
   Timeline + range declared after the shorthand so it isn't reset. */
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
	@media (prefers-reduced-motion: no-preference) {
		#site-header.landing-header--large-intro {
			animation: lh-progress auto linear both;
			animation-timeline: scroll(root);
			animation-range: 0 150px;
		}
	}
}

@keyframes lh-progress {
	to {
		--lh-progress: 1;
	}
}

/* Reduced-motion: no scrub — rest in the compact state immediately. */
@media (prefers-reduced-motion: reduce) {
	#site-header.landing-header--large-intro {
		--lh-progress: 1;
	}

	#site-header.landing-header--large-intro .landing-header__reveal {
		transition: none;
	}
}

/* Logo image invert — opt-in via the "Invert logo on dark sections" toggle.
   Mirrors the SVG-path-fill swap used for the fallback BetterUp logo so an
   uploaded monochrome logo flips between black and white as the header
   crosses dark and light sections. */
.logo-image-invert {
	transition: filter 0.2s ease;
}

#site-header[data-theme="light"] .logo-image-invert,
body:not(.js-header-theme-init):has(.opaque-navigation) .logo-image-invert {
	filter: invert(1);
}

.landing-header .header-ctas .button--outline-black,
.landing-header .header-ctas .hs-button.button--outline-black {
	--btn-bg:
		linear-gradient(
				90deg,
				var(--color-black) 0%,
				var(--color-black) 50%,
				#2F2F2F 75%,
				#1B1818 100%
			)
			var(--x) / 200%,
		var(--color-black);
	--btn-border: transparent;
	--btn-text: var(--color-white);
	color: var(--btn-text);
}

.landing-header .header-ctas .button--outline-black:hover,
.landing-header .header-ctas .hs-button.button--outline-black:hover {
	--x: 99%;
	--btn-border: transparent;
	--btn-text: var(--color-white);
}

.landing-header .header-ctas .button--outline-black:active,
.landing-header .header-ctas .hs-button.button--outline-black:active {
	--x: 99%;
	--btn-border: transparent;
	--btn-text: var(--color-white);
}