/* TRU Animated Hero. The main photo stays fully opaque (it only settles from a slight zoom), so LCP paints at once. */
.tru-hero {
	--tru-hero-bg: transparent;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(2rem, 1rem + 4vw, 6rem);
	max-width: calc(var(--tru-maxw) + 2 * var(--tru-gutter));
	margin-inline: auto;
	padding: clamp(2.5rem, 1.5rem + 4vw, 6rem) var(--tru-gutter) clamp(3.5rem, 2rem + 6vw, 8rem);
	background: var(--tru-hero-bg);
}

.tru-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--tru-s5);
}

.tru-hero__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tru-s4);
}

.tru-hero__kicker {
	display: block;
	font: 500 var(--tru-fs-label) / 1.5 var(--tru-font-text);
	letter-spacing: var(--tru-track-label);
	text-transform: uppercase;
	color: var(--tru-accent-text);
}

.tru-hero__headline {
	display: block;
	font-family: var(--tru-font-display);
	font-size: var(--tru-fs-hero);
	font-weight: 500;
	line-height: var(--tru-lh-tight);
	letter-spacing: -0.018em;
	color: var(--tru-text);
	text-wrap: balance;
}

.tru-hero__headline em {
	font-style: italic;
	font-weight: 400;
	color: var(--tru-accent-text);
}

.tru-hero__lead {
	max-width: 34rem;
	margin: 0;
	font-size: var(--tru-fs-lead);
	line-height: 1.65;
	color: var(--tru-text-muted);
}

.tru-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tru-s4) var(--tru-s6);
	margin-top: var(--tru-s2);
}

.tru-hero__media {
	position: relative;
	z-index: 1;
	min-height: 0;
}

.tru-hero__main {
	margin: 0;
	margin-left: auto;
	width: 82%;
	overflow: hidden;
	background: var(--tru-linen);
}

.tru-hero__main img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.tru-hero__second {
	position: absolute;
	left: 0;
	bottom: -8%;
	width: 38%;
	margin: 0;
	border: clamp(6px, 0.8vw, 12px) solid var(--tru-bg);
	background: var(--tru-linen);
	box-shadow: none;
}

.tru-hero__second img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.tru-hero__label {
	position: absolute;
	top: 0;
	right: calc(var(--tru-gutter) * -0.6);
	margin: 0;
	writing-mode: vertical-rl;
	font: 500 0.6875rem / 1 var(--tru-font-text);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--tru-accent-text);
}

/* T · R · U: the initials of Trust, Radiance, Unique stand out and spell the brand. */
.tru-hero__initial {
	font-family: var(--tru-font-display);
	font-size: 2.25em;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--tru-ink);
}

.tru-hero__decor {
	position: absolute;
	left: -12%;
	top: 12%;
	width: 70%;
	color: var(--tru-taupe);
	pointer-events: none;
	z-index: -1;
	line-height: 0;
}

.tru-hero__decor svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.tru-hero__decor svg :is(path, circle) {
	vector-effect: non-scaling-stroke;
}

/* Page and text-only variants */
.tru-hero--page {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

.tru-hero--page .tru-hero__headline {
	font-size: var(--tru-fs-h1);
}

/* The photo itself is the arch; the figure carries no box of its own, so no square shows behind the curve. */
.tru-hero--page .tru-hero__main {
	position: relative;
	width: 90%;
	max-width: 27rem;
	margin-right: 5%;
	overflow: visible;
	background: none;
}

.tru-hero--page .tru-hero__main img {
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px 0 0;
	background: var(--tru-linen);
}

/* 110 x 130 viewBox = photo width + 5% each side, photo height + 5% above; bottom aligned with the photo. */
.tru-hero__frame {
	position: absolute;
	left: -5%;
	bottom: 0;
	width: 110%;
	aspect-ratio: 110 / 130;
	color: var(--tru-taupe);
	line-height: 0;
	pointer-events: none;
}

.tru-hero__frame svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	stroke-width: 1.2;
}

.tru-hero__frame path {
	vector-effect: non-scaling-stroke;
}

.tru-hero--plain {
	grid-template-columns: minmax(0, 1fr);
	max-width: calc(52rem + 2 * var(--tru-gutter));
	text-align: center;
	padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}

.tru-hero--plain .tru-hero__headline {
	font-size: var(--tru-fs-h1);
}

.tru-hero--plain .tru-hero__lead {
	margin-inline: auto;
}

.tru-hero--plain .tru-hero__actions {
	justify-content: center;
}

