/* ============================================================
   careers.css -- Careers page
   ============================================================ */

.services-section {
  padding: 64px 20px;
  background: #000;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.5px);
  background-size: 30px 30px;
}
.services-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.services-intro h2 { font-size: 32px; color: #fff; margin: 0 0 12px; font-weight: 700; }
.services-intro p { color: #a3adc2; font-size: 15.5px; line-height: 1.7; margin: 0; }

.industry-intro-row { display: flex; align-items: center; gap: 56px; }
.industry-intro-text { flex: 1 1 50%; min-width: 0; }
.industry-intro-text h2 { font-size: 32px; color: #fff; margin: 10px 0 16px; font-weight: 700; }
.industry-intro-text p { color: #a3adc2; font-size: 15.5px; line-height: 1.75; margin: 0; max-width: 520px; }
.industry-intro-media { flex: 1 1 50%; min-width: 0; }
.industry-intro-media img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
@media (max-width: 760px) { .industry-intro-row { flex-direction: column; gap: 28px; } }

.services-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1140px; margin: 0 auto; }
@media (max-width: 900px) { .services-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid-4 { grid-template-columns: 1fr; } }
.services-card { background: #0e1015; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 26px 22px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.services-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
.services-card .si-icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--brand-blue, #3E63DD), var(--brand-purple, #7B3FE4), var(--brand-magenta, #C13FBD)); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: box-shadow 0.3s ease; }
.services-card:hover .si-icon { box-shadow: 0 0 20px rgba(51,119,255,0.5); }
.services-card .si-icon i { color: #fff; font-size: 19px; }
.services-card h4 { font-size: 15.5px; color: #fff; margin: 0 0 6px; font-weight: 700; }
.services-card p { font-size: 13px; color: #a3adc2; line-height: 1.6; margin: 0; }

.checklist { display: flex; flex-direction: column; gap: 14px; margin: 0 auto; max-width: 560px; }
.checklist-item { display: flex; align-items: flex-start; gap: 12px; }
.careers-dept-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 900px; margin: 0 auto; }
.dept-chip {
  display: inline-block;
  background: #0e1015;
  border: 1px solid rgba(255,255,255,0.1);
  color: #e4e8f0;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 30px;
}
.checklist-item .check-icon { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; background: rgba(61,220,132,0.15); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.checklist-item .check-icon i { color: #3ddc84; font-size: 12px; }
.checklist-item span:last-child { color: #e4e8f0; font-size: 15px; line-height: 1.5; font-weight: 500; }

.feature-row { display: flex; align-items: center; gap: 56px; max-width: 1080px; margin: 0 auto; padding: 0; }
.feature-row-media { flex: 1 1 42%; min-width: 0; }
.feature-row-media img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.feature-row-text { flex: 1 1 58%; min-width: 0; }
.feature-row-text h3 { font-size: 24px; color: #fff; margin: 0 0 14px; font-weight: 700; }
.feature-row-text p { font-size: 15px; color: #a3adc2; line-height: 1.75; margin: 0; }
@media (max-width: 760px) { .feature-row { flex-direction: column; gap: 26px; } }

.services-final-cta { padding: 80px 20px; background: #000; }
.industry-cta-row { display: flex; align-items: center; gap: 56px; }
.industry-cta-media { flex: 1 1 40%; min-width: 0; }
.industry-cta-media img { width: 100%; height: auto; display: block; }
.industry-cta-text { flex: 1 1 60%; min-width: 0; }
.industry-cta-text h2 { color: #fff; font-size: 28px; margin: 0 0 14px; font-weight: 700; }
.industry-cta-text p { color: #9ca9c4; font-size: 15px; line-height: 1.7; margin: 0 0 24px; }
.industry-cta-text a.mailto { color: #8fb0ff; }
@media (max-width: 760px) { .industry-cta-row { flex-direction: column; gap: 28px; text-align: center; } }