<section class="w-full bg-black px-4 md:px-10 lg:px-16 xl:px-24 py-24 md:py-32 lg:py-40" data-component-type="Content">
  <!-- GRID WRAPPER -->
  <div class="grid grid-cols-1 lg:grid-cols-[65%_35%] gap-2.5 lg:gap-16 xl:gap-32 items-end">
    <!-- LEFT SIDE CONTENT -->
    <div>
      <div
        class="inline-block py-2 px-5 md:py-2.5 md:px-6 font-['Cabin'] text-[24px] md:text-[32px] font-normal text-white rounded-xl bg-[rgba(10,10,10,0.65)] backdrop-blur-[18px] border border-white/[0.12]"
        data-node="about_label"
        data-node-type="text"
        data-node-default="For Agencies"
      >
        {{about_label}}
      </div>

      <h2
        class="mt-8 font-['Cabin'] text-[28px] sm:text-[42px] md:text-[48px] lg:text-[54px] xl:text-[64px] font-medium leading-[95%] md:leading-[100%] text-white w-full"
        data-node="about_heading"
        data-node-type="text"
        data-node-default="Strategy-led marketing that drive measurable growth."
      >
        {{about_heading}}
      </h2>
    </div>

    <!-- RIGHT SIDE TEXT -->
    <p
      class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[22px] xl:text-[24px] font-normal text-[#7E7E7E] leading-[130%] max-w-[520px] lg:max-w-full"
      data-node="about_paragraph"
      data-node-type="text"
      data-node-default="Every service we offer is designed to solve real business problems. We don't execute blindly. We build systems that work."
    >
      {{about_paragraph}}
    </p>
  </div>

  <!-- FULL-WIDTH IMAGE -->
  <div class="w-full mt-16">
    <img
      src="{{about_hero_image}}"
      class="w-full rounded-xl md:rounded-2xl object-cover"
      data-node="about_hero_image"
      data-node-type="file"
      data-node-default="./assets/about-hero.webp"
    />
  </div>
</section>
