Footer Contact Only

<footer class="ws-footer border-t border-[var(--ws-footer-border)] bg-[var(--ws-footer-bg)] py-16">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <h2 class="text-2xl font-bold text-[var(--ws-footer-text)]">Let's talk</h2>
    <p class="mx-auto mt-2 max-w-md text-sm text-[var(--ws-footer-text-muted)]">No forms to fill out — just reach us directly, however suits you best.</p>

    <div class="mt-8 flex flex-col items-stretch justify-center gap-3 sm:flex-row">
      <a href="tel:+49301234567" class="inline-flex items-center justify-center gap-2 rounded-lg border border-[var(--ws-footer-border)] px-5 py-3 text-sm font-semibold text-[var(--ws-footer-text)] transition hover:border-[var(--ws-color-border-strong)]">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.95.68l1.5 4.5a1 1 0 01-.5 1.2l-2.26 1.13a11 11 0 005.52 5.52l1.13-2.26a1 1 0 011.2-.5l4.5 1.5a1 1 0 01.68.95V19a2 2 0 01-2 2h-1C9.7 21 3 14.3 3 6V5z"/></svg>
        +49 30 123 4567
      </a>
      <a href="mailto:hello@studio.com" class="inline-flex items-center justify-center gap-2 rounded-lg border border-[var(--ws-footer-border)] px-5 py-3 text-sm font-semibold text-[var(--ws-footer-text)] transition hover:border-[var(--ws-color-border-strong)]">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        hello@studio.com
      </a>
      <a href="#book" class="inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--ws-footer-action-bg,var(--ws-color-primary))] px-5 py-3 text-sm font-semibold text-white transition hover:opacity-90">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
        Book a call
      </a>
    </div>

    <div class="mt-12 flex flex-col items-center justify-between gap-3 border-t border-[var(--ws-footer-border)] pt-6 text-sm text-[var(--ws-footer-text-muted)] sm:flex-row">
      <p>&copy; 2026 Northside Studio</p>
      <nav aria-label="Footer" class="flex gap-5">
        <a href="#imprint" class="transition hover:text-[var(--ws-footer-link-hover)]">Imprint</a>
        <a href="#privacy" class="transition hover:text-[var(--ws-footer-link-hover)]">Privacy</a>
      </nav>
    </div>
  </div>
</footer>