body {
	background: var(--background-component);
	color: #222;
	background-image:
		linear-gradient(rgba(43, 55, 107, 0.55), rgba(43, 55, 107, 0.55)),
		url('/images/TrailsEnd_DroneShot1.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	min-height: 100vh;
}

.header-section {
		text-align: center;
		padding: 2rem;
		background: var(--primary);
		color: #fff;
		border-radius: 2rem;
		margin: 1rem auto 2rem auto;
		max-width: 900px;
		box-shadow: 0 2px 12px var(--shadow-component);
}

.header-section h1 {
		color: var(--accent);
		font-size: 2.2rem;
		margin-bottom: 1rem;
		margin-top: .5rem;
	}
	.header-section p {
		font-size: 1.15rem;
		margin-bottom: 1rem;
		line-height: 1.6;
	}

section h2 {
	margin-left: 2rem;
}

.button {
	background: var(--accent);
	color: #fff;
	padding: 0.75rem 1.5rem;
	border-radius: 1rem;
	text-decoration: none;
	font-weight: bold;
	border: none;
	box-shadow: 0 2px 8px var(--shadow-component);
	transition: background 0.2s;
}

.button:hover {
	background: #a63d36;
}

/* Fade-in animation for scroll appearance */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.scroll-fade {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.6s, transform 0.6s;
	will-change: opacity, transform;
}
.scroll-fade.visible {
	opacity: 1;
	transform: none;
	animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}