/* =============================================================================
   Careers page — content styles lifted from the design (ShipNex Careers), with
   the design's OWN header, footer and preview harness removed.

   The site has one header and one footer, in lib/chrome.css, and every page
   wears them. A design file necessarily draws its own so it can be looked at in
   isolation; adopting those would have given the site an eleventh page with a
   ninth navigation bar — which is the divergence chrome.css exists to end.

   What stayed is the part only this page has: the hero, the job list and its
   filters, the application modal and its file drop.

   The bar's own background lives here, not in chrome.css, because it depends on
   the navy hero underneath it — the same arrangement features.html, privacy.html
   and the two join pages use. Leaving it out is what made the join pages render
   a white wordmark on a white bar.
   ============================================================================= */
header.nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
header.nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(18px);border-bottom-color:var(--line)}


:root{
 --navy:#16213A;--navy-2:#1E2C4A;--navy-3:#27385C;--navy-deep:#0D1420;
 --pop:#F97316;--pop-hi:#FB7A1E;--pop-lo:#F0640A;
 --ink:#101626;--ink-2:#515C6E;--ink-3:#646e7d;
 --bg:#fff;--s2:#F6F7F9;--s3:#EDEFF3;--line:#E4E7EC;
 --green:#15803D;--green-bg:#E9F6EE;--red:#C0322F;--red-bg:#FDECEC;
 --r:16px;--r-card:24px;--r-pill:999px;
}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--ink);background:#F1F3F6;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
a{color:var(--navy);text-decoration:none}a:hover{color:var(--pop)}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1;direction:ltr;unicode-bidi:isolate}
/* ===== hero ===== */
.hero{background:radial-gradient(900px 440px at 86% -12%,rgba(249,115,22,.14),transparent 60%),linear-gradient(180deg,#16213A,#101A2F);padding:131px 24px 60px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset-inline-start:-130px;bottom:-200px;width:480px;height:480px;border-radius:50%;background:rgba(255,255,255,.03)}
.hw{max-width:1180px;margin:0 auto;position:relative;display:flex;flex-direction:column;gap:15px;align-items:flex-start}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#FFD3AE;background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.34);border-radius:999px;padding:7px 15px}
.eyebrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
.hero h1{margin:0;font-size:clamp(29px,4.2vw,44px);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.26;max-width:660px;text-wrap:balance}
.hero p{margin:0;max-width:600px;font-size:16.5px;line-height:1.85;color:#A9B7D1;text-wrap:pretty}
.hstats{display:flex;gap:30px;flex-wrap:wrap;margin-top:10px}
.hst{display:flex;flex-direction:column;gap:3px}
.hst b{font-size:25px;font-weight:700;color:#fff;letter-spacing:-.01em}
.hst span{font-size:13px;color:#8C9AB8;font-weight:500}
/* ===== body ===== */
.main{max-width:1180px;margin:0 auto;padding:34px 24px 70px}
.bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.bar h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
.bar .cnt{font-size:14px;font-weight:600;color:var(--ink-3)}
.filters{display:flex;gap:10px;margin-inline-start:auto;flex-wrap:wrap}
.fsel{position:relative;display:flex}
.fsel select{height:46px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;padding:0 15px;padding-inline-end:42px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;appearance:none}
.fsel select:focus{outline:none;border-color:var(--navy-3);box-shadow:0 0 0 4px rgba(39,56,92,.1)}
.fsel .caret{position:absolute;inset-inline-end:14px;top:0;bottom:0;display:grid;place-items:center;pointer-events:none}
.fsel .caret svg{width:16px;height:16px;stroke:var(--ink-3);fill:none;stroke-width:2.2}
.jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.job{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 24px 20px;display:flex;flex-direction:column;gap:14px;transition:border-color .16s,box-shadow .16s,transform .16s}
.job:hover{border-color:#CFD6E0;box-shadow:0 22px 44px -26px rgba(9,15,32,.3);transform:translateY(-2px)}
.jtop{display:flex;align-items:flex-start;gap:13px}
.jic{width:46px;height:46px;border-radius:14px;background:var(--navy);display:grid;place-items:center;flex:0 0 46px}
.jic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.jt{display:flex;flex-direction:column;gap:5px;min-width:0}
.jt h3{margin:0;font-size:18px;font-weight:700;line-height:1.45;letter-spacing:-.01em}
.jdept{font-size:13px;font-weight:600;color:var(--pop)}
.jmeta{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--s2);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px}
.tag svg{width:14px;height:14px;stroke:var(--ink-3);fill:none;stroke-width:2}
.tag.new{color:var(--green);background:var(--green-bg);border-color:#C6E5D2}
.tag.new svg{stroke:var(--green)}
.jdesc{margin:0;font-size:14px;color:var(--ink-2);line-height:1.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.jposted{font-size:12.5px;color:var(--ink-3);font-weight:500}
.apply{margin-inline-start:auto;height:46px;display:inline-flex;align-items:center;gap:9px;padding:0 22px;border:none;border-radius:var(--r-pill);background:#C2410C;color:#fff;font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:0 10px 22px -10px rgba(240,100,10,.6)}
.apply:hover{filter:brightness(1.06)}
.apply svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.3}
/* empty */
.empty{display:none;background:var(--bg);border:1px dashed var(--line);border-radius:var(--r-card);padding:64px 30px;text-align:center;flex-direction:column;align-items:center;gap:15px}
.empty.on{display:flex}
.empty .em{width:74px;height:74px;border-radius:22px;background:var(--s2);display:grid;place-items:center}
.empty .em svg{width:34px;height:34px;stroke:var(--ink-3);fill:none;stroke-width:2}
.empty h3{margin:0;font-size:21px;font-weight:700}
.empty p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.85;max-width:430px}
.socials{display:flex;gap:10px;margin-top:4px}
.socials a{width:44px;height:44px;border-radius:13px;border:1px solid var(--line);display:grid;place-items:center;background:#fff}
.socials a:hover{border-color:var(--pop)}
.socials svg{width:19px;height:19px;stroke:var(--ink-2);fill:none;stroke-width:2}
.socials a:hover svg{stroke:var(--pop)}
/* ===== modal ===== */
.ov{position:fixed;inset:0;background:rgba(9,15,32,.62);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:32px 18px;overflow:auto}
.ov.on{display:flex}
.modal{background:#fff;border-radius:var(--r-card);width:640px;max-width:100%;overflow:hidden;box-shadow:0 50px 100px -30px rgba(9,15,32,.7);margin:auto}
.mhead{padding:24px 28px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:14px}
.mhead .mi{width:46px;height:46px;border-radius:14px;background:var(--navy);display:grid;place-items:center;flex:0 0 46px}
.mhead .mi svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.mhead .mt{min-width:0;flex:1}
.mhead h3{margin:0 0 5px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.mhead .msub{display:flex;gap:8px;flex-wrap:wrap}
.mx{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 40px}
.mx svg{width:18px;height:18px;stroke:var(--ink-2);fill:none;stroke-width:2}
.mbody{padding:24px 28px 28px}
.pre-job{display:flex;align-items:center;gap:11px;background:var(--s2);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;margin-bottom:20px;font-size:14px}
.pre-job svg{width:18px;height:18px;stroke:var(--pop);fill:none;stroke-width:2;flex:0 0 18px}
.pre-job b{font-weight:700}
.pre-job span.lock{margin-inline-start:auto;font-size:12px;color:var(--ink-3);font-weight:600}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}
.frow.one{grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.field label i{color:var(--pop);font-style:normal;margin-inline-start:2px}
.ctl{position:relative;display:flex}
.ctl>input,.ctl>select,.ctl>textarea{width:100%;height:52px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;padding:0 15px;font-size:15px;color:var(--ink);transition:border-color .16s,box-shadow .16s}
.ctl>textarea{height:auto;min-height:92px;padding:14px 15px;resize:vertical;line-height:1.75}
.ctl>select{cursor:pointer;appearance:none;padding-inline-end:42px}
.ctl>input::placeholder,.ctl>textarea::placeholder{color:#AEB6C2}
.ctl>input:focus,.ctl>select:focus,.ctl>textarea:focus{outline:none;border-color:var(--navy-3);box-shadow:0 0 0 4px rgba(39,56,92,.11)}
.ctl .caret{position:absolute;inset-inline-end:14px;top:0;bottom:0;display:grid;place-items:center;pointer-events:none}
.ctl .caret svg{width:16px;height:16px;stroke:var(--ink-3);fill:none;stroke-width:2.2}
.ctl.phone>input{direction:ltr;text-align:left;padding-inline-start:76px;letter-spacing:.4px}
.ctl .pre{position:absolute;inset-inline-start:0;top:0;bottom:0;width:64px;display:grid;place-items:center;font-size:14.5px;font-weight:700;color:var(--ink-2);background:var(--s2);border-inline-end:1.5px solid var(--line);border-start-start-radius:var(--r);border-end-start-radius:var(--r);direction:ltr}
.ctl.en>input{direction:ltr;text-align:left}
.field.bad .ctl>input,.field.bad .ctl>select,.field.bad .ctl>textarea{border-color:var(--red);background:#FFFAFA}
.ferr{display:none;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--red)}
.ferr svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;flex:0 0 14px}
.field.bad .ferr{display:flex}
/* CV dropzone */
.drop{border:1.5px dashed #C9D0DB;border-radius:var(--r);background:var(--s2);padding:26px 20px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;cursor:pointer;transition:border-color .16s,background .16s}
.drop:hover{border-color:var(--pop);background:#FFF8F2}
.drop.over{border-color:var(--pop);background:#FFF2E6;border-style:solid}
.drop .di{width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.drop .di svg{width:23px;height:23px;stroke:var(--pop);fill:none;stroke-width:2}
.drop b{font-size:15px;font-weight:700}
.drop span{font-size:12.5px;color:var(--ink-3);line-height:1.7}
.field.bad .drop{border-color:var(--red);background:#FFFAFA}
.filerow{display:none;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;padding:13px 15px}
.filerow.on{display:flex}
.filerow .fi{width:40px;height:40px;border-radius:11px;background:var(--red-bg);display:grid;place-items:center;flex:0 0 40px}
.filerow .fi svg{width:19px;height:19px;stroke:var(--red);fill:none;stroke-width:2}
.filerow .fmeta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.filerow .fmeta b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filerow .fmeta span{font-size:12px;color:var(--ink-3)}
.filerow .fdel{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 36px}
.filerow .fdel svg{width:16px;height:16px;stroke:var(--ink-2);fill:none;stroke-width:2}
.filerow .fdel:hover{border-color:var(--red)}.filerow .fdel:hover svg{stroke:var(--red)}
.btn{width:100%;height:58px;margin-top:22px;border:none;border-radius:var(--r-pill);background:#C2410C;color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;box-shadow:0 14px 30px -12px rgba(240,100,10,.62)}
.btn:hover{filter:brightness(1.05)}
.btn svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.3}
.btn[disabled]{cursor:default;filter:saturate(.55);box-shadow:none}
.spin{width:18px;height:18px;border-radius:50%;border:2.4px solid rgba(255,255,255,.42);border-top-color:#fff;animation:sp .75s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}.job:hover{transform:none}}
.legal{margin:14px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.8;text-align:center}
.done{display:none;padding:50px 30px 44px;text-align:center;flex-direction:column;align-items:center;gap:16px}
.done.on{display:flex}
.done .dm{width:80px;height:80px;border-radius:25px;background:var(--green-bg);display:grid;place-items:center}
.done .dm svg{width:39px;height:39px;stroke:var(--green);fill:none;stroke-width:2.6}
.done h3{margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em}
.done p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.85;max-width:420px}
.refbox{display:flex;align-items:center;gap:10px;background:var(--s2);border:1px dashed var(--line);border-radius:14px;padding:12px 18px;font-size:13.5px;color:var(--ink-2);font-weight:600}
.refbox b{font-family:ui-monospace,monospace;color:var(--ink);direction:ltr}
.dact{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.gbtn{height:48px;padding:0 22px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:#fff;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer}

@media(max-width:560px){
 .hero{padding:117px 16px 44px}.main{padding:26px 16px 54px}
 .jobs{grid-template-columns:1fr}
 .frow{grid-template-columns:1fr}
 .filters{margin-inline-start:0;width:100%}.fsel{flex:1}.fsel select{width:100%}
 .mhead,.mbody{padding-inline:18px}
 .apply{width:100%;justify-content:center;margin-inline-start:0}
 .jfoot{flex-direction:column;align-items:stretch}
 .ov{padding:0}.modal{border-radius:0;min-height:100%}
}
</style>

/* ── two rules the careers design does not carry ──────────────────────────────
   The design has no send-failure state and no close-button on its success panel:
   a design file shows the states someone drew, and "the server did not answer"
   is not usually one of them. Both are taken from the join pages so the two
   public forms fail and finish the same way, rather than inventing a third look.

   `.sendfail` is deliberately NOT a field error: nothing the applicant typed is
   wrong, so it must not look like their mistake. */
.sendfail{display:none;align-items:flex-start;gap:9px;margin-top:14px;padding:13px 15px;border-radius:var(--r);background:#FDECEC;border:1px solid rgba(192,50,47,.28);font-size:13.5px;font-weight:600;color:var(--red);line-height:1.7}
.sendfail.on{display:flex}
.sendfail svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;flex:0 0 17px;margin-top:2px}
.again{background:none;border:none;color:var(--ink-3);font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;padding:0;margin-top:4px}