@media (max-width: 1024px) {
	.tru-hero,
	.tru-hero--page {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--tru-s7);
	}

	.tru-hero--home .tru-hero__media {
		order: 1;
		max-width: 36rem;
		margin-inline: auto 0;
		width: 100%;
	}

	.tru-hero--home .tru-hero__main {
		width: 78%;
	}

	.tru-hero--page .tru-hero__media {
		max-width: 26rem;
	}

	.tru-hero__label {
		right: 0;
	}
}

/* The brand words are real text in the copy column, horizontal at every breakpoint. */
.tru-hero__identity {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin-top: var(--tru-s5);
	padding-top: var(--tru-s5);
	border-top: var(--tru-hairline);
}
.tru-hero__identity .tru-triad { max-width: 26rem; }
@media (max-width: 767px) {
	.tru-hero__identity {
		margin-top: var(--tru-s4);
		padding-top: var(--tru-s4);
	}
}
.tru-site .tru-motion-toggle {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-height: 44px;
	padding: 0.25rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--tru-text-muted);
	font: 400 0.75rem / 1.5 var(--tru-font-text);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}
.tru-motion-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
	/* The T, R, U zoom lives in site.css (shared with the welcome section's brand line). */
	[data-tru-motion].is-motion-paused .tru-triad b { animation-play-state: paused; }
	.tru-hero__second img { transition: transform 550ms var(--tru-ease); }
	.tru-hero__second:is(:hover, :focus-within) img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
	.tru-hero .tru-triad :is(span,b) { animation: none; transform: none; }
}

@media (max-width: 767px) {
	.tru-hero {
		padding-top: var(--tru-s5);
	}

	.tru-hero--home .tru-hero__main img {
		aspect-ratio: 4 / 5;
	}

	.tru-hero--page .tru-hero__media {
		max-width: 18rem;
	}

	.tru-hero--no-media-mobile .tru-hero__media {
		display: none;
	}

	.tru-hero__actions .tru-btn-wrap:first-child,
	.tru-hero__actions .tru-btn-wrap:first-child .tru-btn {
		width: 100%;
	}
}

/* H1 entrance: the kicker settles first, then each word rises out of a soft blur, one after another (about 1.3 s
   in all). Words start at 1% opacity, not 0, so the heading counts as painted on the first frame (no LCP delay).
   Pure CSS: it plays from first paint, needs no script, and ends in the normal resting state. */
@keyframes tru-rise-word {
	from { opacity: 0.01; transform: translateY(0.42em); filter: blur(8px); }
	to { opacity: 1; transform: none; filter: none; }
}
@keyframes tru-rise-kicker {
	from { opacity: 0.01; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.tru-hero__title--rise .tru-hero__kicker {
		animation: tru-rise-kicker 700ms var(--tru-ease) backwards;
	}
	.tru-hero__title--rise .tru-w {
		display: inline-block;
		animation: tru-rise-word 950ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
		animation-delay: calc(160ms + var(--i, 0) * 75ms);
	}
}

/* Hero photos on load: the main photo settles from a slight zoom at full opacity (its first frame is the LCP
   paint, so nothing is delayed); the second photo rises in just after. */
@keyframes tru-hero-settle {
	from { transform: scale(1.06); }
	to { transform: none; }
}
@keyframes tru-hero-settle-soft {
	from { transform: scale(1.03); }
	to { transform: none; }
}
@keyframes tru-hero-second-in {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.tru-hero__main img {
		animation: tru-hero-settle 1.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	}
	.tru-hero--page .tru-hero__main img {
		animation-name: tru-hero-settle-soft;
	}
	.tru-hero__second {
		animation: tru-hero-second-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s backwards;
	}
}

/* Tablets and phones: the hero photos are centred. On the home page the main photo and the overlapping second
   photo form one group with equal margins (6% each side); on inner pages the arch photo sits in the middle.
   Elementor zeroes every figure margin inside a widget with a (0,4,1) selector, so these need to be stronger. */
@media (max-width: 1024px) {
	.tru-hero--home .tru-hero__media,
	.tru-hero--page .tru-hero__media {
		margin-inline: auto;
	}
	.tru-site .tru-hero.tru-hero--home .tru-hero__media figure.tru-hero__main {
		width: 76%;
		margin-left: auto;
		margin-right: 6%;
	}
	.tru-hero--home .tru-hero__second {
		left: 6%;
	}
	.tru-site .tru-hero.tru-hero--page .tru-hero__media figure.tru-hero__main {
		margin-inline: auto;
	}
}