/*
 * About Hero — frontend styles.
 *
 * No exact pixel redline was supplied alongside this build (only Figma
 * screenshots) — typography scale, spacing, and the video frame's
 * border/glow follow the same "best-effort match against the reference,
 * using values already established elsewhere in this theme" convention as
 * assets/css/pricing/pricing-plans.css's own docblock. Adjust directly if
 * a pixel-redline export becomes available.
 *
 * @package Greenova
 */

.about-hero {
	background-color: #FFFFFF;
	padding-block:     96px;
}

.about-hero__inner {
	max-width:      1376px;
	margin:         0 auto;
	padding-inline: 24px;
	text-align:     center;
}

.about-hero__eyebrow {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #000000;
	margin:         0 0 16px;
}

.about-hero__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 56px;
	font-weight: 400;
	line-height: 63px;
	letter-spacing: -2.04px;
	color:          #000000;
	max-width: 950px;
	margin:         0 auto 20px;
}
.about-hero__description {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   18px;
	font-weight: 400;
	line-height: 28px;
	color:       #000000;
	max-width:   950px;
	margin:      0 auto 48px;
}

/* =============================================================================
   Video frame — autoplaying, muted, looping <video> (poster shows until
   it's ready) — reused as-is by template-parts/about/future-compliance.php.
   ============================================================================= */

.about-hero__video-frame {
	position:      relative;
	overflow:      hidden;
	border-radius: 24px;
	border:        1px solid rgba(127, 176, 79, 0.25);
	box-shadow:    0 0 0 6px rgba(127, 176, 79, 0.06), 0 24px 48px rgba(0, 0, 0, 0.10);
	background:    #E9EBE3;
}

/*
 * Light "glass" sheen — a faint diagonal highlight across the top of the
 * frame; purely decorative, so it never intercepts clicks.
 */
.about-hero__video-frame::before {
	content:        '';
	position:       absolute;
	inset:          0;
	z-index:        1;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 35%);
}

.about-hero__video {
	display:      block;
	width:        100%;
	aspect-ratio: 2.35 / 1;
	object-fit:   cover;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 991.98px ) {
	.about-hero {
		padding-block: 64px;
	}

	.about-hero__heading {
		font-size: 32px;
	}

	.about-hero__description {
		font-size:     15px;
		margin-bottom: 36px;
	}
}

@media ( max-width: 575.98px ) {
	.about-hero {
		padding-block: 48px;
	}

	.about-hero__inner {
		padding-inline: 20px;
	}

	.about-hero__eyebrow {
		font-size: 12px;
	}

	.about-hero__heading {
		font-size:      24px;
		letter-spacing: -0.01em;
		margin-bottom:  16px;
	}

	.about-hero__description {
		font-size:     14px;
		margin-bottom: 28px;
	}

	.about-hero__video {
		aspect-ratio: 4 / 3;
	}
}