/* ===== Home intro (page-main.php) ===== */
.hm-hero {
	position: relative;
	z-index: 3;
	padding: 64px 0 48px;
	background:
		radial-gradient(900px 420px at 100% 0%, rgba(255, 255, 255, .45), transparent 60%),
		linear-gradient(135deg, #5fd0ad 0%, #8ee6cb 50%, #d4f7ea 100%);
}
/* Floating circles live in their own clipped layer so the search dropdown can overflow the hero */
.hm-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}
.hm-search {
	flex: none;
	max-width: 560px;
	margin-bottom: 22px !important;
}
.hm-blob {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(2px);
	animation: hm-float 14s ease-in-out infinite;
}
.hm-blob.is-a {
	width: 380px;
	height: 380px;
	left: -120px;
	bottom: -160px;
	background: rgba(255, 255, 255, .22);
}
.hm-blob.is-b {
	width: 220px;
	height: 220px;
	right: 8%;
	top: -90px;
	background: rgba(63, 184, 146, .25);
	animation-duration: 18s;
	animation-direction: reverse;
}
.hm-layout {
	position: relative;
	/* Above .hm-cta so the search suggestions can open over it */
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 48px;
	align-items: center;
}

/* Copy */
.hm-copy > * {
	animation: hm-up .7s cubic-bezier(.2, .8, .2, 1) both;
}
.hm-copy > *:nth-child(2) { animation-delay: .08s; }
.hm-copy > *:nth-child(3) { animation-delay: .16s; }
.hm-copy > *:nth-child(4) { animation-delay: .24s; }
.hm-copy > *:nth-child(5) { animation-delay: .32s; }
.hm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #1f5e4b;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 2px 10px rgba(20, 90, 70, .08);
	margin-bottom: 18px;
}
.hm-title {
	margin: 0 0 16px;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
}
.hm-brand {
	display: block;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.15;
	color: #0f3d31;
	margin-bottom: 10px;
}
.hm-tagline {
	display: block;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5;
	color: #1f5e4b;
}
.hm-desc {
	font-size: 16px;
	line-height: 1.85;
	color: #24473d;
	margin: 0 0 24px;
	max-width: 560px;
}
.hm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}
.hm-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none !important;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background-color .25s;
}
.hm-btn:hover {
	transform: translateY(-3px);
}
.hm-btn:active {
	transform: scale(.97);
}
.hm-btn.is-primary {
	background: #0f3d31;
	color: #fff !important;
	box-shadow: 0 10px 24px rgba(15, 61, 49, .3);
}
.hm-btn.is-primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-20deg);
	animation: cta-shine 5s ease-in-out 1.5s infinite;
}
.hm-btn.is-primary:hover {
	box-shadow: 0 14px 30px rgba(15, 61, 49, .38);
}
.hm-btn.is-ghost {
	background: rgba(255, 255, 255, .75);
	color: #0f3d31 !important;
	box-shadow: 0 6px 16px rgba(20, 90, 70, .12);
}
.hm-btn.is-ghost i {
	color: #06c755;
	font-size: 19px;
}
.hm-btn.is-ghost:hover {
	background: #fff;
}
.hm-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}
.hm-stats > div {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .7);
}
.hm-stats dt {
	font-size: 20px;
	font-weight: 700;
	color: #0f3d31;
	line-height: 1;
}
.hm-stats dt i {
	font-size: 16px;
	color: #238a6a;
}
.hm-stats dd {
	margin: 0;
	font-size: 13.5px;
	color: #24473d;
}

/* Bento gallery: 1 large + 7 small */
.hm-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 10px;
}
.hm-shot {
	position: relative;
	padding: 0;
	padding-top: 100%;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 8px 22px rgba(20, 90, 70, .16);
	cursor: zoom-in;
	animation: hm-pop .6s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: calc(.2s + var(--n, 0) * 70ms);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.hm-shot:first-child {
	grid-column: span 2;
	grid-row: span 2;
	border-radius: 22px;
}
/* The last image stretches over the empty cells of its row (--span is set in page-main.php) */
.hm-shot[style*="--span"] {
	grid-column: span var(--span);
	padding-top: calc((100% - (var(--span) - 1) * 10px) / var(--span));
}
.hm-shot img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.hm-shot:hover {
	transform: translateY(-4px) rotate(-1deg);
	box-shadow: 0 16px 32px rgba(20, 90, 70, .24);
	z-index: 2;
}
.hm-shot:hover img {
	transform: scale(1.08);
}
.hm-shot:focus-visible {
	outline: 3px solid #0f3d31;
	outline-offset: 3px;
}

.hm-cta {
	position: relative;
	z-index: 1;
	margin-top: 40px;
}
.hm-cta .cta-box {
	background: rgba(255, 255, 255, .7);
	border-color: rgba(255, 255, 255, .8);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 10px 30px rgba(20, 90, 70, .12);
}

@keyframes hm-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
@keyframes hm-pop {
	from { opacity: 0; transform: scale(.9) translateY(12px); }
	to { opacity: 1; transform: none; }
}
@keyframes hm-float {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(30px, -24px); }
}

@media (max-width: 991px) {
	.hm-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.hm-brand {
		font-size: 40px;
	}
}

@media (max-width: 767px) {
	.hm-hero {
		padding: 36px 0 32px;
	}
	.hm-brand {
		font-size: 32px;
	}
	.hm-tagline {
		font-size: 18px;
	}
	.hm-desc {
		font-size: 15px;
	}
	.hm-actions .hm-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
	/* Gallery becomes a swipeable row */
	.hm-gallery {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -15px;
		padding: 4px 15px 14px;
	}
	.hm-gallery::-webkit-scrollbar {
		display: none;
	}
	.hm-shot,
	.hm-shot:first-child,
	.hm-shot[style*="--span"] {
		flex: 0 0 68%;
		padding-top: 68%;
		scroll-snap-align: center;
		border-radius: 18px;
	}
	.hm-cta {
		margin-top: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hm-blob,
	.hm-copy > *,
	.hm-shot,
	.hm-btn.is-primary::before {
		animation: none;
	}
	.hm-shot,
	.hm-shot img,
	.hm-btn {
		transition: none;
	}
}