<section class="w-full px-4 md:px-12 lg:px-24 pb-5 bg-black" data-component-type="Content">
  <!-- GRID: LEFT TEXT + RIGHT IMAGE -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
    <!-- LEFT SIDE -->
    <div>
      <!-- TAG -->
      <div
        class="inline-block py-2 px-5 md:px-6 mb-8 font-['Cabin'] text-[22px] sm:text-[26px] md:text-[32px] font-normal text-white rounded-xl bg-[rgba(10,10,10,0.65)] border border-white/[0.12] backdrop-blur-[18px] w-fit"
        data-node="approach_tag"
        data-node-type="text"
        data-node-label="Approach Tag"
        data-node-default="Our Approach"
      >
        {{approach_tag}}
      </div>

      <!-- TITLE -->
      <h2
        class="font-['Cabin'] text-[34px] sm:text-[40px] md:text-[48px] lg:text-[56px] xl:text-[64px] font-medium leading-[95%] md:leading-[100%] text-white mb-8"
        data-node="approach_title"
        data-node-type="text"
        data-node-label="Approach Title"
        data-node-default="Strategy always comes before execution."
      >
        {{approach_title}}
      </h2>

      <!-- ITEM 1 TITLE -->
      <div
        class="font-['Cabin'] text-[24px] sm:text-[26px] md:text-[28px] lg:text-[30px] xl:text-[32px] font-medium text-white mt-8"
        data-node="approach_point1_title"
        data-node-type="text"
        data-node-label="Point 1 Title"
        data-node-default="Strategic Clarity"
      >
        {{approach_point1_title}}
      </div>

      <!-- ITEM 1 TEXT -->
      <p
        class="font-['Cabin'] text-[18px] sm:text-[19px] md:text-[20px] lg:text-[22px] xl:text-[24px] font-normal text-[#7e7e7e] leading-[130%] mt-3 max-w-[700px]"
        data-node="approach_point1_text"
        data-node-type="textarea"
        data-node-label="Point 1 Description"
        data-node-default="Every decision is rooted in understanding the business model, audience behavior, and the outcome the work must drive."
      >
        {{approach_point1_text}}
      </p>

      <!-- ITEM 2 TITLE -->
      <div
        class="font-['Cabin'] text-[24px] sm:text-[26px] md:text-[28px] lg:text-[30px] xl:text-[32px] font-medium text-white mt-8"
        data-node="approach_point2_title"
        data-node-type="text"
        data-node-label="Point 2 Title"
        data-node-default="Purposeful Execution"
      >
        {{approach_point2_title}}
      </div>

      <!-- ITEM 2 TEXT -->
      <p
        class="font-['Cabin'] text-[18px] sm:text-[19px] md:text-[20px] lg:text-[22px] xl:text-[24px] font-normal text-[#7e7e7e] leading-[130%] mt-3 max-w-[700px]"
        data-node="approach_point2_text"
        data-node-type="textarea"
        data-node-label="Point 2 Description"
        data-node-default="Copy, design, and campaigns exist to move users from attention to action. If it doesn't serve a purpose, it doesn't get built."
      >
        {{approach_point2_text}}
      </p>

      <!-- ITEM 3 TITLE -->
      <div
        class="font-['Cabin'] text-[24px] sm:text-[26px] md:text-[28px] lg:text-[30px] xl:text-[32px] font-medium text-white mt-8"
        data-node="approach_point3_title"
        data-node-type="text"
        data-node-label="Point 3 Title"
        data-node-default="Measurable Impact"
      >
        {{approach_point3_title}}
      </div>

      <!-- ITEM 3 TEXT -->
      <p
        class="font-['Cabin'] text-[18px] sm:text-[19px] md:text-[20px] lg:text-[22px] xl:text-[24px] font-normal text-[#7e7e7e] leading-[130%] mt-3 max-w-[700px]"
        data-node="approach_point3_text"
        data-node-type="textarea"
        data-node-label="Point 3 Description"
        data-node-default="We value results over opinions. Success is judged by performance, engagement, conversion, and growth."
      >
        {{approach_point3_text}}
      </p>
    </div>

    <!-- RIGHT SIDE (IMAGE) -->
    <div>
      <img
        src="{{approach_image}}"
        alt="Our Approach Image"
        class="w-full max-h-[400px] sm:max-h-[500px] md:max-h-[600px] lg:max-h-none rounded-2xl object-cover"
        data-node="approach_image"
        data-node-type="file"
        data-node-label="Approach Image"
        data-node-default="./assets/our approach.webp"
      />
    </div>
  </div>
</section>
