/* ===================================
   CAREERS PAGE - careers.css  (loaded after style.css, scroll-hero.css; theme.css after it)
   Colours: deep #051c2c, electric #2251ff, cyan #00a9f4, white
   =================================== */
body.cr-body { background: #051c2c; color: #fff; overflow-x: hidden; }
.cr-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: 3px; margin-bottom: 16px; }
.cr-eyebrow span { color: #00a9f4; }

.cr-hero { padding: 140px 0 70px; background: #051c2c; }
.cr-title { max-width: 900px; margin: 0 0 22px; }
.cr-title .out { color: transparent; -webkit-text-stroke: 2px #00a9f4; }
.cr-lead { max-width: 620px; font-size: 1.15rem; line-height: 1.7; color: rgba(255,255,255,.85); margin: 0; }

/* ---------- vacancies on electric blue ---------- */
.cr-jobs { background: #2251ff; padding: 90px 0 100px; border-top: 4px solid #00a9f4; }
.cr-h2 { margin: 0 0 40px; }
.cr-list { max-width: 980px; }
.cr-item { border-bottom: 1px solid rgba(255,255,255,.35); }
.cr-item:first-child { border-top: 1px solid rgba(255,255,255,.35); }
.cr-item h3 { margin: 0; font-size: 1.15rem; }
.cr-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 6px; background: none; border: 0; color: #fff; font: inherit; font-weight: 700; font-size: 1.15rem; text-align: left; cursor: pointer; transition: color .25s ease, padding .25s ease; }
.cr-head:hover { color: #fff; padding-left: 14px; }
.cr-head:hover .cr-plus { background: #00a9f4; border-color: #00a9f4; color: #051c2c; }
.cr-plus { position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor; transition: background .3s ease, color .3s ease, transform .3s ease; }
.cr-plus::before, .cr-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%,-50%); transition: transform .3s ease; }
.cr-plus::before { width: 12px; height: 2px; }
.cr-plus::after { width: 2px; height: 12px; }
.cr-head[aria-expanded="true"] .cr-plus { background: #fff; color: #2251ff; }
.cr-head[aria-expanded="true"] .cr-plus::after { transform: translate(-50%,-50%) rotate(90deg); }

.cr-panel { padding: 4px 6px 30px; }
.cr-facts { margin: 0 0 24px; }
.cr-facts > div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.2); }
.cr-facts > div:first-child { border-top: 0; }
.cr-facts dt { font-weight: 700; }
.cr-facts dd { margin: 0; color: rgba(255,255,255,.92); }
.cr-facts ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.cr-apply { background: #051c2c; color: #fff; border: 2px solid #051c2c; border-radius: 60px; padding: 12px 28px; font-weight: 700; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease; }
.cr-apply:hover { background: #00a9f4; border-color: #00a9f4; color: #051c2c; transform: translateX(4px); }
.cr-note { margin: 40px 0 0; color: rgba(255,255,255,.9); }
.cr-note a { color: #fff; font-weight: 700; }
.cr-note a:hover { color: #051c2c; }

/* ---------- apply pop-up ---------- */
html.ap-lock { overflow: hidden; }
.ap { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 28, 44, .78); overflow-y: auto; }
.ap[hidden] { display: none; }
.ap-card { position: relative; width: 100%; max-width: 640px; background: #fff; color: #051c2c; border-radius: 22px; padding: 34px 32px 32px; margin: auto; animation: apIn .3s ease; }
@keyframes apIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.ap-card h2 { text-align: center; font-size: 1.7rem; font-weight: 700; margin: 0 0 26px; color: #051c2c; }
.ap-close { position: absolute; top: 14px; right: 18px; background: none; border: 0; font-size: 2rem; line-height: 1; color: #051c2c; cursor: pointer; transition: transform .25s ease, color .25s ease; }
.ap-close:hover { transform: rotate(90deg); color: #2251ff; }
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.ap-input { width: 100%; padding: 14px 16px; border: 1.5px solid #cfe4f7; border-radius: 14px; background: #fff; color: #051c2c; font: inherit; font-size: .95rem; outline: none; transition: border-color .25s ease, box-shadow .25s ease; }
.ap-input:focus { border-color: #2251ff; box-shadow: 0 0 0 3px rgba(34,81,255,.15); }
.ap-input[readonly] { background: #eef3ff; font-weight: 700; }
.ap-input.is-invalid { border-color: #051c2c; background: #eef3ff; }
.ap-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 16px; border: 1.5px dashed #9cc2ea; border-radius: 14px; cursor: pointer; color: #051c2c; transition: background .25s ease, border-color .25s ease; }
.ap-drop:hover, .ap-drop.drag { background: #eef6ff; border-color: #2251ff; }
.ap-drop svg { color: #2251ff; }
.ap-file { color: #2251ff; font-size: .9rem; font-weight: 700; }
.ap-drop small { font-size: .8rem; opacity: .75; }
.ap-note { min-height: 22px; margin: 12px 0 4px; text-align: center; font-weight: 700; font-size: .9rem; color: #2251ff; }
.ap-submit { display: block; margin: 0 auto; background: #2251ff; color: #fff; border: 0; border-radius: 60px; padding: 14px 34px; font-weight: 700; cursor: pointer; transition: background .3s ease, transform .3s ease; }
.ap-submit:hover { background: #051c2c; transform: translateY(-2px); }

@media (max-width: 640px) {
    .cr-hero { padding: 120px 0 50px; }
    .cr-facts > div { grid-template-columns: 1fr; gap: 4px; }
    .ap-grid { grid-template-columns: 1fr; }
    .ap-card { padding: 28px 20px 26px; }
}