/* Home hero — values measured from the live Elementor page (post 713). */

.home-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 60vh;
	/* Horizontal gutters come from .home-hero__container (the site .container),
	   so the card's left edge lines up with the header bar's. */
	padding: 50px 0;
	background: var(--color-charcoal);
	overflow: hidden;
	/* Tuck up behind the floating header so the charcoal runs edge-to-edge under the bar. */
	margin-top: calc(var(--header-pull) * -1);
	padding-top: calc(50px + var(--header-pull));
}

.home-hero__container {
	width: 100%;
}

.home-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.home-hero__card {
	position: relative;
	width: 41.8%;
	min-width: 320px;
	background: rgba(64, 63, 67, 0.88); /* #403F43E0 */
	border-radius: 7px;
	padding: 30px;
	box-shadow: 10px 10px 21px 1px var(--color-charcoal);
}

.home-hero__title {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: 60px;
	line-height: 1;
	color: #fff;
	margin: 0;
}

.home-hero__accent {
	color: var(--color-accent);
}

.home-hero__wave {
	display: inline-block;
	font-size: 44px;
	margin-left: 6px;
	transform: rotate(-20deg);
	transform-origin: 70% 70%;
	animation: jt-wave 1.6s ease-in-out infinite;
}

.home-hero__sub {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	/* Fluid size so the line never wraps: floor fits a 375px viewport's card,
	   2.15vw tracks the card through tablet widths, 28px is the design size. */
	font-size: clamp(15px, 2.15vw, 28px);
	white-space: nowrap;
	color: #fff;
	margin: 14px 0 0;
}

.home-hero__rotator {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: 30px;
	line-height: 1.3;
	min-height: 1.3em;
	color: var(--color-accent);
	margin: 2px 0 0;
}

.home-hero__cursor {
	color: #fff;
	animation: jt-blink 0.9s steps(1) infinite;
}

.home-hero__tagline {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 14px;
	color: #fff;
	margin: 20px 0 0;
}

.home-hero__actions {
	display: flex;
	gap: 28px;
	margin-top: 16px;
}

.home-hero__btn {
	font-family: var(--font-secondary);
	font-weight: 600;
	font-size: 17px;
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 0 var(--color-accent);
	padding: 12px 0;
	border-radius: 3px;
}

.home-hero__btn--accent {
	color: var(--color-accent);
}

@media (hover: hover) {
	.home-hero__btn:hover {
		color: #fff;
	}
}

@keyframes jt-wave {
	0%, 100% { transform: rotate(-20deg); }
	25% { transform: rotate(2deg); }
	50% { transform: rotate(-28deg); }
	75% { transform: rotate(-4deg); }
}

@keyframes jt-blink {
	50% { opacity: 0; }
}

@media (max-width: 767px) {
	.home-hero {
		min-height: 40vh;
		padding: 10px 0;
		margin-top: calc(var(--header-pull) * -1);
		padding-top: calc(10px + var(--header-pull));
	}

	.home-hero__card {
		width: 100%;
		min-width: 0;
		margin-top: 20px;
	}

	.home-hero__title {
		font-size: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero__wave,
	.home-hero__cursor {
		animation: none;
	}
}