.careers-page { padding-top: 100px; min-height: 100vh; }

/* Hero */
.careers-hero {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  color: var(--white);
  padding: 4rem 0 4.5rem;
  text-align: center;
}
.careers-hero h1 { font-size: 3rem; margin-bottom: 0.75rem; }
.careers-hero p {
  font-size: 1.2rem; max-width: 700px; margin: 0 auto 1.5rem;
  color: rgba(255,255,255,0.85);
}
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Highlights */
.highlights { padding: 4rem 0; }
.highlights-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.highlight-card {
  background: var(--white); border-radius: 12px; padding: 1.5rem;
  box-shadow: var(--shadow-light); text-align: center; transition: var(--transition);
}
.highlight-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); }
.highlight-card .icon { font-size: 1.8rem; color: var(--primary-color); margin-bottom: 0.75rem; }
.highlight-card h3 { color: var(--text-dark); margin-bottom: 0.5rem; }
.highlight-card p { color: var(--text-light); }

/* Roles */
.roles-section { padding: 4rem 0; background: var(--light-color); }
.roles-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.role-card {
  background: var(--white); border-radius: 12px; padding: 1.5rem;
  box-shadow: var(--shadow-light); transition: var(--transition);
}
.role-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); }
.role-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.role-head h3 { margin: 0; color: var(--text-dark); }
.tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tag { background: var(--light-color); color: var(--text-dark); padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.role-meta { list-style: none; margin: 0.75rem 0 0.5rem; padding: 0; display: grid; gap: 0.35rem; color: var(--text-light); }
.role-meta i { width: 18px; }
.role-actions { margin-top: 1rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* General Roles */
.general-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.note-card {
  background: var(--white); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow-light);
}
.note-card h3 { color: var(--text-dark); margin-bottom: 0.5rem; }
.note-card p { color: var(--text-light); margin-bottom: 1rem; }
.note-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Benefits */
.benefits { padding: 4rem 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.benefit-card {
  text-align: center; background: var(--white); border-radius: 12px; padding: 1.5rem;
  box-shadow: var(--shadow-light); transition: var(--transition);
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); }
.benefit-card i { font-size: 1.8rem; color: var(--primary-color); margin-bottom: 0.5rem; }
.benefit-card h4 { color: var(--text-dark); margin-bottom: 0.25rem; }
.benefit-card p { color: var(--text-light); }

/* Process (reuses your service page vibe) */
.process-section { padding: 4rem 0; }
.process-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.process-step { text-align: center; position: relative; }
.step-number {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--gradient-primary); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; margin: 0 auto 1rem; box-shadow: var(--shadow-light);
}
.process-step h3 { color: var(--text-dark); margin-bottom: 0.5rem; }
.process-step p { color: var(--text-light); }

/* Life gallery */
.life { padding: 4rem 0; background: var(--light-color); }
.life-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem;
}
.life-grid img {
  width: 100%; height: 220px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-light);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .careers-hero h1 { font-size: 2rem; }
}