{% macro hero_page(title, header, subtitle, image) %}
	<section class="relative min-h-[50vh] flex items-center justify-center overflow-hidden">
		<div class="absolute inset-0 z-0">
			<img src="{{ image starts with 'http' ? image : base_url ~ image }}" class="w-full h-full object-cover" alt="{{ title }}">
			<div class="absolute inset-0 bg-stone-900/60"></div>
		</div>
		<div class="relative z-10 text-center text-white px-4 py-40">
			<span class="uppercase tracking-[0.3em] text-xs text-stone-300 mb-4 block">{{ header }}</span>
			<h1 class="font-display text-4xl md:text-5xl lg:text-6xl max-w-3xl mx-auto">{{ title }}</h1>
			<p class="font-body text-stone-200 text-lg mt-6 max-w-xl mx-auto font-light">{{ subtitle }}</p>
		</div>
	</section>
{% endmacro %}