<section data-component-type="Features" class="w-full" data-component-slug="politician-party-template-serving-people">
  

  <!-- ================= CONTENT ================= -->
  <div class="party-values">
    <div class="party-values-bg"></div>

    <!-- HEADER -->
    <div class="values-header">
      <div class="values-eyebrow">
        <div class="values-dot"></div>
        <span data-node="values_eyebrow" data-node-type="text" data-node-default="SERVING PEOPLE FIRST">
          {{values_eyebrow}}
        </span>
      </div>

      <h2 class="values-title" data-node="values_title" data-node-type="text" data-node-default="A Party With Purpose">
        {{values_title}}
      </h2>

      <p class="values-desc" data-node="values_desc" data-node-type="text" data-node-default="Our approach to leadership is grounded in integrity, accountability, and evidence-based decision-making.">
        {{values_desc}}
      </p>
    </div>

    <!-- CARDS -->
    <div class="values-grid">
      <div class="value-card">
        <div class="value-card-top">
          <div class="value-number" data-node="value_1_number" data-node-type="text" data-node-default="1">
            {{value_1_number}}
          </div>
          <div class="value-title" data-node="value_1_title" data-node-type="text" data-node-default="Integrity">
            {{value_1_title}}
          </div>
        </div>
        <div class="value-desc" data-node="value_1_desc" data-node-type="text" data-node-default="We uphold transparent systems that ensure public trust, ethical leadership, and accountability at every level of governance.">
          {{value_1_desc}}
        </div>
      </div>

      <div class="value-card">
        <div class="value-card-top">
          <div class="value-number" data-node="value_2_number" data-node-type="text" data-node-default="2">
            {{value_2_number}}
          </div>
          <div class="value-title" data-node="value_2_title" data-node-type="text" data-node-default="Stability">
            {{value_2_title}}
          </div>
        </div>
        <div class="value-desc" data-node="value_2_desc" data-node-type="text" data-node-default="Strong institutions and steady leadership create confidence during times of change and uncertainty.">
          {{value_2_desc}}
        </div>
      </div>

      <div class="value-card">
        <div class="value-card-top">
          <div class="value-number" data-node="value_3_number" data-node-type="text" data-node-default="3">
            {{value_3_number}}
          </div>
          <div class="value-title" data-node="value_3_title" data-node-type="text" data-node-default="Inclusivity">
            {{value_3_title}}
          </div>
        </div>
        <div class="value-desc" data-node="value_3_desc" data-node-type="text" data-node-default="Progress must benefit all segments of society, leaving no one behind. We focus on policies that promotes social cohesion.">
          {{value_3_desc}}
        </div>
      </div>

      <div class="value-card">
        <div class="value-card-top">
          <div class="value-number" data-node="value_4_number" data-node-type="text" data-node-default="4">
            {{value_4_number}}
          </div>
          <div class="value-title" data-node="value_4_title" data-node-type="text" data-node-default="Pragmatism">
            {{value_4_title}}
          </div>
        </div>
        <div class="value-desc" data-node="value_4_desc" data-node-type="text" data-node-default="Effective governance balances ideals with real-world outcomes. Our policies are shaped by data, and experience.">
          {{value_4_desc}}
        </div>
      </div>
    </div>

    <div class="values-divider"></div>
  </div>

  <!-- ================= ANIMATION SCRIPT ================= -->
  
</section>