/*
 * "Together, We're Building the Future of Environmental Compliance" —
 * About Us page section.
 *
 * Deliberately does NOT redefine heading/description/video typography or
 * sizing — the markup reuses .about-hero__heading/__description/
 * __video-frame/__video directly (see assets/css/about/about-hero.css),
 * so those rules (max-width, font sizes, video border-radius/shadow/glass
 * sheen, responsive breakpoints) apply here unchanged. This file only
 * supplies what About Hero doesn't need: the section-level
 * background/padding/container width, and LEFT alignment instead of
 * About Hero's centered layout.
 *
 * @package Greenova
 */

.future-compliance-section {
	background-color: #FFFFFF;
	padding-block:     96px; /* Matches .about-hero's own padding-block. */
}

.future-compliance-section__inner {
	max-width:      1376px; /* Matches .about-hero__inner's own max-width. */
	margin:         0 auto;
	padding-inline: 24px;
	text-align:     left; /* The one deliberate difference from About Hero, which centers. */
}

/*
 * .about-hero__heading/__description center themselves via `margin:0 auto`
 * — override just the margin here so they sit flush left instead, while
 * keeping every other reused property (font-size, line-height,
 * letter-spacing, max-width, color) untouched.
 */
.future-compliance-section__inner .about-hero__heading,
.future-compliance-section__inner .about-hero__description {
	margin-left:  0;
	margin-right: 0;
}

@media ( max-width: 575.98px ) {
	.future-compliance-section__inner {
		padding-inline: 20px;
	}
}