/**
 * Smart Utilities Foundation — structural styles.
 * Colours, typography, spacing are all controlled live from the Elementor
 * editor; this file only holds layout rules that must always apply.
 */

.sutf-wrapper,
.sutf-wrapper * {
	box-sizing: border-box;
}

.sutf-header {
	max-width: 760px;
	margin: 0 auto 60px;
	text-align: center;
}

.sutf-heading {
	margin: 0;
	line-height: 1.15;
}

.sutf-divider {
	display: block;
	width: 120px;
	height: 3px;
	margin: 20px auto;
	border: 0;
}

.sutf-subheading {
	margin: 0;
	line-height: 1.5;
}

.sutf-columns {
	display: flex;
	flex-direction: row;
	gap: 80px;
	align-items: flex-start;
	width: 100%;
}

.sutf-left-col,
.sutf-right-col {
	flex: 1 1 0%;
	min-width: 0;
}

.sutf-left-col {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sutf-block-heading {
	margin: 0 0 20px;
	line-height: 1.2;
}

.sutf-block-text {
	margin: 0;
	line-height: 1.6;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.sutf-vision-block {
	border-inline-start: 4px solid transparent;
	padding-inline-start: 28px;
}

.sutf-values-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sutf-value-item {
	display: flex;
	align-items: flex-start;
	column-gap: 16px;
}

.sutf-value-icon {
	flex-shrink: 0;
	line-height: 1;
	margin-top: 4px;
}

.sutf-value-icon i,
.sutf-value-icon svg {
	display: inline-block;
}

.sutf-value-title {
	margin: 0 0 6px;
	line-height: 1.3;
}

.sutf-value-text {
	margin: 0;
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ----- Responsive fallback -----
 * Elementor's own responsive controls (stack direction, gaps, sizes) take
 * precedence via generated CSS. This is a safety net only. */
@media (max-width: 1024px) {
	.sutf-columns {
		flex-direction: column;
	}
}