/* SamSam About Us Block - front end styles */

.sau-section {
	position: relative;
	background: #ffffff;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Full-bleed: break the section out of whatever max-width/boxed
   container Elementor's page, section or column settings put around
   it, so the background colour and waves always reach both edges of
   the browser window, no matter what the widget's parent width is
   set to. The inner .sau-container keeps its own comfortable reading
   width regardless — only the background stretches. */
.sau-section-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

.sau-container {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin: 0 auto;
	padding: 90px 24px;
	text-align: center;
}

.sau-heading {
	margin: 0 0 26px;
	color: #4a9b7f;
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.2;
}

.sau-paragraph {
	color: #4a9b7f;
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 22px;
}

.sau-paragraph:last-of-type {
	margin-bottom: 22px;
}

.sau-tagline {
	color: #4a9b7f;
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 34px;
}

.sau-btn {
	display: inline-block;
	background: #4a9b7f;
	color: #ffffff;
	text-decoration: none;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 15px 34px;
	border-radius: 24px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.sau-btn:hover {
	background: #3f8870;
	color: #ffffff;
	transform: translateY(-1px);
}

/* ---------- Wave shapes ---------- */
/* Same curved-bar technique as the Hero & Nav block, so the two
   sections stitch together visually when stacked on a page. */
.sau-wave {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	transform: scaleX(1.4);
}

.sau-wave-top {
	top: 0;
	height: 60px;
	background: #8a9a1f;
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.sau-wave-bottom {
	bottom: 0;
	height: 70px;
	background: #ebf5f0;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.sau-has-top-wave .sau-container {
	padding-top: 130px;
}

.sau-has-bottom-wave .sau-container {
	padding-bottom: 140px;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
	.sau-container {
		padding-left: 20px;
		padding-right: 20px;
	}
	.sau-has-top-wave .sau-container {
		padding-top: 90px;
	}
	.sau-has-bottom-wave .sau-container {
		padding-bottom: 100px;
	}
}