:root{
  --saudi-green:#0b6b3a;
  --saudi-green-2:#0f7a41;
  --white:#ffffff;
  --beige:#f4efe6;
  --gray-900:#1f2937;
  --gray-700:#374151;
  --gray-200:#e5e7eb;
  --shadow: 0 14px 40px rgba(17,24,39,.10);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Tajawal","Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--gray-900);
  background:linear-gradient(180deg, var(--beige), #fff 40%, #fff);
  line-height:1.75;
}
a{color:inherit}
.container{width:min(1120px, 92%); margin-inline:auto}

.skip-link{
  position:absolute; inset-inline-start:12px; top:12px;
  padding:10px 14px; background:var(--gray-900); color:#fff; border-radius:10px;
  transform:translateY(-160%); transition:transform .2s ease;
  z-index:999;
}
.skip-link:focus{transform:translateY(0)}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(229,231,235,.75);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:800; letter-spacing:.2px;
}
.logo{
  width:38px; height:38px; border-radius:14px;
  background:
    radial-gradient(120% 120% at 10% 10%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--saudi-green), #0a4e2c);
  box-shadow:0 10px 22px rgba(11,107,58,.25);
}
.brand span{font-size:1.02rem}

.navlinks{
  display:flex; align-items:center; gap:10px;
}
.navlinks a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  color:var(--gray-700);
  font-weight:600;
}
.navlinks a:hover{background:rgba(11,107,58,.08); color:var(--saudi-green)}
.navlinks a[aria-current="page"]{
  background:rgba(11,107,58,.12);
  color:var(--saudi-green);
}

.menu-btn{
  display:none;
  border:1px solid rgba(229,231,235,.95);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
}

.hero{
  padding:42px 0 18px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:22px;
  align-items:stretch;
}
.card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(229,231,235,.90);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-card{
  padding:26px;
  position:relative;
  overflow:hidden;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(11,107,58,.10);
  color:var(--saudi-green);
  font-weight:800;
  font-size:.95rem;
}
.badge::before{
  content:"";
  width:10px; height:10px; border-radius:999px;
  background:var(--saudi-green);
  box-shadow:0 0 0 6px rgba(11,107,58,.10);
}
h1{
  margin:14px 0 10px;
  font-size:clamp(1.55rem, 2.4vw, 2.25rem);
  line-height:1.35;
}
.lead{
  margin:0;
  color:var(--gray-700);
  font-size:1.05rem;
}
.hero-highlights{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.pill{
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(244,239,230,.9), rgba(255,255,255,.9));
  border:1px solid rgba(229,231,235,.8);
}
.pill strong{display:block; color:var(--gray-900)}
.pill span{color:var(--gray-700); font-size:.98rem}

.hero-media{
  position:relative;
  overflow:hidden;
  padding:0;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  min-height:340px;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,107,58,.28), rgba(31,41,55,.18) 35%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.credit{
  position:absolute;
  inset-inline-start:12px;
  bottom:12px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(229,231,235,.9);
  border-radius:12px;
  padding:8px 10px;
  font-size:.92rem;
  color:var(--gray-700);
}

.section{
  padding:22px 0;
}
.section h2{
  margin:0 0 10px;
  font-size:1.35rem;
}
.muted{color:var(--gray-700)}
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.job{
  padding:20px;
}
.job-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.role{
  margin:0;
  font-size:1.25rem;
}
.tag{
  background:rgba(11,107,58,.10);
  color:var(--saudi-green);
  padding:7px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:.92rem;
  border:1px solid rgba(11,107,58,.18);
}
.kv{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
}
.kv-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(244,239,230,.65);
  border:1px solid rgba(229,231,235,.85);
}
.kv-row b{color:var(--gray-900)}
.kv-row span{color:var(--gray-700)}
.list{
  margin:12px 0 0;
  padding:0 18px 0 0;
}
.list li{margin:6px 0; color:var(--gray-700)}
.notice{
  padding:18px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(11,107,58,.08), rgba(255,255,255,.92));
  border:1px solid rgba(11,107,58,.20);
}
.notice strong{color:var(--saudi-green)}
.footer{
  border-top:1px solid rgba(229,231,235,.85);
  padding:18px 0 26px;
  color:var(--gray-700);
  font-size:.98rem;
}
.footer .row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap;
}
.smallnav{display:flex; gap:10px; flex-wrap:wrap}
.smallnav a{color:var(--gray-700); text-decoration:none}
.smallnav a:hover{color:var(--saudi-green); text-decoration:underline}
.page{
  padding:26px 0 10px;
}
.page h1{margin-top:0}
.article{
  padding:22px;
}
.article p{margin:10px 0; color:var(--gray-700)}
.article ul{margin:10px 0; padding:0 18px 0 0; color:var(--gray-700)}
.hr{
  height:1px; background:rgba(229,231,235,.95);
  border:0; margin:18px 0;
}

/* Mobile */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media img{min-height:260px}
}
@media (max-width: 720px){
  .menu-btn{display:inline-flex}
  .navlinks{
    display:none;
    position:absolute;
    top:64px;
    inset-inline:0;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid rgba(229,231,235,.9);
    padding:10px 4%;
    gap:6px;
    flex-direction:column;
    align-items:stretch;
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 12px}
  .grid{grid-template-columns:1fr}
  .hero-highlights{grid-template-columns:1fr}
}