@props(['kicker' => null, 'title', 'subtitle' => null])
{{-- Compact dark band that sits under the absolute public navigation. --}}
<section class="hero-wash relative overflow-hidden text-white">
    <x-geo-pattern id="geo-inner" />
    <div class="relative mx-auto max-w-7xl px-4 pb-12 pt-32 sm:px-6 sm:pb-16 sm:pt-40 lg:px-8">
        <div class="max-w-3xl animate-fade-up">
            @if ($kicker)
                <p class="text-xs font-semibold uppercase tracking-[0.22em] text-gold-500">{{ $kicker }}</p>
            @endif
            <h1 class="mt-3 font-display text-3xl font-semibold tracking-tight sm:text-5xl">{{ $title }}</h1>
            @if ($subtitle)
                <p class="mt-4 max-w-2xl text-base leading-relaxed text-white/80 sm:text-lg">{{ $subtitle }}</p>
            @endif
            {{ $slot }}
        </div>
    </div>
</section>