/*!
 * All-In-One-Coach — Coach Footer
 * Universal closing panel: closing statement, divider, brand and contact.
 * Logical properties throughout, so RTL is a direction flip, not a rewrite.
 */

.aioc-footer {
	--aioc-footer-bg: #4d0f0d;
	--aioc-footer-fg: #f3e9de;
	--aioc-footer-muted: #c0a09b;
	--aioc-footer-rule: rgba(243, 233, 222, 0.22);
	--aioc-footer-pad: 120px;
	--aioc-footer-gut: 80px;
	--aioc-footer-mark: 52px;

	position: relative;
	background-color: var(--aioc-footer-bg);
	color: var(--aioc-footer-fg);
	font-family: var(--aioc-font-body);
	overflow: clip;
}

.aioc-footer__inner {
	width: 100%;
	max-width: var(--aioc-shell-max);
	margin-inline: auto;
	padding: var(--aioc-footer-pad) var(--aioc-footer-gut, var(--aioc-shell-gut));
}

/* The saved padding is a desktop figure and arrives as an inline custom
   property on the element, which no stylesheet rule can override. So the
   breakpoints cap the resolved padding with min() instead of trying to
   redefine the variable underneath it. */
@media (max-width: 1024px) {
	.aioc-footer__inner {
		padding: min(var(--aioc-footer-pad), 92px) min(var(--aioc-footer-gut), 32px);
	}
}

@media (max-width: 767px) {
	.aioc-footer__inner {
		padding: var(--aioc-footer-pad-m, 10px) var(--aioc-footer-gut-m, 10px);
	}
}

/* ------------------------------------------------------- Closing statement */

