Remove role display from beneficiary detail header

app/(tabs)/beneficiaries/[id]/index.tsx

@@ -344,14 +344,7 @@ export default function BeneficiaryDetailScreen() {
               </Text>
             </View>
           )}
-          <View style={styles.headerTitleContainer}>
           <Text style={styles.headerTitle}>{beneficiary.name}</Text>
-            {beneficiary.role && (
-              <Text style={styles.headerRole}>
-                {beneficiary.role.charAt(0).toUpperCase() + beneficiary.role.slice(1)}
-              </Text>
-            )}
-          </View>
         </View>
 
         <BeneficiaryMenu
@@ -574,19 +567,11 @@ const styles = StyleSheet.create({
     height: AvatarSizes.sm,
     borderRadius: AvatarSizes.sm / 2,
   },
-  headerTitleContainer: {
-    flexDirection: 'column',
-  },
   headerTitle: {
     fontSize: FontSizes.lg,
     fontWeight: FontWeights.semibold,
     color: AppColors.textPrimary,
   },
-  headerRole: {
-    fontSize: FontSizes.xs,
-    color: AppColors.textMuted,
-    marginTop: 1,
-  },
   // Debug Panel
   debugPanel: {
     backgroundColor: '#FFF9C4',