<section class="w-full bg-black px-4 md:px-12 lg:px-24 pb-24 md:pb-32 lg:pb-24" data-component-type="Content">
  <!-- TOP GRID -->
  <div class="grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-10 lg:gap-16 items-end">
    <div>
      <div
        class="inline-block py-3 px-7 font-['Cabin'] text-[20px] md:text-[32px] font-normal rounded-[14px] text-white relative bg-[rgba(10,10,10,0.65)] backdrop-blur-[20px] border border-white/[0.12] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_20px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.06)]"
        data-node="testimonial_label"
        data-node-type="text"
        data-node-default="Testimonial"
      >
        {{testimonial_label}}
      </div>

      <h2
        class="font-['Cabin'] text-[36px] md:text-[48px] lg:text-[56px] font-medium leading-[100%] text-white mt-6 md:mt-10"
        data-node="testimonial_heading"
        data-node-type="text"
        data-node-default="Words from people who saw real impact."
      >
        {{testimonial_heading}}
      </h2>
    </div>

    <p
      class="font-['Cabin'] text-[18px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%] max-w-[540px] mt-5 lg:mt-0"
      data-node="testimonial_subtext"
      data-node-type="text"
      data-node-default="Our clients don't just get marketing deliverables—they get direction towards sustainable growth."
    >
      {{testimonial_subtext}}
    </p>
  </div>

  <!-- RESPONSIVE CARD GRID -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 mt-20">
    <!-- REVIEW 1 -->
    <div
      class="w-full min-h-[200px] md:min-h-[234px] p-5 md:p-6 lg:p-8 rounded-2xl relative bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]"
    >
      <div
        class="font-['Cabin'] text-[26px] md:text-[32px] font-normal text-white"
        data-node="review1_name"
        data-node-type="text"
        data-node-default="Klein Clark"
      >
        {{review1_name}}
      </div>

      <p
        class="mt-5 font-['Cabin'] text-[18px] md:text-[24px] text-[#7E7E7E] leading-[130%]"
        data-node="review1_text"
        data-node-type="text"
        data-node-default="Clear thinking and disciplined execution from day one. Every recommendation was grounded in strategy, fundamentally changing how we approach growth."
      >
        {{review1_text}}
      </p>
    </div>

    <!-- REVIEW 2 -->
    <div
      class="w-full min-h-[200px] md:min-h-[234px] p-5 md:p-6 lg:p-8 rounded-2xl relative bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]"
    >
      <div
        class="font-['Cabin'] text-[26px] md:text-[32px] font-normal text-white"
        data-node="review2_name"
        data-node-type="text"
        data-node-default="Haley"
      >
        {{review2_name}}
      </div>

      <p
        class="mt-5 font-['Cabin'] text-[18px] md:text-[24px] text-[#7E7E7E] leading-[130%]"
        data-node="review2_text"
        data-node-type="text"
        data-node-default="They understood our audience faster than expected. Messaging became clearer and conversions improved within weeks."
      >
        {{review2_text}}
      </p>
    </div>

    <!-- REVIEW 3 -->
    <div
      class="w-full min-h-[200px] md:min-h-[234px] p-5 md:p-6 lg:p-8 rounded-2xl relative bg-[rgba(10,10,10,0.65)] backdrop-blur-[24px] border border-white/[0.12] shadow-[0_0_35px_rgba(0,0,0,0.6),inset_0_0_25px_rgba(0,0,0,0.6),inset_0_0_8px_rgba(255,255,255,0.06)]"
    >
      <div
        class="font-['Cabin'] text-[26px] md:text-[32px] font-normal text-white"
        data-node="review3_name"
        data-node-type="text"
        data-node-default="Evelyn"
      >
        {{review3_name}}
      </div>

      <p
        class="mt-5 font-['Cabin'] text-[18px] md:text-[24px] text-[#7E7E7E] leading-[130%]"
        data-node="review3_text"
        data-node-type="text"
        data-node-default="Every decision tied to clarity and outcomes. The results spoke louder than the visuals."
      >
        {{review3_text}}
      </p>
    </div>
  </div>
</section>
