/* Careers page. Core palette: navy, blue, cyan, deep blue; neutrals are navy tints. */
main.page.careers{max-width:1180px; padding-top:120px}
.careers section{margin-top:120px}
.careers .k{display:inline-flex; align-items:center; gap:10px}
.careers .k::before{content:""; width:12px; height:10px; background:#2fd4fb;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 85'%3E%3Cpath d='M0 0H100V28H28V85H0Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 85'%3E%3Cpath d='M0 0H100V28H28V85H0Z'/%3E%3C/svg%3E") no-repeat center/contain}
.careers h2{font-size:clamp(30px,3.8vw,46px); font-weight:300; color:#fff; letter-spacing:-.03em; line-height:1.08;
  margin:16px 0 0; max-width:22ch; text-wrap:balance}
.careers h2 em{font-style:normal; font-weight:600; color:#2fd4fb}
.careers p.lead{font-size:18px; color:#aab4ee; max-width:60ch; margin:20px 0 0; line-height:1.65}

/* hero */
.c-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; min-height:min(78vh,760px); position:relative}
.c-hero h1{font-size:clamp(42px,6.2vw,80px); font-weight:300; line-height:1.02; margin:18px 0 0; max-width:13ch}
.c-hero h1 em{font-weight:600}
.c-hero .intro{font-size:clamp(17px,1.6vw,20px); color:#c5ccf2; max-width:52ch; margin:26px 0 0; line-height:1.6}
.c-hero .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:15px;
  padding:15px 28px; border-radius:100px; transition:transform .15s ease, filter .15s ease, border-color .15s ease}
.btn.primary{background:#217bff; color:#fff}
.btn.primary:hover{transform:translateY(-2px); filter:brightness(1.08)}
.btn.ghost{border:1px solid #2a3499; color:#c5ccf2}
.btn.ghost:hover{border-color:#2fd4fb; color:#fff}
.btn svg{width:18px; height:18px}
.c-hero .left > *{animation:rise .8s cubic-bezier(.2,1.2,.35,1) both}
.c-hero .left > *:nth-child(2){animation-delay:.08s} .c-hero .left > *:nth-child(3){animation-delay:.16s} .c-hero .left > *:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0; transform:translateY(22px)}}

/* the role card beside the headline */
.rolecard{position:relative; border:1px solid #2a3499; border-radius:24px; padding:34px 32px 30px; overflow:hidden;
  background:radial-gradient(520px 300px at 100% 0, rgba(33,123,255,.28), transparent 60%), linear-gradient(160deg,#08106a,#020545);
  box-shadow:0 50px 90px -50px rgba(33,123,255,.55); animation:rise 1s .2s cubic-bezier(.2,1.2,.35,1) both}
.rolecard .pattern{position:absolute; right:-20px; top:-10px; width:62%; opacity:.5;
  -webkit-mask-image:linear-gradient(270deg,#000,transparent 90%); mask-image:linear-gradient(270deg,#000,transparent 90%)}
.rolecard .pattern use{fill:#217bff}
.rolecard .lbl{position:relative; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#8b93cd}
.rolecard .title{position:relative; display:flex; align-items:center; gap:14px; margin:14px 0 22px}
.rolecard .title img{width:46px; height:46px}
.rolecard .title b{display:block; font-size:28px; font-weight:600; color:#fff; letter-spacing:-.02em; line-height:1.1}
.rolecard .title span{display:block; margin-top:4px; font-size:14px; color:#8b93cd; line-height:1.4}
.rolecard dl{position:relative; margin:0; display:flex; flex-direction:column; border-top:1px solid #1b2380}
.rolecard dl div{display:grid; grid-template-columns:130px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid #1b2380}
.rolecard dt{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#6f78c4; padding-top:2px}
.rolecard dd{margin:0; font-size:15.5px; color:#e3e6fa; line-height:1.45}
.rolecard .stat{position:relative; display:flex; align-items:center; gap:14px; margin-top:22px}
.rolecard .stat .ico{flex:none; width:46px; height:46px; display:grid; place-items:center; border:1px solid #2a3499; border-radius:12px; background:rgba(33,123,255,.10)}
.rolecard .stat .ico svg{width:22px; height:22px; stroke:#2fd4fb}
.rolecard .stat b{display:block; font-size:18px; font-weight:600; color:#fff; letter-spacing:-.01em; line-height:1.2}
.rolecard .stat span{display:block; margin-top:3px; font-size:14px; color:#8b93cd; line-height:1.4}

/* what a Chief does */
.does{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px}
.does div{border:1px solid #1b2380; border-radius:18px; padding:26px 24px 24px; background:rgba(255,255,255,.015);
  transition:transform .2s ease, border-color .2s ease}
.does div:hover{transform:translateY(-4px); border-color:#2a3499}
.does i{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(33,123,255,.14); color:#2fd4fb}
.does i svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.does b{display:block; font-size:19px; font-weight:600; color:#fff; letter-spacing:-.01em; margin:18px 0 8px}
.does p{margin:0; font-size:15px; color:#aab4ee; line-height:1.55}
.note-line{margin:26px 0 0; font-size:17px; color:#c5ccf2; max-width:70ch}
.note-line b{color:#fff; font-weight:600}

/* who we look for */
.who{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start}
.who ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.who li{position:relative; padding:20px 22px 20px 54px; border-radius:16px; background:#060b57; border:1px solid #1b2380;
  color:#e3e6fa; font-size:16.5px; line-height:1.5}
.who li::before{content:""; position:absolute; left:22px; top:26px; width:15px; height:13px; background:#2fd4fb;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 85'%3E%3Cpath d='M0 0H100V28H28V85H0Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 85'%3E%3Cpath d='M0 0H100V28H28V85H0Z'/%3E%3C/svg%3E") no-repeat center/contain}
.who li b{color:#fff; font-weight:600}

/* why Chief Nest */
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
.why div{border-radius:20px; padding:30px 28px; position:relative; overflow:hidden; border:1px solid #1b2380;
  background:linear-gradient(180deg,#070c5c,#020545)}
.why div::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#102dc2,#217bff,#2fd4fb); opacity:.9}
.why .n{font-size:13px; font-weight:600; letter-spacing:.08em; color:#217bff}
.why b{display:block; font-size:22px; font-weight:600; color:#fff; letter-spacing:-.015em; margin:14px 0 10px}
.why p{margin:0; font-size:15.5px; color:#aab4ee; line-height:1.6}
.pull{margin:56px 0 0; font-size:clamp(24px,3vw,36px); font-weight:300; color:#fff; letter-spacing:-.025em; line-height:1.25; max-width:30ch}
.pull em{font-style:normal; font-weight:600; color:#2fd4fb}

/* how it works */
.steps{list-style:none; counter-reset:s; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative}
.steps::before{content:""; position:absolute; left:22px; right:22px; top:22px; height:2px; background:linear-gradient(90deg,#102dc2,#217bff,#2fd4fb)}
.steps li{counter-increment:s; position:relative; padding-right:18px}
.steps li::before{content:counter(s,decimal-leading-zero); position:relative; display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:#01043f; border:2px solid #217bff; color:#fff; font-size:14px; font-weight:600}
.steps b{display:block; font-size:18px; font-weight:600; color:#fff; margin:18px 0 6px}
.steps p{margin:0; font-size:14.5px; color:#aab4ee; line-height:1.55}

/* apply */
.apply{display:block; border-radius:28px; padding:72px 56px 64px; text-align:center;
  border:1px solid #1b2380; scroll-margin-top:90px;
  background:radial-gradient(800px 380px at 0 100%, rgba(33,123,255,.22), transparent 60%), linear-gradient(135deg,#08106a,#020545)}
.apply .side{text-align:center; max-width:680px; margin:0 auto}
.apply .side h2{margin-left:auto; margin-right:auto}
.apply .side p{color:#c5ccf2; font-size:17px; line-height:1.65; margin:18px auto 0; max-width:52ch}
.apply .mail{margin:22px 0 0; font-size:15px; color:#8b93cd}
.apply .mail a{color:#5c9bff}
.apply .act{display:flex; justify-content:center; margin-top:34px}
.btn.big{font-size:16px; padding:17px 34px}

@media (max-width:980px){
  .c-hero{grid-template-columns:1fr; min-height:0; gap:44px}
  .does{grid-template-columns:1fr 1fr}
  .who{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:26px}
  .steps::before{left:22px; right:auto; top:22px; bottom:22px; width:2px; height:auto; background:linear-gradient(180deg,#102dc2,#217bff,#2fd4fb)}
  .steps li{display:grid; grid-template-columns:46px 1fr; column-gap:18px; padding:0}
  .steps li::before{grid-row:1 / span 2}
  .steps b{margin:2px 0 4px}
}
@media (max-width:600px){
  main.page.careers{padding-top:100px}
  .careers section{margin-top:84px}
  .does{grid-template-columns:1fr}
  .rolecard{padding:26px 22px 22px}
  .rolecard dl div{grid-template-columns:1fr; gap:4px}
  .apply{padding:40px 12px 28px; border-radius:22px}
  .apply .side{padding:0 8px}
  .apply .act{margin-top:28px}
  .btn.big{width:100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .c-hero .left > *,.rolecard{animation:none} }