/* careers: open roles list and the "how to apply" panel. Intro, cards and buttons come from about-us.css. */


.role-list{ display:grid; gap:20px; max-width:860px; margin:0 auto; }
.role-card, .role-empty{ background:#fff; border-radius:20px; padding:clamp(24px,3vw,34px); border:1px solid rgba(10,30,77,.08); box-shadow:0 12px 30px -22px rgba(10,30,77,.24); }
.role-card{ text-align:left; }
.role-needs li{ list-style:disc; }
.role-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px; margin-bottom:12px; }
.role-card h3, .role-empty h3{ font-family:"Sora",sans-serif; font-size:1.25rem; color:var(--navy); }
.role-type{ font-size:.88rem; font-weight:600; color:var(--cyan); }
.role-card > p, .role-empty p{ color:var(--body-text); line-height:1.7; }
.role-needs{ margin:16px 0 22px; padding-left:1.2em; display:grid; gap:6px; color:var(--body-text); line-height:1.6; }
.role-card .btn-outline-navy{ padding:.75rem 1.5rem; font-size:.94rem; }
.role-empty{ max-width:720px; margin:0 auto; text-align:center; }
.role-empty h3{ margin-bottom:10px; }
.role-empty a{ color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.apply-steps{ list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1000px; margin:0 auto; padding:0; }
.apply-steps li{ counter-increment:step; background:#fff; border-radius:18px; padding:26px 24px; border:1px solid var(--border); }
.apply-steps li::before{ content:"0" counter(step); display:block; font-family:"Sora",sans-serif; font-weight:800; font-size:1.4rem; color:var(--cyan); margin-bottom:10px; }
.apply-steps strong{ display:block; font-family:"Sora",sans-serif; color:var(--navy); margin-bottom:6px; }
.apply-steps span{ color:var(--body-text); line-height:1.6; font-size:.95rem; }
.apply-cta{ text-align:center; margin-top:clamp(32px,4vw,44px); }
@media (max-width:820px){ .apply-steps{ grid-template-columns:1fr; } }