.aioc-footer__eyebrow {
	margin: 0 0 30px;
	color: var(--aioc-footer-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

.aioc-footer__headline {
	margin: 0 0 22px;
	color: var(--aioc-footer-fg);
	font-family: var(--aioc-font-display);
	font-size: clamp(2.2rem, 4vw, 3.6rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.022em;
}

.aioc-footer__sub {
	margin: 0 0 52px;
	color: var(--aioc-footer-muted);
	font-size: clamp(1.3rem, 2.2vw, 1.95rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.012em;
}

/* The mask carries the panel colour rather than a light shade, so a line
   sitting behind its own mask can never flash pale as it rises. */
.aioc-footer__mask {
	display: block;
	overflow: hidden;
	background-color: var(--aioc-footer-bg);
	padding-block-end: 0.15em;
	margin-block-end: -0.15em;
}

/* Set on the authored mask once SplitText has given every rendered line a
   mask of its own, so the two do not clip each other. */
.aioc-footer__mask--open {
	overflow: visible;
	background-color: transparent;
	padding-block-end: 0;
	margin-block-end: 0;
}

.aioc-footer__line {
	display: block;
	transform-origin: 0 100%;
}

/* ------------------------------------------------------------------ Button */

.aioc-footer__cta-wrap {
	display: flex;
	margin-block-end: 64px;
}

.aioc-footer__cta {
	padding: 24px 36px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* The arrow leaves up-and-right and its double arrives from bottom-left, so
   the glyph reads as travelling through the label rather than nudging. */
.aioc-footer__arrow {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	overflow: hidden;
	line-height: 1;
}

.aioc-footer__arrow-glyph {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: block;
	transition: transform 0.5s var(--aioc-ease-inout);
}

.aioc-footer__arrow-glyph--ghost {
	transform: translate3d(-110%, 110%, 0);
}

/* --------------------------------------------------------- Divider + meta */

.aioc-footer__rule {
	display: block;
	width: 100%;
	height: 1px;
	margin-block-end: 56px;
	background-color: var(--aioc-footer-rule);
	transform-origin: left center;
}

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

.aioc-footer__meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	margin-block-end: 56px;
}

.aioc-footer__brand {
	display: flex;
	align-items: center;
	gap: 18px;
}

.aioc-footer__mark {
	display: block;
	flex: none;
	width: var(--aioc-footer-mark);
	color: var(--aioc-footer-fg);
}

.aioc-footer__sprout,
.aioc-footer__mark-img {
	display: block;
	width: 100%;
	height: auto;
}

.aioc-footer__names {
	display: block;
}

.aioc-footer__name {
	display: block;
	color: var(--aioc-footer-fg);
	font-family: var(--aioc-font-display);
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.aioc-footer__tagline {
	display: block;
	margin-block-start: 4px;
	color: var(--aioc-footer-muted);
	font-size: 0.95rem;
	line-height: 1.4;
}

/* --------------------------------------------------------------- Contact */

.aioc-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: end;
}

.aioc-footer__contact-item {
	margin: 0;
}

.aioc-footer__link {
	position: relative;
	display: inline-block;
	padding-block-end: 2px;
	color: var(--aioc-footer-fg);
	font-size: 0.98rem;
	line-height: 1.5;
	text-decoration: none;
}

/* The underline is the entire hover. Themes almost always restyle a:hover and
   a:visited, so the colour is pinned across every link state — otherwise a
   mailto: or tel: link picks up the theme's own hover colour here. */
.aioc-footer__link,
.aioc-footer__link:link,
.aioc-footer__link:visited,
.aioc-footer__link:hover,
.aioc-footer__link:focus,
.aioc-footer__link:focus-visible,
.aioc-footer__link:active {
	color: var(--aioc-footer-fg);
	text-decoration: none;
}

/* The mark sits on the text baseline rather than the line box, so it lines up
   with the handle instead of floating above it. */
.aioc-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.aioc-footer__social-icon {
	flex: none;
	width: 1.05em;
	height: 1.05em;
	color: currentColor;
}

.aioc-footer__link-rule {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	display: block;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s var(--aioc-ease-inout);
}

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

.aioc-footer__location {
	margin: 0;
	color: var(--aioc-footer-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ Hover */

@media (hover: hover) and (pointer: fine) {
	a.aioc-footer__link:hover .aioc-footer__link-rule,
	a.aioc-footer__link:focus-visible .aioc-footer__link-rule {
		transform: scaleX(1);
	}

	.aioc-footer__cta:hover .aioc-footer__arrow-glyph,
	.aioc-footer__cta:focus-visible .aioc-footer__arrow-glyph {
		transform: translate3d(110%, -110%, 0);
	}

	.aioc-footer__cta:hover .aioc-footer__arrow-glyph--ghost,
	.aioc-footer__cta:focus-visible .aioc-footer__arrow-glyph--ghost {
		transform: translate3d(0, 0, 0);
	}
}

/* Touch keeps the roll and the arrow swap, triggered by the tap itself. */
.aioc-footer__cta:active .aioc-footer__arrow-glyph {
	transform: translate3d(110%, -110%, 0);
}

.aioc-footer__cta:active .aioc-footer__arrow-glyph--ghost {
	transform: translate3d(0, 0, 0);
}

.aioc-footer__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ---------------------------------------------- Pre-animation state (JS) */

/* Scoped to html.aioc-js and this widget only: without JS, or before the
   module takes over, nothing here applies and the footer is simply visible. */

/* The subheading is NOT in this list. Its line is hidden by its mask, and
   nothing ever animates the element's own opacity — so hiding it here would
   leave it at zero for good. */
.aioc-js .aioc-footer.aioc-anim [data-af-el="eyebrow"],
.aioc-js .aioc-footer.aioc-anim [data-af-el="pill"],
.aioc-js .aioc-footer.aioc-anim [data-af-el="icon"],
.aioc-js .aioc-footer.aioc-anim [data-af-el="name"],
.aioc-js .aioc-footer.aioc-anim [data-af-el="tagline"],
.aioc-js .aioc-footer.aioc-anim [data-af-el="location"],
.aioc-js .aioc-footer.aioc-anim [data-af-contact] {
	opacity: 0;
}

.aioc-js .aioc-footer.aioc-anim .aioc-footer__line {
	transform: translate3d(0, 110%, 0);
}

.aioc-js .aioc-footer.aioc-anim [data-af-el="rule"] {
	transform: scaleX(0);
}

/* Once the module has run — or the failsafe has fired — GSAP owns the inline
   styles, and these rules are what puts everything back if it never did. */
.aioc-footer.aioc-revealed [data-af-el],
.aioc-js .aioc-footer.aioc-anim.aioc-revealed [data-af-el],
.aioc-footer.aioc-revealed [data-af-contact],
.aioc-js .aioc-footer.aioc-anim.aioc-revealed [data-af-contact] {
	opacity: 1;
}

.aioc-footer.aioc-revealed .aioc-footer__line,
.aioc-js .aioc-footer.aioc-anim.aioc-revealed .aioc-footer__line {
	transform: translate3d(0, 0, 0);
}

.aioc-footer.aioc-revealed [data-af-el="rule"],
.aioc-js .aioc-footer.aioc-anim.aioc-revealed [data-af-el="rule"] {
	transform: scaleX(1);
}

/* ----------------------------------------------------------- Breakpoints */

@media (max-width: 767px) {
	.aioc-footer__meta {
		flex-direction: column;
		gap: 36px;
	}

	.aioc-footer__contact {
		align-items: flex-start;
		text-align: start;
	}

	.aioc-footer__cta {
		width: 100%;
	}

	.aioc-footer__cta-wrap {
		margin-block-end: 52px;
	}
}

/* -------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.aioc-js .aioc-footer.aioc-anim [data-af-el],
	.aioc-js .aioc-footer.aioc-anim [data-af-contact] {
		opacity: 1;
	}

	.aioc-js .aioc-footer.aioc-anim .aioc-footer__line {
		transform: none;
	}

	.aioc-js .aioc-footer.aioc-anim [data-af-el="rule"] {
		transform: scaleX(1);
	}

	.aioc-footer__link-rule,
	.aioc-footer__arrow-glyph,
	.aioc-footer__cta .aioc-btn__fill,
	.aioc-footer__cta .aioc-btn__text {
		transition-duration: 0.01ms !important;
	}
}