html, body {
	height: 100%;
	margin: 0;
	overflow: hidden; /* intentional now */
}

.page {
	height: 100vh;
}

.left-panel {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* pushes footer down */
	padding: clamp(1.5rem, 4vw, 3rem);
}

.content {
	max-width: 520px;
}

.logo {
	width: clamp(120px, 15vw, 180px);
}

h1 {
	font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.lead {
	font-size: clamp(1rem, 1.2vw, 1.25rem);
}

.footer {
	font-size: 0.85rem;
}

.right-panel {
	height: 100vh;
}

.hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mobile behavior */
@media (max-width: 767px) {
	html, body {
		overflow: auto; /* allow scroll on small screens */
	}

	.left-panel {
		height: auto;
		justify-content: center;
		text-align: center;
	}
}