<section class="about-section">
  <div class="container split-layout">
    
    <!-- Left Column: Content -->
    <div class="text-content">
      <p class="eyebrow">{{ 'ABOUT.EYEBROW' | translate }}</p>
      <h1>{{ 'ABOUT.TITLE' | translate }}</h1>
      <p class="subtitle">{{ 'ABOUT.SUBTITLE' | translate }}</p>
      
      <div class="divider"></div>

      <p class="description">{{ 'ABOUT.HOW_TEXT' | translate }}</p>

      <div class="tags-container">
        <span class="tag">{{ 'ABOUT.PILL_1' | translate }}</span>
        <span class="tag">{{ 'ABOUT.PILL_2' | translate }}</span>
        <span class="tag">{{ 'ABOUT.PILL_3' | translate }}</span>
        <span class="tag">{{ 'ABOUT.SERVICE_1' | translate }}</span>
        <span class="tag">{{ 'ABOUT.SERVICE_2' | translate }}</span>
      </div>
    </div>

    <!-- Right Column: Visuals -->
    <div class="visual-content">
      <div class="photo-card card-1">
        <div class="placeholder-img"></div>
        <div class="member-info">
          <span class="member-name">Member 1</span>
          <span class="member-role">Founder</span>
        </div>
      </div>
      <div class="photo-card card-2">
        <div class="placeholder-img"></div>
        <div class="member-info">
          <span class="member-name">Member 2</span>
          <span class="member-role">Co-Founder</span>
        </div>
      </div>
    </div>

  </div>
</section>

<app-locations></app-locations>
