/* self-hosted fonts (OFL): Cairo, Outfit, Noto Nastaliq Urdu (Urdu subset) */
@font-face{font-family:Cairo;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/cairo-ar.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Cairo;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/cairo-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Outfit;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/outfit-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Noto Nastaliq Urdu';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/nastaliq-ur.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
:root{--navy:#0A1F44;--ocean:#0B5C8A;--teal:#14B8A6;--gold:#F5B700;--bg:#F3F6FA}
*{box-sizing:border-box}body{margin:0;font-family:Outfit,Cairo,system-ui,sans-serif;background:var(--bg);color:var(--navy)}
[dir=rtl] body,html[dir=rtl]{font-family:Cairo,Outfit,system-ui,sans-serif}
header{background:var(--navy);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;z-index:5}
header img{height:48px}.langs button{background:transparent;border:2px solid #ffffff55;color:#fff;border-radius:10px;padding:6px 10px;font-size:15px;font-weight:700;margin-inline-start:4px;font-family:inherit}
.langs button.on{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.hero{background:linear-gradient(160deg,var(--navy) 60%,#0d2a5a);border-bottom:4px solid var(--gold);color:#fff;padding:18px 16px 22px;text-align:center}
.hero h1{margin:0 0 4px;font-size:26px}.hero p{margin:0;opacity:.9;font-size:16px}
.wrap{max-width:1100px;margin:0 auto;padding:14px}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
select{font-size:18px;padding:14px;border-radius:14px;border:2px solid #cfd8e3;background:#fff;font-family:inherit;color:var(--navy);width:100%}
h2{font-size:20px;margin:16px 0 10px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tile{background:#fff;border:3px solid transparent;border-radius:18px;padding:12px 4px;text-align:center;cursor:pointer;box-shadow:0 2px 6px #0a1f4414;font-family:inherit;color:var(--navy)}
.tile .ic{font-size:38px;display:block}.tile .lb{font-size:14px;font-weight:700;display:block;margin-top:4px}
.tile.on{border-color:var(--teal);background:#e6faf7}
.jobs{display:grid;gap:12px}
.card{background:#fff;border-radius:18px;padding:14px;box-shadow:0 2px 8px #0a1f4414;display:grid;grid-template-columns:60px 1fr;gap:12px;align-items:start}
.card .ic{font-size:40px;background:var(--bg);border-radius:14px;height:60px;display:flex;align-items:center;justify-content:center}
.card h3{margin:0 0 4px;font-size:19px}.meta{font-size:16px;color:#3b4b66}.sal{color:#0b7a5c;font-weight:800;font-size:17px;margin-top:4px}
.badge{display:inline-block;background:var(--gold);color:var(--navy);font-size:12px;font-weight:800;border-radius:6px;padding:1px 6px;margin-inline-start:6px;vertical-align:middle}
.btns{grid-column:1/-1;display:flex;gap:8px}
.btn{flex:1;text-align:center;text-decoration:none;font-size:20px;font-weight:800;padding:14px 8px;border-radius:14px;color:#fff;background:var(--ocean);white-space:nowrap;font-family:inherit;border:0}
.btn.wa{background:#0E7A3F}.btn.call{background:var(--navy)}
.ad{border:2px dashed #b9c5d6;border-radius:14px;color:#5b6b85;text-align:center;padding:22px;margin:14px 0;font-size:14px;background:#fff}
.notice{background:#fff7d6;border:1px solid var(--gold);border-radius:12px;padding:8px 12px;font-size:14px;margin-bottom:10px}
.post{display:block;text-align:center;background:var(--gold);color:var(--navy);font-weight:800;font-size:20px;padding:16px;border-radius:16px;text-decoration:none;margin:16px 0}
footer{background:var(--navy);color:#cbd5e1;text-align:center;padding:18px;font-size:14px;margin-top:20px}
form label{display:block;font-weight:700;margin:12px 0 4px;font-size:17px}form input,form textarea{width:100%;font-size:18px;padding:14px;border-radius:14px;border:2px solid #cfd8e3;font-family:inherit}
.empty{text-align:center;font-size:18px;padding:30px;color:#5b6b85}
@media(min-width:800px){.tiles{grid-template-columns:repeat(8,1fr)}.jobs{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr 1fr 1fr}.hero h1{font-size:34px}.layout{display:grid;grid-template-columns:1fr 300px;gap:18px}.side .ad{height:600px;display:flex;align-items:center;justify-content:center}}
@media(max-width:799px){.side{display:none}}
#fk{grid-column:1\/-1}@media(min-width:800px){#fk{grid-column:auto}}.btn.wa,.btn.call{font-size:17px}
nav.top{display:flex;gap:6px}nav.top a{color:#fff;text-decoration:none;font-weight:800;padding:6px 10px;border-radius:10px;border:2px solid #ffffff33;font-size:15px}nav.top a.on{border-color:var(--teal);color:var(--teal)}
header{flex-wrap:wrap}
.wcard .ph{width:60px;height:60px;border-radius:14px;object-fit:cover}
.av{display:inline-block;font-size:13px;font-weight:800;border-radius:8px;padding:2px 8px;background:#d1fae5;color:#065f46}.av.no{background:#fee2e2;color:#991b1b}
.check{display:flex;gap:12px;align-items:flex-start;font-size:17px;font-weight:700;background:#fff;border:2px solid #cfd8e3;border-radius:14px;padding:14px;margin-top:12px}
.check input{width:28px;height:28px;flex:none;accent-color:var(--teal)}
.msg{font-size:19px;font-weight:800;padding:14px;border-radius:14px;margin-top:12px;display:none}.msg.ok{display:block;background:#d1fae5}.msg.err{display:block;background:#fee2e2}
.pick .tile.on{border-color:var(--gold);background:#fff7d6}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.ts{margin-top:12px;border:2px dashed #b9c5d6;border-radius:12px;padding:10px;text-align:center;color:#5b6b85;font-size:13px}
table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}td,th{border-bottom:1px solid #e2e8f0;padding:8px;text-align:start;vertical-align:top}
.sbtn{border:0;border-radius:8px;padding:8px 10px;font-weight:800;color:#fff;margin:2px;cursor:pointer;font-family:inherit}
.legal p,.legal li{font-size:16px;line-height:1.6}
.filters>*{min-width:0;width:100%}
.stabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.stab{font-family:inherit;font-size:17px;font-weight:800;padding:14px 6px;border-radius:14px;border:3px solid #cfd8e3;background:#fff;color:var(--navy);cursor:pointer}
.stab.on{background:var(--navy);color:#fff;border-color:var(--gold)}
.sech{margin:4px 0 10px;font-size:19px}
.sec{display:none}.sec.act{display:block}
.sec.office .tile .ic{filter:saturate(.9)}
@media(min-width:800px){.secs:not(.single){display:grid;grid-template-columns:3fr 2fr;gap:16px}.secs:not(.single) .sec{display:block;background:#fff;border-radius:18px;padding:12px;border:3px solid transparent;opacity:.75}.secs:not(.single) .sec.act{border-color:var(--teal);opacity:1}
.secs:not(.single) .sec .tiles{grid-template-columns:repeat(6,1fr)}.secs:not(.single) .sec.office .tiles{grid-template-columns:repeat(4,1fr)}.secs .tile{box-shadow:none;background:var(--bg)}.stabs:has(+.secs:not(.single)){display:none}.secs.single~*{} }
@media(min-width:800px){.single .tiles{grid-template-columns:repeat(8,1fr)}}
.sechd{display:flex;align-items:center;justify-content:space-between}.clr{font-family:inherit;border:0;background:#fee2e2;color:#991b1b;font-weight:800;border-radius:10px;padding:6px 10px}
.srow{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.stile{flex:0 0 120px;scroll-snap-align:start;background:#fff;border:3px solid transparent;border-radius:16px;padding:10px 6px;text-align:center;font-family:inherit;color:var(--navy);cursor:pointer;box-shadow:0 2px 6px #0a1f4414;position:relative}
.stile .si{font-size:30px;display:block}.stile .sl{display:block;font-size:13px;font-weight:700;min-height:34px;margin-top:2px}
.stile .sn{display:inline-block;background:var(--teal);color:#fff;font-weight:800;border-radius:999px;min-width:30px;padding:2px 8px;font-size:15px;margin-top:4px}
.stile.on{border-color:var(--gold);background:#fff7d6}.stile.zero{opacity:.5}.stile.zero .sn{background:#94a3b8}
@media(min-width:800px){.filters{grid-template-columns:repeat(4,1fr)}.srow{display:grid;grid-template-columns:repeat(7,1fr);overflow:visible}.stile{flex:auto}}
.btns:has(.wa){flex-wrap:wrap}.btns:has(.wa) .btn:first-child{flex-basis:100%}
/* Urdu: Nastaliq. Jameel Noori is used only if installed on the user's device (license forbids redistribution); Noto Nastaliq Urdu (OFL) is the web font. */
html[lang=ur] body,html[lang=ur] button,html[lang=ur] select,html[lang=ur] input,html[lang=ur] textarea{font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif}
html[lang=ur] body{line-height:2}
html[lang=ur] .hero h1{line-height:2.1;font-size:24px;margin-bottom:8px}
html[lang=ur] h2,html[lang=ur] h3{line-height:2.1}
html[lang=ur] .btn,html[lang=ur] .stab,html[lang=ur] .post{line-height:2;padding-top:10px;padding-bottom:14px}
html[lang=ur] .tile .lb,html[lang=ur] .stile .sl{line-height:2;font-size:13px;font-weight:400}
html[lang=ur] .stile .sl{min-height:52px}
html[lang=ur] .meta,html[lang=ur] .notice{line-height:2.1}
html[lang=ur] select{padding-top:8px;padding-bottom:12px;line-height:2}
html[lang=ur] nav.top a,html[lang=ur] .langs button{line-height:2;padding-top:2px;padding-bottom:6px}
html[lang=ur] .card h3{font-size:17px}
html[lang=ur] footer{line-height:2.2}
/* keep Latin bits (numbers, EN job titles) readable */
html[lang=ur] .card h3,html[lang=ur] .sal,html[lang=ur] .sn{font-family:Outfit,'Noto Nastaliq Urdu',serif;line-height:1.5}
html[lang=ur] .langs button[data-l=en]{font-family:Outfit,sans-serif}html[lang=ur] .langs button[data-l=ar]{font-family:Cairo,sans-serif}
.langs a.lb{display:inline-block;text-decoration:none;border:2px solid #ffffff55;color:#fff;border-radius:10px;padding:6px 10px;font-size:15px;font-weight:700;margin-inline-start:4px}.langs a.lb.on{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.langs a.lb[lang=en]{font-family:Outfit,sans-serif}.langs a.lb[lang=ar]{font-family:Cairo,sans-serif}
.linkgrid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.linkgrid a{background:#fff;border:1px solid #cfd8e3;border-radius:999px;padding:8px 14px;color:var(--ocean);text-decoration:none;font-weight:700;font-size:15px}
.bc{font-size:14px;margin-bottom:10px}.bc a{color:var(--ocean)}.intro{font-size:16px;line-height:1.7}.card h3 a{color:inherit;text-decoration:none}
.flinks{margin-bottom:8px}.flinks a{color:#fff;margin:0 6px;text-decoration:none;display:inline-block;padding:4px}
.seo-links{margin-top:20px}header img{width:auto}
a.tile,a.stile{text-decoration:none;display:block}
.avail3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.avail3 .chip{text-align:center;border-radius:14px;padding:14px 6px}
.licl{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.licl span{background:#eef5fb;border-radius:8px;padding:2px 8px;font-size:13px;font-weight:700}
.av.mo{background:#fef3c7;color:#92400e}.cta2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cta2 .post{margin:6px 0}.post.alt{background:var(--teal);color:#fff}
html[lang=ur] .chip,html[lang=ur] .licl span{line-height:2}
/* chips v11 */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.chip{font-family:inherit;font-size:16px;font-weight:700;background:#fff;border:2px solid #cfd8e3;border-radius:999px;padding:10px 16px;color:var(--navy);cursor:pointer;text-align:start;display:inline-flex;align-items:center;gap:6px;max-width:100%;line-height:1.3;transition:background .15s,border-color .15s}
.chip .ck{display:none;font-weight:900}
.chip.on,.chip[aria-pressed=true]{background:var(--teal);border-color:#0f9488;color:#fff;box-shadow:0 2px 6px #14b8a655}
.chip.on .ck,.chip[aria-pressed=true] .ck{display:inline}
.chip:focus-visible,.tile:focus-visible,.stab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.selcount{font-size:14px;font-weight:700;color:#0f766e;margin:4px 2px 8px}
.avail3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.avail3 .chip{justify-content:center;text-align:center;border-radius:14px;padding:14px 6px}
.pick .tile.on,.tile[aria-pressed=true]{border-color:var(--gold);background:#fff7d6;box-shadow:0 0 0 2px var(--gold)}
html[lang=ur] .chip{line-height:2;padding-top:6px;padding-bottom:10px}
@media(max-width:400px){.chip{font-size:15px;padding:9px 12px}}
/* pager */
.pager{margin:18px 0 8px;text-align:center}.pgrow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pg{min-width:52px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:14px;background:#fff;border:2px solid #cfd8e3;color:var(--navy);font-weight:800;font-size:19px;text-decoration:none;font-family:Outfit,Cairo,sans-serif}
.pg.nav{background:var(--ocean);border-color:var(--ocean);color:#fff;padding:0 18px}.pg.cur{background:var(--navy);border-color:var(--gold);color:#fff}.pg.gap{border:0;background:none;min-width:24px}
.pginfo{margin-top:8px;font-size:15px;color:#3b4b66;font-weight:700}
html[lang=ur] .pg.nav,html[lang=ur] .pginfo{font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;line-height:2}
@media(max-width:400px){.pg{min-width:46px;min-height:48px;font-size:17px;padding:0 10px}}
#jobsh{scroll-margin-top:140px}
/* compact job cards v13 */
.jobs{gap:8px}
.card.jc{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;box-shadow:0 1px 4px #0a1f4412}
.jc .jic{width:40px;height:40px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:22px}
.jc .jb{min-width:0}.jc h3{font-size:16px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.jc h3 a{color:inherit;text-decoration:none}
.jc .badge{font-size:10px;padding:0 4px}
.jc .jm{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:13px;color:#3b4b66;margin-top:2px}.jc .js{color:#0b7a5c;font-weight:800}
.jc .src{display:inline-block;font-size:11px;color:#5b6b85;background:#eef2f7;border-radius:6px;padding:0 6px;margin-top:3px;text-decoration:none}
.jc .ja{display:flex;align-items:center;gap:6px}
.jc .btn.ap{flex:none;font-size:15px;padding:10px 14px;border-radius:12px;white-space:nowrap}
.jc .ib{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px;background:var(--bg);color:var(--navy);border:1px solid #d6dee8}
.jc .ib.wa{background:#0E7A3F;color:#fff;border:0}.jc .ib.call{background:var(--navy);color:#fff;border:0}.jc .ib.sh{font-weight:900}
@media(max-width:520px){.card.jc{grid-template-columns:36px minmax(0,1fr);row-gap:8px}.jc .jic{width:36px;height:36px;font-size:20px}.jc .ja{grid-column:1/-1;justify-content:flex-end}.jc .btn.ap{flex:1;max-width:220px}}
@media(min-width:800px){.layout main .jobs,.wrap>.jobs{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}}
html[lang=ur] .jc h3{line-height:1.5}html[lang=ur] .jc .jm span{font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;line-height:1.9}
@media(max-width:520px){.card.jc{padding:8px 10px;row-gap:6px}.jc .btn.ap{padding:8px 12px;font-size:15px}.jc .ib{width:38px;height:38px}}
/* ===== balance v16 ===== */
header{min-height:64px;padding:10px 20px;gap:12px;align-items:center}
header .logo,header img.logo{height:44px;width:auto;display:block}
nav.top{gap:8px;align-items:center}
nav.top a,.langs button,.langs a.lb{height:38px;min-width:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;font-size:15px;line-height:1;border-radius:10px;box-sizing:border-box;margin:0}
.langs{display:flex;gap:6px;align-items:center}
.hero{padding:14px 16px 16px}.hero h1{font-size:30px;line-height:1.25;margin:0 0 2px}.hero p{font-size:15px}
.filters{gap:8px;margin:12px 0 10px}
.filters select,.filters input,.srch input{height:44px;font-size:15px;padding:0 12px;border-radius:12px;border:1.5px solid #cfd8e3;background:#fff}
.srch{display:flex;gap:6px;min-width:0}.srch input{flex:1;min-width:0;width:100%;font-family:inherit}
.srch button{height:44px;width:44px;flex:none;border:0;border-radius:12px;background:var(--ocean);color:#fff;font-size:18px;cursor:pointer}
#tiles .tile .ic{font-size:30px}
.stile{padding:8px 6px;border-radius:14px}.stile .si{font-size:22px}.stile .sl{font-size:12.5px;min-height:30px;line-height:1.25}
.stile .sn{min-width:34px;font-size:13px;padding:1px 8px;line-height:1.5}
h2{font-size:18px;margin:12px 0 8px}
@media(min-width:800px){.filters{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.3fr)}}
@media(max-width:799px){header{min-height:56px;padding:8px 12px}header .logo,header img.logo{height:36px}
 nav.top a,.langs button,.langs a.lb{height:34px;padding:0 10px;font-size:14px;min-width:34px}
 .hero h1{font-size:23px}.hero{padding:10px 14px 12px}
 .filters{grid-template-columns:1fr 1fr}.filters .srch{grid-column:1/-1}}
html[lang=ur] nav.top a,html[lang=ur] .langs a.lb[lang=ur],html[lang=ur] .langs button[data-l=ur]{line-height:1;padding-bottom:4px}
html[lang=ur] .hero h1{font-size:26px;line-height:1.9}html[lang=ur] .filters select,html[lang=ur] .srch input{line-height:1.6;padding-top:0;padding-bottom:4px}
html[lang=ur] .stile .sl{min-height:44px;line-height:1.8}
@media(max-width:799px){html[lang=ur] .hero h1{font-size:21px}}
html[lang=ur] .stile .sl{min-height:38px;line-height:1.6;font-size:12px}html[lang=ur] .stile{padding:6px 6px}
@media(max-width:799px){header{flex-wrap:nowrap;gap:6px;padding:8px 10px}header .logo,header img.logo{height:32px}
 nav.top a:first-child{display:none}nav.top a,.langs button,.langs a.lb{height:32px;padding:0 8px;font-size:13px;min-width:32px;border-radius:8px}.langs{gap:4px}}
/* equal sector tile heights in all languages */
.stile{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:112px;box-sizing:border-box}
.stile .sl{min-height:0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[lang=ur] .stile .sl{line-height:1.55;font-size:12px}html[lang=ur] .stile .si{line-height:1.2}
@media(max-width:799px){.stile{height:118px}}
/* Gulf hero artwork (original SVG, decorative) */
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:120px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/gulf_hero_m.svg?v=1) center bottom/cover no-repeat;pointer-events:none}
@media(min-width:800px){.hero{min-height:150px}.hero::before{background-image:url(/assets/gulf_hero.svg?v=1)}}
.hero h1,.hero p{text-shadow:0 1px 3px rgba(5,15,40,.85)}
.hero.slim{min-height:78px}.hero.slim::before{background-position:center 85%}
@media(min-width:800px){.hero.slim{min-height:92px}}
.hero.slim{height:108px;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
@media(min-width:800px){.hero.slim{height:124px}}
.hero.slim h1:empty::before,.hero.slim p:empty::before{content:"\00a0"}

/* CLS guard for JS-rendered static pages: reveal once language applied (3s failsafe) */
body.pre .wrap,body.pre nav.top,body.pre footer{visibility:hidden;animation:kjnshow 0s 3s forwards}
html.rdy body.pre .wrap,html.rdy body.pre nav.top,html.rdy body.pre footer{visibility:visible;animation:none}
@keyframes kjnshow{to{visibility:visible}}
body.pre #list{min-height:520px}