<section class="w-full bg-black max-w-[90%] mx-auto pb-24 md:pb-32 lg:pb-24" data-component-type="Content" data-component-slug="portfolio-template-testimonial">
  <!-- 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-[16px] sm:text-[20px] md:text-[26px] lg: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-[28px] sm:text-[36px] md:text-[44px] lg:text-[56px] font-medium leading-[105%] 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-[14px] sm:text-[16px] md:text-[16px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[140%] 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-[20px] sm:text-[22px] md:text-[26px] lg: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-[14px] sm:text-[16px] md:text-[16px] lg:text-[24px] text-[#7E7E7E] leading-[140%]" 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-[20px] sm:text-[22px] md:text-[26px] lg: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-[14px] sm:text-[16px] md:text-[16px] lg:text-[24px] text-[#7E7E7E] leading-[140%]" 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-[20px] sm:text-[22px] md:text-[26px] lg: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-[14px] sm:text-[16px] md:text-[16px] lg:text-[24px] text-[#7E7E7E] leading-[140%]" 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>