/*
 * Valor Maintenance — Hero & Shared Section Styles
 * Design tokens shared across all one-page sections.
 */

:root {
	--vm-brand-hover: #b3591f;
	--vm-navy-deep: #101a2b;
	--vm-heading: #1b2940;
	--vm-body-text: #4a5568;
	--vm-muted: #64748b;
	--vm-bg-light: #f4f6fa;
	--vm-border: #e3e8f0;
}

body {
	background-color: #ffffff;
}

/* -----------------------------------------------
   Shared section layout
----------------------------------------------- */

.vm-section-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 5rem 40px;
}

.vm-section-title {
	color: var(--vm-heading);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	margin: 0 0 0.75rem;
}

.vm-section-title--left {
	text-align: left;
}

.vm-section-title--light {
	color: #ffffff;
}

.vm-section-intro {
	color: var(--vm-muted);
	font-size: 1.05rem;
	line-height: 1.6;
	text-align: center;
	max-width: 720px;
	margin: 0 auto 3rem;
}

/* -----------------------------------------------
   Reusable buttons
----------------------------------------------- */

.vm-btn {
	display: inline-block;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	text-decoration: none;
	border-radius: 6px;
	padding: 0.9rem 1.9rem;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vm-btn--primary {
	background-color: var(--wp--preset--color--brand);
	color: #ffffff;
	border: none;
}

.vm-btn--primary:hover {
	background-color: var(--vm-brand-hover);
	color: #ffffff;
}

.vm-btn--outline {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.vm-btn--outline:hover {
	border-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

/* -----------------------------------------------
   Hero
----------------------------------------------- */

.vm-hero {
	position: relative;
	background-color: var(--vm-navy-deep);
	margin-top: 84px;
	overflow: hidden;
}

.vm-hero__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 62%;
	background-image:
		linear-gradient(to right, var(--vm-navy-deep) 0%, rgba(16, 26, 43, 0.55) 38%, rgba(16, 26, 43, 0.25) 100%),
		url("../images/hero-skyline.jpg");
	background-size: cover;
	background-position: center right;
}

.vm-hero__inner {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 5.5rem 40px 4.5rem;
}

.vm-hero__content {
	max-width: 560px;
}

.vm-hero__title {
	color: #ffffff;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.12;
	margin: 0 0 1.5rem;
}

.vm-hero__title-accent {
	color: var(--wp--preset--color--brand);
}

.vm-hero__subheadline {
	color: #dbe4f0;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.6;
	margin: 0 0 1.25rem;
}

.vm-hero__supporting {
	color: #9fb0c7;
	font-size: 0.98rem;
	line-height: 1.7;
	margin: 0 0 2rem;
}

.vm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2.25rem;
}

.vm-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	list-style: none;
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.vm-hero__badges li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #c4d1e2;
	font-size: 0.88rem;
}

.vm-hero__badges svg {
	color: var(--wp--preset--color--brand);
	flex-shrink: 0;
}

@media (max-width: 1023px) {
	.vm-hero {
		margin-top: 72px;
	}

	.vm-hero__image {
		width: 100%;
		background-image:
			linear-gradient(to right, rgba(16, 26, 43, 0.92) 0%, rgba(16, 26, 43, 0.75) 100%),
			url("../images/hero-skyline.jpg");
	}

	.vm-hero__inner {
		padding: 4rem 24px 3.5rem;
	}

	.vm-hero__title {
		font-size: 2.25rem;
	}

	.vm-section-inner {
		padding: 3.5rem 24px;
	}

	.vm-section-title {
		font-size: 1.7rem;
	}
}