<section class="relative bg-black overflow-hidden" data-component-type="Content" data-component-slug="real-estate-template-about_banner">

  <!-- GRADIENT OVERLAY -->
  <div class="absolute inset-0 bg-gradient-to-b from-black via-black/90 to-black/80"></div>

  <div class="relative max-w-[90%] mx-auto
           min-h-[320px] sm:min-h-[320px] lg:min-h-[420px]
           flex flex-col items-center justify-center text-center">

    <!-- EYEBROW -->
    <span class="text-[22px] sm:text-sm text-white tracking-wide mb-4" data-node="story_eyebrow" data-node-type="text" data-node-label="Story Eyebrow Text" data-node-default="Our Story">
      {{story_eyebrow}}
    </span>

    <!-- HEADING -->
    <h1 class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl
             font-semibold text-white
             leading-[32px] sm:leading-[42px] lg:leading-[54px]
             max-w-3xl" data-node="story_heading" data-node-type="textarea" data-node-label="Story Heading" data-node-default="Where Innovation Meets Meaningful Homebuilding">
      {{story_heading}}
    </h1>

    <!-- DESCRIPTION -->
    <p class="mt-4 sm:mt-6 text-sm sm:text-base text-[#BDBDBD] max-w-xl" data-node="story_description" data-node-type="textarea" data-node-label="Story Description" data-node-default="Since the beginning, our mission has been simple: create spaces that feel warm, functional, and future-ready.">
      {{story_description}}
    </p>

    <!-- CTA BUTTON -->
    <button class="mt-8 px-6 py-3 rounded-full
             border border-white/40 text-white text-sm
             hover:bg-white hover:text-black
             transition-all duration-300" data-node="story_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Ongoing Offers">
      {{story_cta_text}}
    </button>

  </div>
</section>