Philosophy Content Section with Image Focus

<section id="novera-philosophy"
  style="background-color: #f9f8f6; color: #1c1917; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;"
  class="antialiased font-sans font-light selection:bg-[#1c1917] selection:text-white">
  <script src="https://cdn.tailwindcss.com"></script>

  <div class="pt-32 md:pt-48 pb-20 md:pb-32 px-6 md:px-12 max-w-[1400px] mx-auto">
    <div class="flex flex-col md:flex-row gap-12 md:gap-24 items-start">

      <!-- Section Label Column -->
      <div class="w-full md:w-1/4 pt-2 border-t border-[#1c1917]">
        <span class="block text-[10px] uppercase tracking-widest mt-4">
          01 — Philosophy
        </span>
      </div>

      <!-- Content Column -->
      <div class="w-full md:w-3/4">
        <h2 class="text-3xl md:text-5xl font-serif leading-tight mb-10 font-light text-[#1c1917] max-w-3xl">
          We design living spaces for clarity, not just utility. A collection
          of refined homes curated for the modern urbanist.
        </h2>

        <!-- Micro Principles -->
        <div class="border-t border-black/10 py-6 mb-10 flex flex-col md:flex-row gap-4 md:gap-12 md:items-center">
          <span class="text-[10px] uppercase tracking-widest text-black/60 font-medium">
            Light over noise
          </span>
          <span class="text-[10px] uppercase tracking-widest text-black/60 font-medium">
            Materials with intention
          </span>
          <span class="text-[10px] uppercase tracking-widest text-black/60 font-medium">
            Silence as a feature
          </span>
        </div>

        <!-- Image Container with Zoom Effect -->
        <div class="group relative w-full aspect-[21/9] overflow-hidden rounded-[2px] border border-black/10 mb-10">
          <img
            src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/34912fd8-c9c7-4c5c-8731-c9476acb42f8_1600w.jpg"
            alt="Architectural Detail"
            class="w-full h-full object-cover transform transition-transform duration-[1200ms] ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-[1.03]"
          />
        </div>

        <!-- Body Copy -->
        <div class="max-w-2xl">
          <p class="text-black/70 font-light leading-relaxed mb-8">
            Novera represents a departure from the standard rental experience.
            We focus on light, materials, and silence. Our properties are
            selected for their architectural merit and position within the
            city's most vibrant cultural districts.
          </p>

          <a href="#"
            class="inline-block text-[10px] uppercase tracking-widest border-b border-[#1c1917] pb-1 hover:text-black/60 hover:border-black/60 transition-colors font-medium">
            Explore the Novera Journal
          </a>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Ensure serif fallback for high-end aesthetic */
    #novera-philosophy .font-serif {
      font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    }

    #novera-philosophy .font-sans {
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
  </style>
</section>