Contact Section with Studio Details

<section class="sm:px-6 lg:px-8 lg:py-12 mt-10 mr-auto mb-24 ml-auto pt-8 pr-4 pb-10 pl-4 gap-x-8 gap-y-8">
  <style id="border-gradient-shared-style">
    [style*="--border-gradient"]::before {
      content: "";
      position: absolute;
      inset: 0;
      padding: 1px;
      border-radius: var(--border-radius-before, inherit);
      -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      background: var(--border-gradient);
      pointer-events: none;
    }
  </style>
  <div class="overflow-hidden bg-slate-950 border-slate-800/80 border rounded-3xl relative gap-x-8 gap-y-8">
    <!-- Background image -->
    <div class="absolute top-0 right-0 bottom-0 left-0 gap-x-8 gap-y-8">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/46172b3c-6c63-4bd0-97b0-09a0ca82b055_3840w.webp" alt="Abstract textured portrait behind patterned glass" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-br from-black/60 via-black/40 to-black/70"></div>
    </div>

    <!-- Content -->
    <div
      class="sm:px-8 lg:px-10 sm:py-10 lg:py-12 flex flex-col gap-8 sm:gap-10 pt-8 pr-6 pb-8 pl-6 relative gap-x-8 gap-y-8">
      <!-- Top bar -->
      <div class="flex items-start sm:items-center justify-between gap-6 text-xs sm:text-sm font-medium text-slate-200">
        <div class="flex flex-col gap-1">
          <span class="uppercase tracking-[0.18em] text-slate-300 text-sm">
            Get in touch
          </span>
          <span class="text-xs sm:text-sm text-slate-400">
            Direct line to the studio production desk
          </span>
        </div>
        <div class="hidden sm:flex items-center gap-5 text-xs sm:text-sm text-slate-200">
          <button class="hover:text-slate-50 transition">
            Privacy &amp; Policy
          </button>
          <button class="hover:text-slate-50 transition">
            Terms of Service
          </button>
          <span class="text-slate-300">
            ©2025 Nova Studio
          </span>
        </div>
      </div>

      <!-- Contact + brand -->
      <div class="flex flex-col gap-10 sm:gap-12 w-full">
        <!-- Numbers / email -->
        <div class="space-y-3 sm:space-y-4 max-w-full">
          <p class="text-base sm:text-lg text-slate-200">
            Reach our production team Monday–Friday, 09:00–18:00 CET.
          </p>
          <div class="flex flex-col text-slate-50">
            <span class="text-3xl sm:text-4xl lg:text-7xl font-medium tracking-tight">
              +49 171 294 8037
            </span>
            <span class="mt-2 text-xl sm:text-2xl lg:text-[28px] font-medium tracking-tight text-slate-50">
              projects@novastudio.co
            </span>
          </div>

        </div>

        <!-- Huge wordmark -->
        <div class="-mb-4 sm:-mb-6 w-full">
          <p
            class="text-[80px] xs:text-[120px] sm:text-[160px] md:text-[120px] lg:text-[160px] xl:text-[200px] leading-none font-normal text-slate-50 tracking-tight w-full">
            NOVA STUDIO</p>
        </div>
      </div>

      <!-- Mobile legal row -->
      <div class="sm:hidden pt-4 border-t border-white/10 flex flex-wrap items-center gap-3 text-xs text-slate-200">
        <button class="hover:text-slate-50 transition">
          Privacy &amp; Policy
        </button>
        <span class="w-px h-3 bg-slate-500/60"></span>
        <button class="hover:text-slate-50 transition">
          Terms of Service
        </button>
        <span class="w-px h-3 bg-slate-500/60"></span>
        <span>©2025 Nova Studio</span>
      </div>
    </div>
  </div>
</section>