/*!
 * All-In-One-Coach — Coach Hero
 */

.aioc-hero {
	--aioc-hero-bg: var(--aioc-cream);
	--aioc-hero-min-h: 100vh;
	--aioc-hero-col: 52%;
	--aioc-hero-gap: 64px;
	--aioc-rail-fill: var(--aioc-maroon);
	--aioc-rail-track: rgba(94, 17, 15, 0.14);

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--aioc-hero-min-h);
	background-color: var(--aioc-hero-bg);
	overflow: clip;
	font-family: var(--aioc-font-body);
}

.aioc-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: var(--aioc-hero-col) 1fr;
	align-items: center;
	gap: var(--aioc-hero-gap);
	width: 100%;
	max-width: var(--aioc-shell-max);
	margin-inline: auto;
	padding: 120px var(--aioc-shell-gut) 56px;
}

.aioc-hero-reverse-yes .aioc-hero__inner {
	grid-template-columns: 1fr var(--aioc-hero-col);
	direction: rtl;
}

.aioc-hero-reverse-yes .aioc-hero__content,
.aioc-hero-reverse-yes .aioc-hero__media {
	direction: ltr;
}

[dir="rtl"] .aioc-hero-reverse-yes .aioc-hero__inner {
	direction: ltr;
}

[dir="rtl"] .aioc-hero-reverse-yes .aioc-hero__content,
[dir="rtl"] .aioc-hero-reverse-yes .aioc-hero__media {
	direction: rtl;
}

/* ------------------------------------------------------------ Atmosphere */

.aioc-hero__aura {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.aioc-hero__orb {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.5;
	will-change: transform;
}

.aioc-hero__orb--a {
	inset-block-start: -18%;
	inset-inline-start: -10%;
	width: 46vw;
	height: 46vw;
	background: radial-gradient(circle, rgba(232, 201, 160, 0.75), transparent 68%);
}

.aioc-hero__orb--b {
	inset-block-end: -24%;
	inset-inline-end: -8%;
	width: 38vw;
	height: 38vw;
	background: radial-gradient(circle, rgba(94, 17, 15, 0.22), transparent 70%);
}

.aioc-hero--grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.32;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- Content */

.aioc-hero__content {
	position: relative;
	z-index: 2;
	max-width: 42em;
}

.aioc-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 26px;
	color: var(--aioc-clay);
	font-family: var(--aioc-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.aioc-hero__eyebrow-dash {
	display: none;
	width: 34px;
	height: 1px;
	background-color: currentColor;
	opacity: 0.5;
	transform-origin: left center;
}

[dir="rtl"] .aioc-hero__eyebrow-dash {
	transform-origin: right center;
}

.aioc-hero__heading {
	margin: 0 0 26px;
	color: var(--aioc-ink);
	font-family: var(--aioc-font-display);
	font-size: clamp(2.6rem, 5.4vw, 5.1rem);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.022em;
}

.aioc-hero__subheading {
	margin: 0 0 24px;
	color: var(--aioc-maroon);
	font-family: var(--aioc-font-body);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.aioc-hero__desc {
	max-width: 46ch;
	margin: 0 0 40px;
	color: #3b3330;
	font-size: clamp(0.98rem, 1.15vw, 1.08rem);
	font-weight: 400;
	line-height: 1.62;
}

.aioc-hero__desc p {
	margin: 0;
}

.aioc-hero__desc p + p {
	margin-block-start: 0.65em;
}

.aioc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

/* ----------------------------------------------------------------- Media */

.aioc-hero__media {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-inline: 56px;
}

/* The frame is exactly the size of the portrait, so the rail and the vertical
   label hang off the picture itself rather than off the column. */
.aioc-hero__frame {
	position: relative;
	width: 100%;
	max-width: 520px;
}

.aioc-hero__figure {
	position: relative;
	width: 100%;
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: 18px;
	overflow: hidden;
	background-color: rgba(94, 17, 15, 0.06);
	will-change: transform;
}

.aioc-hero__figure-mask {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
}

.aioc-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.12);
	will-change: transform;
}

.aioc-hero__sheen {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 42%);
	opacity: 0;
	transition: opacity 0.6s var(--aioc-ease-out);
}

.aioc-hero__figure:hover .aioc-hero__sheen {
	opacity: 1;
}

