<?php // reusable hero
function hero($eyebrow, $title, $subtitle, $img, $primary){
?>
<section class="relative overflow-hidden text-white" style="background: <?= $primary ?>">
  <img src="<?= $img ?>" alt="" class="absolute inset-0 w-full h-full object-cover opacity-30">
  <div class="absolute inset-0" style="background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35))"></div>
  <div class="relative max-w-6xl mx-auto px-4 py-24 md:py-32">
    <?php if($eyebrow): ?><p class="text-xs uppercase tracking-[0.25em] text-accent font-semibold"><?= htmlspecialchars($eyebrow) ?></p><?php endif; ?>
    <h1 class="mt-4 font-serif text-4xl md:text-6xl font-bold max-w-3xl"><?= htmlspecialchars($title) ?></h1>
    <?php if($subtitle): ?><p class="mt-6 max-w-2xl text-lg text-white/85"><?= htmlspecialchars($subtitle) ?></p><?php endif; ?>
  </div>
</section>
<?php } ?>
