{% extends "base.html" %}
{% block title %}Work — {{ brand }}{% endblock %}
{% block content %}
<section class="max-w-7xl mx-auto px-6 py-16">
  <h1 class="text-3xl font-bold">Selected Work</h1>
  <div class="mt-8 grid lg:grid-cols-2 gap-8">
    {% for c in cases %}
    <article class="rounded-2xl bg-bh.card/70 border border-bh.ring overflow-hidden">
      <img src="{{ c.image }}" alt="{{ c.title }}" class="w-full aspect-video object-cover" onerror="this.style.display='none'">
      <div class="p-6">
        <h3 class="text-xl font-semibold">{{ c.title }}</h3>
        <p class="mt-2 text-white/80">{{ c.desc }}</p>
        <ul class="mt-3 space-y-1 text-white/70 text-sm">
          {% for b in c.bullets %}<li>• {{ b }}</li>{% endfor %}
        </ul>
      </div>
    </article>
    {% endfor %}
  </div>
</section>
{% endblock %}