/* Vertical progress rail sitting just outside the portrait.
   Physical offsets on purpose: these boxes must not be re-mapped by a
   writing-mode change, so RTL is handled by the explicit overrides below. */
.aioc-hero__rail {
	position: absolute;
	left: -30px;
	/* Inset instead of top:50% + translate, so GSAP owns the transform outright
	   and the draw-in animation cannot fight the centring. */
	top: 21%;
	bottom: 21%;
	width: 6px;
	border-radius: 999px;
	background-color: var(--aioc-rail-track);
	overflow: hidden;
}

[dir="rtl"] .aioc-hero__rail {
	left: auto;
	right: -30px;
}

.aioc-hero__rail-fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background-color: var(--aioc-rail-fill);
	transform: scaleY(var(--aioc-p, 0));
	transform-origin: top center;
	will-change: transform;
}

/* Vertical label, just outside the portrait's right edge.
   NOTE: this element sets writing-mode, which re-maps its OWN logical inset
   properties (inset-inline-end would resolve to `bottom` here). Physical
   offsets are therefore required; RTL is mirrored explicitly. */
.aioc-hero__side {
	position: absolute;
	right: -38px;
	top: 50%;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	color: var(--aioc-muted);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
}

[dir="rtl"] .aioc-hero__side {
	right: auto;
	left: -38px;
	writing-mode: vertical-lr;
	transform: translateY(-50%) rotate(180deg);
}

/* ------------------------------------------------------------ Scroll cue */

.aioc-hero__scroll {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: center;
	margin-block-end: 28px;
	padding: 8px 12px;
	color: var(--aioc-muted);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.4s var(--aioc-ease-out);
}

.aioc-hero__scroll:hover {
	color: var(--aioc-maroon);
}

.aioc-hero__scroll-arrow {
	display: inline-flex;
	animation: aioc-bob 2.4s var(--aioc-ease-inout) infinite;
}

@keyframes aioc-bob {
	0%,
	100% {
		transform: translateY(-2px);
		opacity: 0.55;
	}
	50% {
		transform: translateY(3px);
		opacity: 1;
	}
}

/* --------------------------------------------------------------- Tablet */

@media (max-width: 1024px) {
	.aioc-hero__inner,
	.aioc-hero-reverse-yes .aioc-hero__inner {
		grid-template-columns: 1fr;
		direction: inherit;
		gap: 44px;
		padding: 104px 32px 40px;
	}

	.aioc-hero {
		--aioc-hero-min-h: auto;
	}

	.aioc-hero__media {
		justify-content: center;
		padding-inline: 46px;
	}

	.aioc-hero__frame {
		max-width: 460px;
	}

	.aioc-hero__heading {
		font-size: clamp(2.4rem, 7vw, 3.6rem);
	}
}

/* --------------------------------------------------------------- Mobile */

@media (max-width: 767px) {
	.aioc-hero__inner {

		/* The top also has to clear the fixed header, which is 66px tall at
		   this width, or the eyebrow sits underneath it. */
		padding: 76px 10px 10px;
		gap: 36px;
	}

	/* One line on a phone: the tracking and size come down so the whole label
	   fits, rather than breaking after "coaching". */
	.aioc-hero__eyebrow {
		gap: 0;
		font-size: clamp(8px, 2.5vw, 10.5px);
		letter-spacing: 0.08em;
		white-space: nowrap;
	}

	.aioc-hero__desc {
		margin-block-end: 30px;
	}

	.aioc-hero__media {
		padding-inline: 0;
	}

	.aioc-hero__frame {
		max-width: 100%;
	}

	.aioc-hero__rail,
	[dir="rtl"] .aioc-hero__rail {
		left: 0;
		right: auto;
		top: auto;
		bottom: -18px;
		transform: none !important;
		width: 100%;
		height: 4px;
	}

	.aioc-hero__rail-fill {
		transform: scaleX(var(--aioc-p, 0));
		transform-origin: left center;
	}

	[dir="rtl"] .aioc-hero__rail-fill {
		transform-origin: right center;
	}

	.aioc-hero__side {
		position: static;
		display: none;
	}

	.aioc-hero__scroll {
		margin-block-end: 20px;
		font-size: 9px;
		letter-spacing: 0.18em;
	}

	.aioc-hero__orb {
		filter: blur(60px);
		opacity: 0.4;
	}

	.aioc-btn {
		width: 100%;
	}
}

@media (max-width: 380px) {
	.aioc-hero__heading {
		font-size: 2.15rem;
	}
}

