@props(['kicker' => null, 'title', 'lead' => null])
{{-- Compact inner-page hero band; sits under the absolute public nav. --}}
<section class="hero-wash relative overflow-hidden pb-12 pt-32 text-white sm:pb-16 sm:pt-40">
    <div class="pointer-events-none absolute inset-0 opacity-[0.07]" aria-hidden="true"
         style="background-image: repeating-linear-gradient(135deg, #fff 0 2px, transparent 2px 22px);"></div>
    <div class="relative mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        <div class="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 leading-tight tracking-tight sm:text-5xl">{{ $title }}</h1>
            @if ($lead)
                <p class="mt-4 max-w-2xl text-base leading-relaxed text-white/80 sm:text-lg">{{ $lead }}</p>
            @endif
            {{ $slot }}
        </div>
    </div>
</section>