Case Study Meta Header

<section class="ws-case-study-header bg-[var(--ws-case-study-bg)] py-16">
  <div class="mx-auto max-w-5xl px-6">
    <div class="grid gap-8 lg:grid-cols-2 lg:items-end">
      <div>
        <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-700">← Back to Work</a>
        <h1 class="mt-4 text-4xl font-bold text-slate-900 lg:text-5xl">Brand Evolution for Fintech Startup</h1>
      </div>
      <p class="text-lg text-slate-500">A complete visual identity redesign to position the brand for the European market launch.</p>
    </div>

    <!-- Meta row -->
    <div class="mt-10 grid grid-cols-2 gap-6 border-y border-slate-200 py-6 sm:grid-cols-4">
      <div>
        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Category</p>
        <p class="mt-1 text-sm font-medium text-slate-900">Branding</p>
      </div>
      <div>
        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Year</p>
        <p class="mt-1 text-sm font-medium text-slate-900">2026</p>
      </div>
      <div>
        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Role</p>
        <p class="mt-1 text-sm font-medium text-slate-900">Lead Designer</p>
      </div>
      <div>
        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Website</p>
        <a href="#" class="mt-1 text-sm font-medium text-blue-600 hover:text-blue-700">client.com ↗</a>
      </div>
    </div>

    <!-- Hero image -->
    <div class="mt-8 aspect-video rounded-2xl bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-700"></div> <!-- ws-ok -->
  </div>
</section>