/* ==========================================================================
   Motion layer — initial states and mask primitives only.
   No layout, colour, font or spacing is set here; these rules exist purely
   so the intro timeline has somewhere to animate from.
   ========================================================================== */

/* Stand down the generic pre-animation state for the hero: this widget
   defines its own, more specific, starting positions below. */
.aioc-js .aioc-hero.aioc-anim [data-aioc-el] {
	opacity: 1;
}

.aioc-js .aioc-hero .aioc-line {
	overflow: visible;
	padding-block-end: 0;
	margin-block-end: 0;
}

.aioc-js .aioc-hero .aioc-line__inner {
	transform: none;
}

/* Initial states. Scoped to .aioc-js so the hero is fully visible with
   scripting off, and dropped the instant the failsafe adds --shown. */
.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__figure {
	clip-path: inset(100% 0 0 0 round 28px);
}

.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__img {
	transform: scale(1.35);
}

.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__eyebrow {
	transform: translate3d(0, 12px, 0);
}

/* The eyebrow is uncovered by a wipe, so the text starts clipped away
   rather than transparent. */
.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__eyebrow-text {
	clip-path: inset(0 100% 0 0);
}

.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__scroll-arrow {
	transform: scaleY(0);
	opacity: 0;
}

.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__rail {
	transform: scaleY(0);
	transform-origin: 50% 0;
}

/* Held back until SplitText has run, so no unsplit text flashes. */
.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__heading,
.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__subheading,
.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__desc {
	opacity: 0;
}

.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__actions {
	opacity: 0;
	transform: translate3d(0, 16px, 0) scale(0.94);
}

.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__side {
	clip-path: inset(100% 0 0 0);
}

.aioc-js .aioc-hero.aioc-anim:not(.aioc-hero--shown) .aioc-hero__scroll {
	opacity: 0;
}

/* GSAP owns the cue bob and the button micro-interactions now. */
.aioc-js .aioc-hero .aioc-hero__scroll-arrow {
	animation: none;
}

.aioc-js .aioc-hero .aioc-btn__text,
.aioc-js .aioc-hero .aioc-btn__icon {
	transition: none;
}

/* Masks created at runtime around each split line or word. */
.aioc-hero .aioc-mask {
	display: block;
	overflow: hidden;
	/* Descenders (g, y, p) would otherwise be clipped by the mask edge. */
	padding-block-end: 0.15em;
	margin-block-end: -0.15em;
}

.aioc-hero .aioc-mask--word {
	display: inline-block;
	vertical-align: top;
}

.aioc-hero .aioc-split-line {
	display: block;
	transform-origin: 0 0;
}

.aioc-hero .aioc-split-w {
	display: inline-block;
}

/* will-change is carried only while the intro is actually running. */
.aioc-hero.is-animating .aioc-split-line,
.aioc-hero.is-animating .aioc-split-w,
.aioc-hero.is-animating .aioc-hero__img,
.aioc-hero.is-animating .aioc-hero__figure,
.aioc-hero.is-animating .aioc-hero__eyebrow,
.aioc-hero.is-animating .aioc-hero__actions,
.aioc-hero.is-animating .aioc-hero__rail {
	will-change: transform, opacity, clip-path, filter;
}

@media (prefers-reduced-motion: reduce) {
	.aioc-js .aioc-hero .aioc-hero__figure,
	.aioc-js .aioc-hero .aioc-hero__side,
	.aioc-js .aioc-hero .aioc-hero__eyebrow-text {
		clip-path: none;
	}

	.aioc-js .aioc-hero .aioc-hero__img,
	.aioc-js .aioc-hero .aioc-hero__eyebrow,
	.aioc-js .aioc-hero .aioc-hero__actions,
	.aioc-js .aioc-hero .aioc-hero__rail,
	.aioc-js .aioc-hero .aioc-hero__scroll-arrow {
		transform: none;
		opacity: 1;
	}

	.aioc-js .aioc-hero .aioc-hero__heading,
	.aioc-js .aioc-hero .aioc-hero__subheading,
	.aioc-js .aioc-hero .aioc-hero__desc,
	.aioc-js .aioc-hero .aioc-hero__scroll {
		opacity: 1;
		filter: none;
	}

	.aioc-hero .aioc-mask {
		padding-block-end: 0;
		margin-block-end: 0;
	}
}