
/* ===== Theme: KSA Careers V4 ===== */
:root{
  --navy:#0b2545;
  --navy-700:#081c34;
  --gold:#c5a300;
  --sand:#f7f3e8;
  --paper:#ffffff;
  --ink:#111827;
  --mute:#6b7280;
  --line:#e6e2d9;
  --rad:18px;
  --elev:0 14px 28px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{font-size:16px}
html,body{height:100%}
body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:'Cairo','Tajawal',system-ui,-apple-system,Segoe UI,Roboto,'Noto Kufi Arabic',sans-serif;
  direction: rtl; line-height:1.65;
}
img{max-width:100%;display:block;height:auto;border-radius:14px}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{width:min(1120px,92%);margin-inline:auto}
.stack{display:grid;gap:14px}
.hstack{display:flex;gap:12px;align-items:center}

.header{
  background:
    linear-gradient(180deg, rgba(11,37,69,.94), rgba(11,37,69,.92)),
    url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  color:#fff; padding:20px 0 56px; border-bottom:4px solid var(--gold);
}
.toprail{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.brand .sig{inline-size:44px;block-size:44px;border-radius:12px;background:#fff;color:var(--navy);
  display:grid;place-items:center;box-shadow:var(--elev);font-weight:900}
.toprail a{color:#fff;border:1px solid rgba(255,255,255,.25);padding:.35rem .8rem;border-radius:10px}
.toprail a:hover{background:rgba(255,255,255,.14)}
.hero{margin-top:10px}
.hero h1{margin:6px 0;font-size:clamp(1.35rem,4.8vw,2.2rem)}
.hero p{margin:0;color:#f3f4f6}

/* Listings (new style) */
.section{padding:28px 0 48px}
.listings{display:grid;gap:14px}
.panel{
  display:grid; grid-template-columns: 100px 1fr auto; gap:14px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--rad); box-shadow:var(--elev);
  padding:14px; position:relative; overflow:hidden;
}
@media (max-width:680px){ .panel{grid-template-columns:72px 1fr} .panel .cta{grid-column:1/-1}}
.thumb{
  inline-size:100px; block-size:100px; border-radius:14px;
  background:linear-gradient(135deg,#fff, #f0e7cf); border:1px solid var(--line);
  display:grid; place-items:center; font-size:28px;
}
.panel h3{margin:0;font-size:1.1rem}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 8px}
.pill{background:#fff7d6;border:1px solid #f0e399;color:#6b5600;padding:.25rem .6rem;border-radius:999px;font-weight:800;font-size:.82rem}
.pill.alt{background:#e8eef8;border-color:#d9e3f3;color:#213a63}
.snip{margin:0;color:#374151}
.cta{display:flex;align-items:center;gap:10px}
.btn{appearance:none;border:0;border-radius:12px;padding:.7rem 1rem;font-weight:900;cursor:pointer;transition:.2s ease}
.btn-gold{background:var(--gold);color:#000;box-shadow:0 8px 14px rgba(197,163,0,.25)}
.btn-gold:hover{filter:brightness(.95); transform:translateY(-1px)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--navy)}
.btn-ghost:hover{background:#faf7ef}

/* Reviews (grid instead of slider) */
.reviews{
  background:var(--paper); border:1px solid var(--line); border-radius:22px; box-shadow:var(--elev);
  padding:18px;
}
.reviews h2{margin:0 0 10px}
.grid-rev{display:grid;gap:12px; grid-template-columns:1fr; }
@media (min-width:760px){.grid-rev{grid-template-columns:repeat(3,1fr)}}
.card-rev{
  background:#fff; border:1px solid #efe6cf; border-radius:16px; padding:14px;
}
.stars{color:#f59e0b}
.person{display:flex;justify-content:space-between;color:#6b7280;margin-top:8px;font-weight:700}

/* Why choose us (ribbon style) */
.why{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:900px){.why{grid-template-columns:repeat(3,1fr)}}
.why .tile{
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--elev); position:relative;
}
.ribbon{
  position:absolute; inset-block-start:12px; inset-inline-end:-8px;
  background:var(--gold); color:#000; padding:.25rem .6rem; border-top-left-radius:8px; border-bottom-left-radius:8px;
  font-weight:900; font-size:.8rem;
}
.iconbox{inline-size:42px; block-size:42px; border-radius:12px; background:#112a4a; color:#ffd95a; display:grid; place-items:center; margin-bottom:8px}

/* CTA bar */
.ctabar{
  margin-top:14px; background:linear-gradient(90deg, var(--navy), var(--navy-700));
  color:#fff; border-radius:18px; padding:18px; display:grid; gap:10px; grid-template-columns:1fr auto; align-items:center;
  border:1px solid #0a1f3a;
}

/* Drawer + Toast */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; z-index:40}
.scrim.show{display:block}
.sheet{
  position:fixed; inset-inline:0; bottom:0; background:#fff; border-top-left-radius:18px; border-top-right-radius:18px;
  transform:translateY(100%); transition:transform .28s ease; z-index:50; border:1px solid var(--line);
  box-shadow: 0 -16px 30px rgba(0,0,0,.14);
}
.sheet.open{transform:translateY(0)}
.sheet .bar{width:46px;height:5px;border-radius:999px;background:#e5e7eb;margin:10px auto 6px}
.sheet .area{padding:16px 18px 20px}
.formgrid{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:560px){.formgrid{grid-template-columns:repeat(3,1fr)}}
.lab{font-weight:800;color:#213a63;margin-bottom:6px;font-size:.92rem}
.field{width:100%;padding:.7rem .85rem;border-radius:10px;border:1px solid var(--line);font-family:inherit;font-size:1rem}
.field:focus{outline:2px solid #e7d88a;border-color:#d2bd5b}
input[type="email"], input[type="tel"]{direction:ltr;text-align:left}

.toast{
  position:fixed; inset-inline:50%; bottom:22px; transform:translateX(-50%);
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; box-shadow:var(--elev); display:none; z-index:60;
}
.toast.show{display:block}

/* Footer */
.footer{background:#091a33;color:#e7eaf3;padding:22px 0;margin-top:28px;border-top:4px solid var(--gold)}
.footergrid{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:740px){.footergrid{grid-template-columns:1fr auto}}
.footer a{color:#ffd95a}
