/* Three roles: site coordination, project office, and project management. */
.responsibility-section .role-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.responsibility-section .role-grid article {
  min-width: 0;
  padding: 26px;
}

.responsibility-section .role-grid h3 {
  font-size: clamp(1.35rem, 1.7vw, 1.6rem);
  line-height: 1.28;
}

.responsibility-section .role-grid .tag {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.responsibility-section .role-grid .role-office {
  --eyebrow-ink: #a9ddd4;
  --eyebrow-fill: #a1d8ca12;
  --eyebrow-edge: #9bd2c465;
  border-color: #a9ddd455;
  background: linear-gradient(145deg, #9bd2c416, #4777690c);
}

.responsibility-section .role-grid .role-management {
  --eyebrow-ink: #f1d5a5;
  --eyebrow-fill: #e6cda312;
  --eyebrow-edge: #e2c69d50;
}

.role-result {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #b8d4cf45;
  font-size: .925rem;
  line-height: 1.65;
}

.role-result strong { color: #d1eae4; font-weight: 600; }

@media (max-width: 1000px) {
  .responsibility-section .role-grid { grid-template-columns: 1fr; }
}